webpack -> vue Component 從入門到放棄（四）

Foreword

之前三篇大致介紹了webpack的用法，正如這個系列標題而言 從webpack 到 vue Component,所以最後一篇文章當然是要講 component, 不對應該說是結合使用，所以看官要是對 vue Component不是很瞭解的話，先去瞅瞅吧 戳我帶你去瞅瞅

Gabby

vue 官網對元件的介紹其實不少了，但是我第一次看 vue單檔案元件 的介紹的時候，一陣不明覺厲之風颳的我找不到北。

• 全域性定義(Global definitions) 強制要求每個 component 中的命名不得重複

• 字串模板(String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到醜陋的

• 不支援CSS(No CSS support) 意味著當 HTML 和 JavaScript 元件化時，CSS 明顯被遺漏

• 沒有構建步驟(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用前處理器，如 Pug (formerly Jade) 和 Babel

這些缺點就促使了我們要使用 vue 單檔案元件了，（看到這裡，我心裡有股莫名的高興！！！）

然而，NM-MMP 後面就貼上了簡單的 demo 圖片(居然還只是圖片)，然後後面就說 “有了 .vue 元件，我們就進入了高階 JavaScript 應用領域” 是不是很牛掰終於可以擺脫菜鳥的衣服了，但是，但是，但是，如果你不知道 Modern JavaScript with ES2015/16，不知道打包工具 webpack/Browserify，不知道 Node Package Manager (NPM)，好，很好，非常好，親，你還沒有準備好，請去啃一遍這些再來。。。。。

除了想撞牆我當時沒有其他想法（幸好只是沒用過webpack。。。）

Here we go

先展示一下檔案目錄結構：

• node_modules

• src

  • main.js

  • components

    • app.vue

    • second.vue

• .babelrc

• index.html

• package.json

• webpack.config.js

先把相關的依賴給裝好(注意一下注釋只是為了解釋，在package.json中不能寫註釋)

"devDependencies": {
    "babel-core": "^6.0.0", //babel 外掛
    "babel-loader": "^6.0.0", //babel-loader 載入器
    "babel-preset-es2015": "^6.0.0", //babel預編譯es2015/es6語法
    "cross-env": "^3.0.0", //跨平臺環境用來設定NODE-ENV
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "vue": "^2.2.4",
    "vue-loader": "^10.0.0",
    "vue-template-compiler": "^2.1.0",
    "css-loader": "^0.26.2",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }

//命令列（CLI）安裝
cnpm install 

.babelrc

//預編譯es6語法的配置
{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

webpack.config.js

// var webpack = require(`webpack`)
var path = require(`path`)
// NodeJS中的Path物件，用於處理目錄的物件，提高開發效率。

module.exports = {
  // 入口檔案地址，不需要寫完，會自動查詢
  entry: `./src/main.js`,
  output: {
     // 檔案地址，使用絕對路徑形式
    path: path.resolve(__dirname, `./dist`),
    //[name]這裡是webpack提供的根據路口檔案自動生成的名字
    publicPath: `/dist/`,
    filename: `[name].js`
  },
  module: {
    loaders: [
      // 解析.vue檔案
      {
        test: /.vue$/, 
        loader: `vue-loader`,
        options: {
          //解析.vue檔案中樣式表
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            `scss`: `vue-style-loader!css-loader!sass-loader`,
            `sass`: `vue-style-loader!css-loader!sass-loader?indentedSyntax`
          }
          // other vue-loader options go here
        }
      },
      // 轉化ES6的語法
      {
        test: /.js$/,
        loader: `babel-loader`,
        exclude: /node_modules/
      },
      //編譯css並自動新增css字首
      { 
        test: /.css$/, 
        loader: `style!css!autoprefixer`
      },
      //圖片加上base64編碼
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: `file-loader`,
        options: {
          name: `[name].[ext]?[hash]`
        }
      }
    ]
  },
  resolve: {
    // 別名，可以直接使用別名來代表設定的路徑以及其他，在這個專案中沒用到
    alias: {
      `vue$`: `vue/dist/vue.common.js`
    }
  },
   // 伺服器配置相關
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  // 開啟source-map，webpack有多種source-map，在官網文件可以查到 eval-source-map 不能實現斷電除錯， source-map 和 cheap-module-source-map 就沒問題
  devtool: `#eval-source-map`
}

src/main.js

//es6語法：
import Vue from "vue"
//外部引入別的庫都可以用這樣的方式，比如jquery等。。
//引入我們編寫的測試用vue檔案。
import App from `./components/app.vue`;
                                     
new Vue({
    el:`#app`,
    render: h => h(App)
})
//vue 裡有關於 render 的介紹，我大概簡要介紹一下這裡的用途，h 是 vue 生態系統中作為 createElement 別名的通用慣例 也是 JSX 語法的要求。如果在作用域中 h 失去作用， 在應用中會觸發報錯。
//render 所建立的 h 函式 可以直接返回模板中dom元素，相當於
render: function(h){
    return h(App)
}
//個人覺得由於這裡的App 是代表的 app.vue 這個元件檔案，那麼檔案中的 <templete></templete>標籤中的 dom 元素將自動被拿來返回，當然還包括檔案中的data屬性之類的

src/components/second.vue

<script>
    //es6
    export default {
        name:"app",
         //data:function(){}，下面是es6寫法
        data () {
            return {
                msg: `Second Component `
            }
        },
    }
</script>
<template>
    <div>
        <span v-html="msg"></span>
    </div>
</template>
// scoped 讓css只在這檔案中生效 lang=`scss` 不能寫成 sass 打包會報錯
<style lang="scss" scoped>
    div{
        height:100px;
        width: 50%;
        border: solid 1px;
        margin-top: 10px;
    }
</style>

src/components/app.vue

<script>
    //es6
    import second from `./second.vue`;//匯入當前目錄的second.vue
    
    export default {
        name:"app",
         //data:function(){}，下面是es6寫法
        data () {
            return {
                msg: `first Component `
            }
        },
        components:{
        //等價於
        // second: second
            second
        }
    }
</script>
<template>
    <div>
        <div class="first">
            <span>df</span>
            <span v-html="msg"></span>
        </div>
        <second></second>
    </div>
</template>
<style lang="scss" scoped>
    .first{
        height:100px;
        width: 50%;
        border: solid 1px;
    }
</style>

index.html

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app"></div>
         <script src="dist/main.js"></script>//這是打包生成的main檔案
    </body>
</html>

Last step 更改 package.json

// 在 scripts 中加入 dev 之後直接通過 npm執行 專案中裝的 webpack-dev-server,而不是使用全域性的 webpack-dev-server

 "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --progress --color --port 80"
  }

執行(CIL)

npm run dev

ps:

如果想讓他自動開啟預設瀏覽器 再 選項 "dev" webpack-dev-server 後面加個 --open

–hot 與 –line 區別

// 不會重新整理瀏覽器
$ webpack-dev-server
//重新整理瀏覽器
$ webpack-dev-server --inline
//重新載入改變的部分，HRM(熱替換)失敗則重新整理頁面
$ webpack-dev-server  --inline --hot

Final

開啟瀏覽器看看效果。這系列文章就全部結束，最後一篇間隔稍微長了點，不過還是沒夭折~~~

webpack -> vue Component 從入門到放棄（三）
webpack -> vue Component 從入門到放棄（二）
webpack -> vue Component 從入門到放棄（一）
github原始碼