vue现代化使用方法(一)
目前前端开发已经非常类似GUI开发，前端人员需要了解大量业务逻辑，通过不同的页面交互行为给用户展示不同的界面或者引导用户进行不同的操作，这必然造成前端逻辑的繁重化，如何简单高效的维护开发代码是每个前端开发人员应该思考的问题。
内容整理中，会随时变更
安装
Vue引入到项目中，有两种方法：
- 通过<script>标签引入
- 通过npm方式引入
通过<script>标签引入
Vue当作普通脚本，通过外部js的方式引入到指定页面，这时Vue会被注册成为一个全局变量。
在这种方式中，可以把vue下载到本地，或者使用线上CDN。此外还要注意引入的Vue是开发版本，还是生产版本，两者区别在于生产版本下不会显示友好错误提示，测试环境下建议使用开发版本。
通过npm方式引入
通过npm install vue把vue引入到项目中，再结合webpack或者rollup使用。
通过标签方式引入vue的方法，只适合学习或者做demo用，实际项目中不建议那么做，建议通过npm方式引入vue。
构建一个hello world
本部分会结合webpack构建一个以vue组件为基础的初始项目。
结合webpack构建项目
webpack使用教程，参考webpack使用详解
node使用教程，参考node使用详解
babel使用教程，参考babel使用详解
-
安装node
-
在任意文件夹下创建如下结构的hello-world项目(包含src和dist两个文件夹)
hello-world src containers hello-world index.js index.vue template base-vue.html dist -
在hello-world目录下运行npm init -y，构建项目的package.json
-
安装vue，运行npm install vue --save(Vue是项目的运行时的依赖库，所以使用--save)
-
安装babel，运行npm install --save-dev babel-preset-latest(安装最新的转码规则)，运行npm install --save-dev babel-preset-stage-2(安装处于草案的编码规则,处于草案阶段的编码规则基本可以使用，再有修改也只是进行增量更改)，创建.babelrc文件，把新增的编码规范写入.babelrc文件中
{ "presets": ["es2015","stage-2"] }
安装babel-cli：npm install --save-dev babel-cli，让我们可以使用命令行代码的形式进行转码
-
安装webpack，运行npm install --save-dev webpack
-
安装html-webpack-plugin(支持通过模版生成html文件,简化html文件的创建)，运行npm install --save-dev html-webpack-plugin
-
安装vue-loader(把.vue文件转成js文件)，运行npm install --save-dev vue-loader,安装babel-loader，运行npm install --save-dev babel-loader
-
创建webpack.config.js，内容如下
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { app: './src/containers/hello-world/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ {test: /\.(js|jsx)$/, use: 'babel-loader'}, {test: /\.vue/, use: 'vue-loader'} ] }, plugins: [ new HtmlWebpackPlugin({ title: '这是一个新标题', filename: 'index.html', template: './src/template/base-vue.html' }) ] }; -
在index.js，创建内容如下
import Vue from 'vue'; import app from './index.vue'; new Vue({ el: "#app", render: h => h(app) }); -
在index.vue，创建内容如下
<template> <div class="wrap"> <p>{{info}}</p> </div> </template> <script> export default { data () { return { info: 'Hello world!' } } } </script> -
在package.json中script，添加一个build命令
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./node_modules/.bin/webpack --config webpack.config.js" }, -
在项目所在目录的终端运行npm run build，这时终端一般会报如下错误
Module build failed: Error: Cannot find module 'vue-template-compiler'
原因是我们通过npm install vue安装的版本是运行时版本，不包括编译部分，而我们在index.vue中又使用了template模板的形式，所以会报这个错误，解决办法就是安装这个依赖。运行npm install --save-dev vue-template-compiler，安装成功后，再次运行npm run build项目就可以运行通过，这时在dist目录下就会有两个构建的文件
```
dist
app.js
index.html
```
在浏览器运行dist下index.html，浏览器中就出现我们期望输出的Hello world!
到此，我们就创建了一个比较现代化的项目，里面包含了webpack，babel的一些基础使用，但功能上还差点，我们继续完善。
安装webpack-dev-server
运行npm install --save-dev webpack-dev-server
webpack-dev-server是配合webpack使用，提供实时重新加载的服务器，其内部使用webpack-dev-middleware。
webpack-dev-middleware提供了通过内存快速访问webpack资源的能力，同时有以下优点：
没有文件写入磁盘，在内存中处理文件；
如果在观察模式下更改了文件，页面会停止请求，直到编译完成；
支持热模块重载（HMR）；
package.json中scripts添加webpack-dev-server启动操作
"scripts": {
...
"open": "webpack-dev-server --open"
},
在webpack.config.js添加webpack-dev-server运行参数
module.exports = {
...
devServer: {
contentBase: './dist', // webpack-dev-server服务器启动后的目录
hot: true // 开启热替换
},
...
plugins: [
...
new webpack.HotModuleReplacementPlugin({}) // 启用热更新
]
...
};
在这里，我们使用的是inline模式来自动刷新页面，并通过Nodejs API方式运行inline模式，具备可以参考webpack使用部分介绍
安装npm-run-all
到此我们会发现，我们的项目需要通过两次命令行操作才能正常运行起来：
npm run build
npm run open
使用起来会有些烦琐，这里可以使用npm-run-all把多个npm scripts命令串起来(也可以在npm scripts中通过&符把多个脚本串起来，不过这个看起来不方便)
运行npm install --save-dev npm-run-all
在package.json中的scripts下添加命令
"scripts": {
...
"start": "npm-run-all --parallel build open"
}
在项目目录下，运行npm start，现在我们构建了一个具备热更新和自动重新加载的项目，一切看起来很酷，不过还有一个问题需要解决，我们发现每一次页面文件的改动都会在dist文件下生成相关热更新的文件，大概文件名如：
...hot-update...
网友评论