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

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

安裝

Vue引入到項(xiàng)目中择卦，有兩種方法：

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

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

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

通過npm方式引入

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

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

構(gòu)建一個(gè)hello world

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

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

webpack使用教程逗载，參考webpack使用詳解
node使用教程哆窿，參考node使用詳解
babel使用教程，參考babel使用詳解

1. 安裝node

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

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

3. 在hello-world目錄下運(yùn)行npm init -y厉斟，構(gòu)建項(xiàng)目的package.json

4. 安裝vue挚躯，運(yùn)行npm install vue --save(Vue是項(xiàng)目的運(yùn)行時(shí)的依賴庫，所以使用--save)

5. 安裝babel擦秽，運(yùn)行npm install --save-dev babel-preset-latest(安裝最新的轉(zhuǎn)碼規(guī)則)码荔，運(yùn)行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触幼，運(yùn)行npm install --save-dev webpack

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

8. 安裝vue-loader(把.vue文件轉(zhuǎn)成js文件)，運(yùn)行npm install --save-dev vue-loader,安裝babel-loader域蜗，運(yùn)行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: '這是一個(gè)新標(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，添加一個(gè)build命令

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

13. 在項(xiàng)目所在目錄的終端運(yùn)行npm run build袱蜡，這時(shí)終端一般會(huì)報(bào)如下錯(cuò)誤

    Module build failed: Error: Cannot find module 'vue-template-compiler'
    

原因是我們通過npm install vue安裝的版本是運(yùn)行時(shí)版本丝蹭，不包括編譯部分，而我們?cè)趇ndex.vue中又使用了template模板的形式坪蚁，所以會(huì)報(bào)這個(gè)錯(cuò)誤奔穿，解決辦法就是安裝這個(gè)依賴镜沽。運(yùn)行npm install --save-dev vue-template-compiler，安裝成功后贱田，再次運(yùn)行npm run build項(xiàng)目就可以運(yùn)行通過缅茉，這時(shí)在dist目錄下就會(huì)有兩個(gè)構(gòu)建的文件

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

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

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

安裝webpack-dev-server

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

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

package.json中scripts添加webpack-dev-server啟動(dòng)操作

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

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

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

在這里旅赢，我們使用的是inline模式來自動(dòng)刷新頁面，并通過Nodejs API方式運(yùn)行inline模式惑惶，具備可以參考webpack使用部分介紹

安裝npm-run-all

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

npm run build
npm run open

使用起來會(huì)有些煩瑣，這里可以使用npm-run-all把多個(gè)npm scripts命令串起來(也可以在npm scripts中通過&符把多個(gè)腳本串起來带污，不過這個(gè)看起來不方便)

運(yùn)行npm install --save-dev npm-run-all

在package.json中的scripts下添加命令

"scripts": {
    ...
    "start": "npm-run-all --parallel build open"
 }

在項(xiàng)目目錄下僵控，運(yùn)行npm start，現(xiàn)在我們構(gòu)建了一個(gè)具備熱更新和自動(dòng)重新加載的項(xiàng)目鱼冀，一切看起來很酷报破，不過還有一個(gè)問題需要解決，我們發(fā)現(xiàn)每一次頁面文件的改動(dòng)都會(huì)在dist文件下生成相關(guān)熱更新的文件千绪，大概文件名如：

...hot-update...