vue現(xiàn)代化使用方法(一)

目前前端開發(fā)已經(jīng)非常類似GUI開發(fā)，前端人員需要了解大量業(yè)務(wù)邏輯，通過不同的頁面交互行為給用戶展示不同的界面或者引導(dǎo)用戶進(jìn)行不同的操作，這必然造成前端邏輯的繁重化，如何簡單高效的維護(hù)開發(fā)代碼是每個前端開發(fā)人員應(yīng)該思考的問題。
內(nèi)容整理中，會隨時變更

安裝

Vue引入到項目中，有兩種方法：

• 通過<script>標(biāo)簽引入
• 通過npm方式引入

通過<script>標(biāo)簽引入

Vue當(dāng)作普通腳本，通過外部js的方式引入到指定頁面，這時Vue會被注冊成為一個全局變量。
在這種方式中，可以把vue下載到本地，或者使用線上CDN。此外還要注意引入的Vue是開發(fā)版本，還是生產(chǎn)版本，兩者區(qū)別在于生產(chǎn)版本下不會顯示友好錯誤提示，測試環(huán)境下建議使用開發(fā)版本。

通過npm方式引入

通過npm install vue把vue引入到項目中，再結(jié)合webpack或者rollup使用。

通過標(biāo)簽方式引入vue的方法，只適合學(xué)習(xí)或者做demo用，實際項目中不建議那么做，建議通過npm方式引入vue。

構(gòu)建一個hello world

本部分會結(jié)合webpack構(gòu)建一個以vue組件為基礎(chǔ)的初始項目。

結(jié)合webpack構(gòu)建項目

webpack使用教程，參考webpack使用詳解
node使用教程，參考node使用詳解
babel使用教程，參考babel使用詳解

1. 安裝node

2. 在任意文件夾下創(chuàng)建如下結(jié)構(gòu)的hello-world項目(包含src和dist兩個文件夾)

   hello-world
       src
           containers
               hello-world
                   index.js
                   index.vue
           template
               base-vue.html
       dist
   

3. 在hello-world目錄下運行npm init -y，構(gòu)建項目的package.json

4. 安裝vue，運行npm install vue --save(Vue是項目的運行時的依賴庫，所以使用--save)

5. 安裝babel，運行npm install --save-dev babel-preset-latest(安裝最新的轉(zhuǎn)碼規(guī)則)，運行npm install --save-dev babel-preset-stage-2(安裝處于草案的編碼規(guī)則,處于草案階段的編碼規(guī)則基本可以使用，再有修改也只是進(jìn)行增量更改)，創(chuàng)建.babelrc文件，把新增的編碼規(guī)范寫入.babelrc文件中

   {
       "presets": ["es2015","stage-2"]
   }
   

安裝babel-cli：npm install --save-dev babel-cli，讓我們可以使用命令行代碼的形式進(jìn)行轉(zhuǎn)碼

6. 安裝webpack，運行npm install --save-dev webpack

7. 安裝html-webpack-plugin(支持通過模版生成html文件,簡化html文件的創(chuàng)建)，運行npm install --save-dev html-webpack-plugin

8. 安裝vue-loader(把.vue文件轉(zhuǎn)成js文件)，運行npm install --save-dev vue-loader,安裝babel-loader，運行npm install --save-dev babel-loader

9. 創(chuàng)建webpack.config.js，內(nèi)容如下

   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: '這是一個新標(biāo)題',
               filename: 'index.html',
               template: './src/template/base-vue.html'
           })
       ]
   };
   

10. 在index.js，創(chuàng)建內(nèi)容如下

    import Vue from 'vue';
    import app from './index.vue';
    
    new Vue({
        el: "#app",
        render: h => h(app)
    }); 
    

11. 在index.vue，創(chuàng)建內(nèi)容如下

    <template>
        <div class="wrap">
            <p>{{info}}</p>
        </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    info: 'Hello world!'
                }
            }
        }
    </script>   
    

12. 在package.json中script，添加一個build命令

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "./node_modules/.bin/webpack --config webpack.config.js"
    },
    

13. 在項目所在目錄的終端運行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目錄下就會有兩個構(gòu)建的文件

```
dist
    app.js
    index.html
```

在瀏覽器運行dist下index.html，瀏覽器中就出現(xiàn)我們期望輸出的Hello world!

到此，我們就創(chuàng)建了一個比較現(xiàn)代化的項目，里面包含了webpack，babel的一些基礎(chǔ)使用，但功能上還差點，我們繼續(xù)完善。

安裝webpack-dev-server

運行npm install --save-dev webpack-dev-server
webpack-dev-server是配合webpack使用，提供實時重新加載的服務(wù)器，其內(nèi)部使用webpack-dev-middleware。

webpack-dev-middleware提供了通過內(nèi)存快速訪問webpack資源的能力，同時有以下優(yōu)點：
沒有文件寫入磁盤，在內(nèi)存中處理文件；
如果在觀察模式下更改了文件，頁面會停止請求，直到編譯完成；
支持熱模塊重載（HMR）；

package.json中scripts添加webpack-dev-server啟動操作

"scripts": {
    ...
    "open": "webpack-dev-server --open"
  },

在webpack.config.js添加webpack-dev-server運行參數(shù)

module.exports = {
    ...
    devServer: {
        contentBase: './dist', // webpack-dev-server服務(wù)器啟動后的目錄
        hot: true // 開啟熱替換
    },
    ...
    plugins: [
        ...
        new webpack.HotModuleReplacementPlugin({}) // 啟用熱更新
    ]
    ...
};

在這里，我們使用的是inline模式來自動刷新頁面，并通過Nodejs API方式運行inline模式，具備可以參考webpack使用部分介紹

安裝npm-run-all

到此我們會發(fā)現(xiàn)，我們的項目需要通過兩次命令行操作才能正常運行起來：

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，現(xiàn)在我們構(gòu)建了一個具備熱更新和自動重新加載的項目，一切看起來很酷，不過還有一個問題需要解決，我們發(fā)現(xiàn)每一次頁面文件的改動都會在dist文件下生成相關(guān)熱更新的文件，大概文件名如：

...hot-update...