webpack+vue项目实战（一,搭建运转环境和相干设置）

2019年8月25日 171次阅读 来源: 守候

1.媒介

如今正在开辟一个公司的背景治理项目，项目是一个单页面运用。功用上就是治理贩卖定单的各个环节，包含物流治理，回款治理，定单治理等等的功用。这些就不多说了。项目是，基于webpack3,vue2.2.6,element2.2.9。js语法是运用es6,另有运用到的一些资本比方，vue-router,vue-resource,webpack-dev-server等。运转环境是node6.10.0,npm3.10.10，别的版本的小小同伴要注重版本兼容的题目喔！

2.package.json

好了，首页在建立项目目次（admin），下面举行项目的第一步，搭建环境。搭建环境的第一步，就是建立package.json，我如今就是简朴粗犷的建立发-从之前的项目拷贝一个如许的文件，然后再改一下，代码就是下面如许。人人也能够$ npm init天生这个文件，然后再装置相干的依靠。

{
  "name": "admin",
  "version": "1.0.0",
  "description": "背景治理体系",
  "dependencies": {},
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.14.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.18.0",
    "browser-sync": "^2.18.2",
    "css-loader": "^0.25.0",
    "ejs-compiled-loader": "^2.1.1",
    "element-ui": "1.2.9",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "glob": "^7.0.6",
    "gulp": "^3.9.1",
    "gulp-file-include": "^1.0.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^3.7.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.0.2",
    "scss-loader": "0.0.1",
    "style-loader": "^0.13.1",
    "tween.js": "^16.6.0",
    "url-loader": "^0.5.7",
    "vue": "2.2.6",
    "vue-loader": "^10.0.2",
    "vue-resource": "^1.0.3",
    "vue-router": "^2.4.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "2.2.6",
    "vuex": "^2.0.0",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.4.5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --hot --inline"
  },
  "author": "chen",
  "license": "ISC"
}

有了上面的设置，在命令行输入$ npm install就能够装置相干的依靠了！

(vue，vue-template-compiler，element-ui这几个设置的版本号前面是没有^，这是由于项目上，我不须要再更新这些资本了，由于之前试过，由于版本更新了的题目，致使element显现不一般，所以，就牢固住了这几个的版本！另有一个就是，这个是一个json文件，不能在这里写解释喔！不然会报错！)

装置完了以后，项目目次应当是如许的。
《webpack+vue项目实战（一,搭建运转环境和相干设置）》

.idea是我用webStorm编辑器开辟，自动天生的文件
node_modules是装置以后天生的node模块文件，
.npmrc是运用淘宝的镜像的文件，内容以下

registry = http://registry.npm.taobao.org
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

3.webpack.config.babel.js

设置完了package.json以后，下面写webpack的设置文件（webpack.config.babel.js）了。

webpack.config.babel.js，如许定名是想让webpack在编译的时刻自动识别es6的语法，如今貌似不须要如许定名了，之前用webpack1.x的时刻貌似是须要的

webpack的设置，之前说过，也写过文章，这里就当简朴温习一下，我就不一块块的说了，直接在代码那边写上解释。代码以下

let path = require('path');
let webpack = require('webpack');
/*
 html-webpack-plugin插件，webpack中天生HTML的插件，
 详细能够去这里检察https://www.npmjs.com/package/html-webpack-plugin
 */
let HtmlWebpackPlugin = require('html-webpack-plugin');
/*
 webpack插件，提取大众模块
 */
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
let config = {
    //进口文件设置
    entry: {
        index: path.resolve(__dirname, 'src/js/page/index.js'),
        vendors: ['vue', 'vue-router','vue-resource','vuex','element-ui','element-ui/lib/theme-default/index.css'] // 须要举行零丁打包的文件
    },
    //出口文件设置
    output: {
        path: path.join(__dirname, 'dist'), //输出目次的设置，模板、款式、剧本、图片等资本的途径设置都相对于它
        publicPath: '/dist/',                //模板、款式、剧本、图片等资本对应的server上的途径
        filename: 'js/[name].js',            //每一个页面对应的主js的天生设置
        chunkFilename: 'js/[name].asyncChunk.js?'+new Date().getTime() //chunk天生的设置
    },
    module: {
        //加载器
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
                    }
                }
            },
            {
                test: /\.html$/,
                loader: "raw-loader"
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["es2015","stage-0"],
                    plugins: ['syntax-dynamic-import']
                }
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                //图片加载器，相同file-loader，更适合图片，能够将较小的图片转成base64，削减http要求
                //以下设置，将小于8192byte的图片转成base64码
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&name=images/[hash].[ext]'
            }
        ]
    },
    //插件
    plugins: [
        //webpack3.0的局限提拔
        new webpack.optimize.ModuleConcatenationPlugin(),
        //打包天生html文件，而且将js文件引入进来
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, 'dist/html/index.html'), //天生的html寄存途径，相对于path
            template: path.resolve(__dirname, 'src/html/index.html'), //ejs模板途径,前面最好加上loader用于处置惩罚
            inject: 'body',  //js插进去的位置，true/'head'/'body'/false
            hash: true
        }),
        //提取功用模块
        new CommonsChunkPlugin({
            name: 'vendors', // 将大众模块提取，天生名为`vendors`的chunk
            minChunks: 2, //大众模块被运用的最小次数。设置为2，也就是同一个模块只要被2个之外的页面同时引用时才会被提取出来作为common chunks
            // children:true  //假如为true,那末大众组件的一切子依靠都将被挑选进来
        }),
    ],
    //运用webpack-dev-server，启动热革新插件
    devServer: {
        contentBase: path.join(__dirname, "/"),
        host: 'localhost',  //发起写IP地点，开辟时刻电脑的ip地点。localhost我不知道是幻觉照样如何，有时刻热革新不灵敏
        port: 9090, //默许9090
        inline: true, //能够监控js变化
        hot: true//热启动
    },
    //搜刮途径变量
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        },
        extensions:['.js','.scss','.vue','.json']// 能够不加后缀, 直接运用 import xx from 'xx' 的语法
    }
};
module.exports = config;

4.vue-router

写好package.json和webpack的设置以后，接下来就是路由(vue-router)了。这一步应当说是预备步骤，为下一步做预备的，轻易测试。
1.首页建立一个设置路由的文件以及一个基本的组件文件（轻易测试），welcome.vue（这个组件文件只要一张图片，款式也很简朴），建立完了以后，目次是如许的。人人要注重这个目次的文件。

《webpack+vue项目实战（一,搭建运转环境和相干设置）》

《webpack+vue项目实战（一,搭建运转环境和相干设置）》
附上代码

<template>
    <div class="welcome-wrap">
        <img src="http://i1.buimg.com/1949/43ab520761604482.jpg" alt="">
    </div>
</template>
<script>
    export default{
        data(){
            return{
                name:'welcome'
            }
        }
    }
</script>
<style lang="scss" scoped>
    .welcome-wrap{
        height: 100%;
        width: 100%;
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
        .hd{
            font-size: 30px;
            text-align: center;
        }
        .bd{

        }
    }
</style>
<style lang="scss">
    .welcome-steps{
        .el-step__line-inner{
            height: 100% !important;
        }
    }
</style>

《webpack+vue项目实战（一,搭建运转环境和相干设置）》

附上代码

import welcomeComponent from './../components/admin_base/welcome.vue';

//路由掌握
let snavRouter = [
    {
        path: '/',
        redirect: '/index?pos=0'
    },
    {
        path: '/index',
        component: welcomeComponent
    }
];
export {snavRouter}

5.index.js和index.html

接下来就设置进口文件，和进口文件的模板了。
进口文件，index.js
《webpack+vue项目实战（一,搭建运转环境和相干设置）》
代码以下：

require("../../html/index.html");
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
//运用router
Vue.use(VueRouter);
//运用resource
Vue.use(VueResource);
//运用ElementUI
Vue.use(ElementUI);
//引入router设置
import {snavRouter} from './../router/router';
//实例化router
const router = new VueRouter({
    routes: snavRouter
});
/**
 * @description 启动App
 * @returns {{name: string}}
 * @constructor
 */
    //App启动
let App = new Vue({
    el: '#App',
    data(){
        return {
            'name': 'index'
        }
    },
    router: router,
    mounted(){
    },
});

进口文件模板，index.html

《webpack+vue项目实战（一,搭建运转环境和相干设置）》
代码以下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=2.0">
    <title></title>
    <link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<div class="zyl-admin-wrap" id="App">
    <div class="zyl-admin-hd">
    </div>
    <div class="zyl-admin-bd">
        <div class="zyl-admin-snav">
        </div>
        <div class="zyl-admin-content">
            <div class="wrapper">
                <!-- 路由出口 -->
                <!-- 路由婚配到的组件将衬着在这里 -->
                <router-view></router-view>
            </div>
        </div>
    </div>
</div>
</body>
</html>

把改弄的都弄好了以后。先跑一下，证实一下本身的设置是否是准确的！，npm run dev

之前在package.json已写好了，npm run dev
相当于实行dev对应的命令行，在命令行输入webpack-dev-server --hot --inline是一样的效果！

《webpack+vue项目实战（一,搭建运转环境和相干设置）》

在浏览器输入‘http://localhost:9090/dist/ht…’
运转效果胜利的跑起来了！然则，人人有无发明，在浏览器的地点栏，涌现的是‘http://localhost:9090/dist/ht…’。效果是一般的，由于前面我们设置了路由，而且运用了路由！至于在地点上背面我为何加上pos参数，下一章会说到！

《webpack+vue项目实战（一,搭建运转环境和相干设置）》

路由（vue-router）。也许道理就是，在浏览器地点栏输入‘http://localhost:9090/dist/ht…’，路由（vue-router）就婚配到了(path: '/')。然后，重定向到了(redirect: '/index?pos=0')，重定向又婚配到了(path: '/index')，然后就加载了组件，加载了这个组件(component: welcomeComponent)，就会在index.html的<router-view></router-view>内里输出这个组件的内容，（相干的学问，能够到网上参考vue-router）。这个组件(component: welcomeComponent)，就是我们之前编写的welcome.vue。能够说的有点乱，人人注重整顿下，理清思绪。

《webpack+vue项目实战（一,搭建运转环境和相干设置）》

6.未完报酬

本日就先到这里了，这个系列今后会有几篇文章继承引见，毕竟这篇文章只是引见了基本的一个项目的搭建和设置。以及把项目跑起来！vue-router和element还没有写到。人人也放心好了，文章不会让人人等太久的。
末了，假如人人发明我那里写错了，或者是那里写得不好，迎接指导下。

    原文作者：守候
    原文地址: https://segmentfault.com/a/1190000010025189
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞