Vue & webpack entry practice

table of Contents

1. Download and install Vue
2. View
3. webpack
4. View-cli
- 4.1 Installation
- 4.2 file structure analysis

1. Download and install Vue

First installed Node.js, because the next step is to use one of the NPM installation Vue.
As recommended Vscode Editor: Create a folder with Vscode open.
Open Vscode command line window, enter the command npm init -yto initialize the folder, after the completion of more than a package.json file.
Enter the command npm install vue --savecommand to install Vue.

After the installation of more than one folder node_modules and package-lock.json, node_modules is the default storage location NPM installed modules, open and found to have a Vue folder.

2. View

2.1 Vue elements

Look at an example

<!DOCTYPE html>
<html>
<head>
    <!-- 注意路径-->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        数量为：<input type="text" v-model="num"><br>
        <button v-on:click="increase">点我+1</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app", 
            data: {
                num: 1
            },
            methods: {
                increase: function() {
                    this.num++;
                }
            }
        })
    </script>
</body>
</html>

Effect: Digital set the text box, click +1 1 increase in the original basis.

2.1.1 Creating instance Vue

Creating follows,

el represents id HTML template to be associated,

data showing an initial value of the template data,

methods define a function template that appears.

var app = new Vue({
     el: "#app", 
     data: {num: 1},
     methods: {
         increase: function() {
             this.num++;
         }
     }
})

Note: This code must be written in html template below, or do not take effect.

2.1.2 Html template

Html template to be rendered, which id is appa value corresponding to the el Vue constructor #app.

Vue can only render the internal div variables, methods and other elements.

<div id="app">
        数量为：<input type="text" v-model="num"><br>
        <button v-on:click="increase">点我+1</button>
</div>

2.1.3 Data and views

This is the Vue features: two-way binding .

In the above example, you click +1 increase trigger method, + 1, + 1 digital Vue example of the text box num;

Change the numbers in the boxes, and then +1 point, based on the original digital +1 will be described modification can also modify the display content corresponding instance Vue variables.

This is a two-way data binding view and modify the view, the data becomes; modify data, views have changed.

2.1.4 Method

Button by v-on: click bound increase instruction methods, methods defined in the inside of the object attributes Vue method.

html

<button v-on:click="increase">点我+1</button>

var app = new Vue({
     ...
     methods: {
         increase: function() {
             this.num++;
         }
     }
})

2.1.5 Life Cycle

Vue each instance when it is created to go through a series of initialization process, such as creating instances, load the template and so on. Vue life cycle for each state are set monitor function. Here there should be a picture, but this picture is too long, to go to see their own address

The map's address

Use the following

var vm = new Vue({
    el:"#app",
    data:{...},
    //监听函数
    created(){
        ...
    }
})

2.2 Instruction

2.2.1 interpolation expression

Jsp as an EL expressions, the display variable or an expression result, there are {{}}, v-text, v-htmlthree kinds of instructions

v-htmlAfter the command output will automatically render html text.

Code

<div id="test1">
        “花括号表达式的值：”{{1+1}}<br>
        “v-text”标签输出表达式的值：<span v-text="1+1"></span> <br>
        “v-html”标签输出表达式的值：<span v-html="1+1"></span> <br>
        “花括号输出文本内容：”{{hello}}<br>
        “v-text”标签输出普通文本：<span v-text="hello"></span> <br>
        “v-html”标签渲染html文本：<span v-html="hello"></span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test1",
            data: {
                hello: "<h1>大家好，我是小明</h1>"
            }
        })
    </script>

result

2.2.2 in the model

Interpolation expression can only be changed by changing the content displayed variables, and v-modelcommand allows data and views influence each other.

Because the view is operable, thus limiting the types corresponding to the html tag. v-modelSupported instruction labels

input
select
textarea
checkbox
radio
Components (custom components in Vue)

Code

    <div id="test2">
        <input type="checkbox" v-model="language" value="Java" />Java<br />
        <input type="checkbox" v-model="language" value="PHP" />PHP<br />
        <input type="checkbox" v-model="language" value="Swift" />Swift<br />
        <h1>
            你选择了：{{language.join(',')}}
        </h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test2",
            data: {
                language: []
            }
        })
    </script>

result

After selecting the check box corresponding to the displayed contents change; background change data selection item display will change.

2.2.3 v-on

An element binding events. For example, a click event binding syntax v-on:clickcan be abbreviated @click.

<!-- 给页面元素绑定事件 -->
    <div id="test3">
        <!--事件中直接写js片段-->
        <button v-on:click="num++">增加</button><br />
        <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
        <button v-on:click="decrement">减少</button><br />
        <!-- 简写方式 -->
        <button @click="decrement">减少</button><br />
        <!--键盘事件-->
        <button @keyup.enter="num++">先使我获得焦点，然后按下enter键增加</button><br />
        <h1>num: {{num}}</h1>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#test3",
            data: {
                num: 1
            },
            methods: {
                decrement() {
                    this.num--;
                }
            }
        })
    </script>

2.2.4 v-for

Data used to loop through

Iterate

<!-- 遍历数组 -->
    <div id="test4">
        <ul>
            <li v-for="(user,index) in users">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test4",
            data: {
                users: [{
                        name: '小红',
                        gender: '女',
                        age: 11
                    },
                    {
                        name: '小明',
                        gender: '男',
                        age: 10
                    }
                ]
            }
        })
    </script>

Traverse the object

    <div id="test5">
        <ul>
            <li v-for="(value,key,index) in user">
                {{index}} - {{key}} : {{value}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test5",
            data: {
                user: {
                    name: '小明',
                    gender: '男',
                    age: 10
                }
            }
        })
    </script>

2.2.5 v-if and v-show

v-if the conditions for determining

    <div id="test6">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br />
        <h1 v-if="show">
            你好
        </h1>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test6",
            data: {
                show: true
            }
        })
    </script>

Click the button, the text will be hidden.

v-if, and may also be used in conjunction with v-for

<div id="test7">
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender === '女'">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test7",
            data: {
                users: [{
                        name: '小红',
                        gender: '女',
                        age: 10
                    },
                    {
                        name: '小明',
                        gender: '男',
                        age: 10
                    }
                ]
            }
        })
    </script>

The results show only a small red

Of course, there have if else and elseif

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show controls the display element, if the element is hidden, not removed from the dom, but set the display to none

<div id="test6">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br />
        <h1 v-show="show">
            你好
        </h1>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test6",
            data: {
                show: true
            }
        })
</script>

2.2.6 v-bind

If we want to change the class attribute, so write is wrong

<div class="{{isAcctive}}"></div>

因为插值表达式不能用于属性的值中。

我们可以借助v-bind:class指令,可以简写为:class

    <div id="test8">
        <div :class="isActive">注意class的值</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test8",
            data: {
                isActive: ['active', 'hasError']
            }
        })
    </script>

结果

2.2.7 计算属性

在插值表达式中写一长串代码很难看，可以用“计算属性”来替代，这个属性实际上是个方法，将方法名以变量形式绑定到插值表达式中了：

    <div id="test9">
        <h1>您的生日是：{{birth}} </h1>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#test9",
            data: {
                birthday: 1429032123201 // 毫秒值
            },
            computed: {
                birth() { // 计算属性本质是一个方法，但是必须返回结果
                    const d = new Date(this.birthday);
                    return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
                }
            }
        })
    </script>

结果

2.2.8 watch

假如我们要监控用户输入了什么内容，可以用监控属性来实现

    <!-- 监控属性变化 -->
    <div id="test10">
        <input type="text" v-model="message">
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#test10",
            data: {
                message: ""
            },
            watch: {
                message(newVal, oldVal) {
                    console.log(newVal, oldVal);
                }
            }
        })
    </script>

结果

在文本框输入good，控制台记录了每个按键按下的动作

2.3 组件化

一个页面中总有相同的部分可以抽取出来做为组件使用，Vue提供了定义组件的方法。

2.3.1 全局组件

代码

    <div id="test1">
        <counter></counter>
    </div>

    <script type="text/javascript">
        // 定义全局组件，参数1，组件名称；参数2，组件参数。
        // 用html模板替换掉了counter标签，注意数据传递的方式，是data()而不是data
        Vue.component("counter", {
            template: '<button v-on:click="count++">你点了我 {{ count }} 次</button>',
            data() {
                return {
                    count: 0
                }
            }
        })

        var app = new Vue({
            el: "#test1"
        });
    </script>

页面表现

组件也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data的定义方式比较特殊，必须是一个函数。

定义全局组件后，可以在其他地方使用。

值得注意的一点：使用者必须也是一个Vue实例。

    <div id="test2">
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#test2"
        });
    </script>

现象

可以看出：每个组件都维护自己的一份变量。

2.3.2 局部组件

就像定义变量一样定义了一个局部组件localCounter，将其注册到我们自定义的<test-component></test-component>标签中。

注意：此处用了驼峰命名法来对应标签：testComponent对应于test-component

    <div id="test3">
        <test-component></test-component>
    </div>

    <script type="text/javascript">
        const localCounter = {
            template: 
                '<button v-on:click="count++">我是局部组件：你点了我 {{ count }} 次</button>',
            data() {
                return {
                    count: 0
                }
            }
        };
        var app = new Vue({
            el: "#test3",
            components: {
                testComponent: localCounter
            }
        });
    </script>

2.3.3 组件通信

2.3.3.1 父向子通信

下面的例子展示了：父组件得到lessons的数据后传递到子组件中，以子组件的模板显示

    <div id="test4">
        <parent :items="lessons" />
    </div>
    <script type="text/javascript">
        //子组件，通过props来接收父组件传过来的数据
        //这个子组件是一个局部组件
        const son = {
            template: 
            '<ul>\
                <li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
            </ul>',
            props: {
                items: {
                    type: Array,
                    default: []
                }
            }
        }

        var app = new Vue({
            el: "#test4",
            components: {
                parent: son
            },
            data: {
                lessons: [
                    {id: 1,name: 'java'},
                    {id: 2,name: 'php'},
                    {id: 3,name: 'ios'},
                ]
            }
        })
    </script>

现象

2.3.3.2 子向父通信

代码

<div id="test5">
        <h2>num: {{num}}</h2>
        <my-component @inc="increment" @dec="decrement"></my-component>
    </div>

    <script type="text/javascript">
        Vue.component("myComponent", {
            template: '\
                <div>\
                    <button @click="plus">加</button>  \
                    <button @click="reduce">减</button>  \
                </div>',
            methods: {
                plus() {
                    this.$emit("inc");
                },
                reduce() {
                    this.$emit("dec");
                }
            }
        })
        var app = new Vue({
            el: "#test5",
            data: {
                num: 0
            },
            methods: {
                increment() {
                    this.num++;
                },
                decrement() {
                    this.num--;
                }
            }
        });
    </script>

现象

点击加按钮，数值增加；点击减按钮，数量减少。

解释

父组件是

<my-component @inc="increment" @dec="decrement"></my-component>

子组件是

Vue.component("myComponent", {
            template: '\
                <div>\
                    <button @click="plus">加</button>  \
                    <button @click="reduce">减</button>  \
                </div>',
            methods: {
                plus() {
                    this.$emit("inc");
                },
                reduce() {
                    this.$emit("dec");
                }
            }
})

想要通过子组件中的加和减按钮实现num的加和减，就要调用父组件的函数。

$emit()方法是Vue提供的用于调取父组件绑定函数的函数。

最后流程就是：点击加按钮，调用子组件的plus方法，plus方法调取父组件的increment方法实现num的增加操作。

2.4 vue-router

2.4.1 安装vue-router

安装命令npm install vue-router --save

引入依赖

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

2.4.2 实现功能

利用vue-router实现登录注册菜单的切换：

点击登录后显示登录页

点击注册后显示注册页

将登录、注册和路由分成三个组件，由index.html引入并使用。目录结构如下

login.js

const loginForm = {
    template:'\
    <div>\
    <h2>登录页</h2> \
    用户名：<input type="text"><br/>\
    密码：<input type="password"><br/>\
    </div>\
    '
}

register.js

const registerForm = {
    template:'\
    <div>\
    <h2>注册页</h2> \
    用户名：<input type="text"><br/>\
    密码：<input type="password"><br/>\
    确认密码：<input type="password"><br/>\
    </div>\
    '
}

router.js

// 根据路径渲染对应的组件
const indexRouter = new VueRouter({
    routes:[
        {
            path:"/login",
            component: loginForm
        },
        {
            path: "/register",
            component: registerForm
        }
    ]
})

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <!-- 跳转链接，点击后将地址传送给router  -->
        <span><router-link to="/login">登录</router-link></span>
        <span><router-link to="/register">注册</router-link></span>
        <hr/>
        <div>
             <!-- 路由锚点，点击跳转链接后router会在此渲染对应组件的html模板-->
            <router-view></router-view>  
        </div>
    </div>
    <script src="js/login.js"></script>
    <script src="js/register.js"></script>
    <script src="js/router.js"></script>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            router: indexRouter  //使用路由
        })
    </script>
</body>
</html>

3. webpack

3.1 webpack简介

Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源打包成一个整体，压缩混淆提高性能和安全性，将高级语法转义，提高兼容性。

3.2 四个核心概念

入口(entry)

webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据。
输出(output)

出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。
加载器（loader）

webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。
插件(plugins)

插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。

3.3 安装

执行命令npm install webpack webpack-cli --save-dev

在package.json里多了几行配置，分别是运行时依赖和开发依赖

3.4 配置

先在package.json同级的目录下新建webpack.config.js文件。

接下来以vue-router的demo为例演示webpack的用法。

3.4.1 配置入口

入口一般是一个或多个js文件，通过这些js文件找出相关的所有依赖树，最后打包输出。

在vue-router的demo里面，index.html引用了相关的js，但它是html文件，不适合作为启点。

因此我们需要一个额外的main.js引入其他所有的js。

main.js

//ES6语法导入js模块，注意：不带.js后缀
import Vue from '../node_modules/vue/dist/vue'
import VueRouter from '../node_modules/vue-router/dist/vue-router'
import loginForm from './js/login'
import registerForm from './js/register'

//VueRouter使用模块加载，必须加上这一句
Vue.use(VueRouter)

const indexRouter = new VueRouter({
    routes:[
        {
            path:"/login",
            component: loginForm
        },
        {
            path: "/register",
            component: registerForm
        }
    ]
})

var vm = new Vue({
    el: "#app",
    router: indexRouter
})

loginForm和registerForm都是做为js模块导入的，他们自己也要分别追加导出语句。

在login.js中追加一句

export default loginForm;

在register.js中追加一句

export default registerForm;

最后配置入口：在webpack.config.js中指定入口文件

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
}

3.4.2 配置出口

在webpack.config.js中指定出口路径和最终输出的文件名,最终的js如下

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+'/dist',  
        filename:'build.js'  //输出的js文件名
    }
}

3.5 执行打包并测试运行

执行命令npx webpack --config webpack.config.js

去掉index.html中的js引用标签，只引用打包好的build.js

<script src="../dist/build.js"></script>

测试运行，结果与打包之前一样。

3.6 打包CSS

webpack的四个核心概念，我们目前只使用了两个：入口和出口。

接下来使用加载器，加载非js资源，比如CSS。

3.6.1 安装加载器

执行命令：npm install style-loader css-loader --save-dev

3.6.2 编写css

新建一个和js目录同级的css文件夹，里面新建main.css

#app a{
    display: inline-block;
    width: 150px;
    line-height: 30px;
    background-color: dodgerblue;
    color: white;
    font-size: 16px;
    text-decoration: none;
}
#app a:hover{
    background-color: whitesmoke;
    color: dodgerblue;
}
#app div{
    width: 300px;
    height: 150px;
}
#app{
    width: 400px;
    border: 1px solid dodgerblue;
}

3.6.3 引入css模块

在main.js中添加import语句

import './css/main.css'

3.6.4 配置加载器

在webpack.config.js里配置，最终如下所示

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+'/dist',  
        filename:'build.js'  //输出的js文件名
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
                use: [ // 要使用的加载器，这两个顺序一定不要乱
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

3.6.5 重新打包并运行

依然是执行npx webpack --config webpack.config.js

最终的CSS效果能够展示出来（不贴图片了）。

注意：所有的js、css最终都被放到了build.js里面。

3.7 快速执行打包命令

package.json里面可以配置脚本，在scripts标签里面添加"build": "webpack"

{
  "name": "vue-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.0.6"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3"
  }
}

这样就可以执行npm run build命令进行打包，代替原先的npx webpack --config webpack.config.js命令。

3.8 打包html

之前都是将js、css等相关文件打包好，最后手动引入到index.html中。

而webpack的html打包插件，可以把html和js、css等一起打包直接生成可用的页面。

3.8.1 安装并配置插件

执行npm install --save-dev html-webpack-plugin命令安装

配置webpack.config.js，最终如下

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        // path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
        path : __dirname+'/dist',  
        filename:'build.js'  //输出的js文件名
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 通过正则表达式匹配所有以.css后缀的文件
                use: [ // 要使用的加载器，这两个顺序一定不要乱
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', // dist目录下生成的文件名
            template: './src/index.html' // 我们原来的index.html，作为模板
        })
    ]
}

3.8.2 打包查看效果

去掉原先index.html里面的引用build.js的标签

执行打包命令npm run build

发现dist文件夹下多了个index.html，运行发现效果与之前一致。

3.9 热更新

每次修改js或css都要重新打包，麻烦，webpack提供了一个热更新插件，这个插件搞了一个服务器，

我们修改代码后，可以自动检测修改并更新。

安装命令是：npm install webpack-dev-server --save-dev

之后在package.json中的scripts标签下添加

"dev": "webpack-dev-server --inline --hot --open --port 8081 --host 127.0.0.1"

注意端口号。

执行命令npm run dev，注意：是dev，不是build。

4. Vue-cli

使用webpack打包vue项目时需要我们手动安装插件、配置等，很麻烦。Vue提供了一个脚手架，Vue-cli，能够快速搭建一个web项目模板。

4.1 安装

执行命令npm install -g vue-cli

初始化webpackvue init webpack，接下来这样选择

4.2 文件结构分析

src/main.js

项目的入口文件

src/App.vue

文件内容如下

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

*.vue文件叫做单文件组件，每一个.vue文件都是一个独立的vue组件。

里面包含三部分内容

template：模板，支持html语法高亮和提示
script：js脚本，这里编写的就是vue的组件对象，看到上面的data(){}了吧
style：样式，支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用。

package.json

{
  "name": "vue-cli-test",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

可以看到这引入了非常多的依赖，绝大多数都是开发期依赖，比如大量的加载器。
运行时依赖只有vue和vue-router
脚本有三个：
- dev：使用了webpack-dev-server命令，开发时热部署使用
- start：使用了npm run dev命令，与上面的dev效果完全一样
- build：等同于webpack的打包功能，会打包到dist目录下。

执行npm run dev或者 npm start 都可以启动项目。