摘要：先展示一下文件目錄結(jié)構(gòu)先把相關(guān)的依賴給裝好注意一下注釋只是為了解釋?zhuān)谥胁荒軐?xiě)注釋插件加載器預(yù)編譯語(yǔ)法跨平臺(tái)環(huán)境用來(lái)設(shè)置命令行安裝預(yù)編譯語(yǔ)法的配置中的對(duì)象，用于處理目錄的對(duì)象，提高開(kāi)發(fā)效率。

Foreword

之前三篇大致介紹了webpack的用法，正如這個(gè)系列標(biāo)題而言 從webpack 到 vue Component,所以最后一篇文章當(dāng)然是要講 component, 不對(duì)應(yīng)該說(shuō)是結(jié)合使用，所以看官要是對(duì) vue Component不是很了解的話，先去瞅瞅吧 戳我?guī)闳コ虺?/p>

Gabby

vue 官網(wǎng)對(duì)組件的介紹其實(shí)不少了，但是我第一次看 vue單文件組件 的介紹的時(shí)候，一陣不明覺(jué)厲之風(fēng)刮的我找不到北。

全局定義(Global definitions) 強(qiáng)制要求每個(gè) component 中的命名不得重復(fù)

字符串模板(String templates) 缺乏語(yǔ)法高亮，在 HTML 有多行的時(shí)候，需要用到丑陋的

不支持CSS(No CSS support) 意味著當(dāng) HTML 和 JavaScript 組件化時(shí)，CSS 明顯被遺漏

沒(méi)有構(gòu)建步驟(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預(yù)處理器，如 Pug (formerly Jade) 和 Babel

這些缺點(diǎn)就促使了我們要使用 vue 單文件組件了，（看到這里，我心里有股莫名的高興?。。。?/p>

然而，NM-MMP 后面就貼上了簡(jiǎn)單的 demo 圖片(居然還只是圖片)，然后后面就說(shuō) “有了 .vue 組件，我們就進(jìn)入了高級(jí) JavaScript 應(yīng)用領(lǐng)域” 是不是很牛掰終于可以擺脫菜鳥(niǎo)的衣服了，但是，但是，但是，如果你不知道 Modern JavaScript with ES2015/16，不知道打包工具 webpack/Browserify，不知道 Node Package Manager (NPM)，好，很好，非常好，親，你還沒(méi)有準(zhǔn)備好，請(qǐng)去啃一遍這些再來(lái)。。。。。

除了想撞墻我當(dāng)時(shí)沒(méi)有其他想法（幸好只是沒(méi)用過(guò)webpack。。。）

Here we go

先展示一下文件目錄結(jié)構(gòu)：

node_modules

src

main.js

components

app.vue

second.vue

.babelrc

index.html

package.json

webpack.config.js

先把相關(guān)的依賴給裝好(注意一下注釋只是為了解釋?zhuān)趐ackage.json中不能寫(xiě)注釋)

"devDependencies": {
    "babel-core": "^6.0.0", //babel 插件
    "babel-loader": "^6.0.0", //babel-loader 加載器
    "babel-preset-es2015": "^6.0.0", //babel預(yù)編譯es2015/es6語(yǔ)法
    "cross-env": "^3.0.0", //跨平臺(tái)環(huán)境用來(lái)設(shè)置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

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

webpack.config.js

// var webpack = require("webpack")
var path = require("path")
// NodeJS中的Path對(duì)象，用于處理目錄的對(duì)象，提高開(kāi)發(fā)效率。

module.exports = {
  // 入口文件地址，不需要寫(xiě)完，會(huì)自動(dòng)查找
  entry: "./src/main.js",
  output: {
     // 文件地址，使用絕對(duì)路徑形式
    path: path.resolve(__dirname, "./dist"),
    //[name]這里是webpack提供的根據(jù)路口文件自動(dòng)生成的名字
    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
        }
      },
      // 轉(zhuǎn)化ES6的語(yǔ)法
      {
        test: /.js$/,
        loader: "babel-loader",
        exclude: /node_modules/
      },
      //編譯css并自動(dòng)添加css前綴
      { 
        test: /.css$/, 
        loader: "style!css!autoprefixer"
      },
      //圖片加上base64編碼
      {
        test: /.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },
  resolve: {
    // 別名，可以直接使用別名來(lái)代表設(shè)定的路徑以及其他，在這個(gè)項(xiàng)目中沒(méi)用到
    alias: {
      "vue$": "vue/dist/vue.common.js"
    }
  },
   // 服務(wù)器配置相關(guān)
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  // 開(kāi)啟source-map，webpack有多種source-map，在官網(wǎng)文檔可以查到 eval-source-map 不能實(shí)現(xiàn)斷電調(diào)試， source-map 和 cheap-module-source-map 就沒(méi)問(wèn)題
  devtool: "#eval-source-map"
}

src/main.js

//es6語(yǔ)法：
import Vue from "vue"
//外部引入別的庫(kù)都可以用這樣的方式，比如jquery等。。
//引入我們編寫(xiě)的測(cè)試用vue文件。
import App from "./components/app.vue";
                                     
new Vue({
    el:"#app",
    render: h => h(App)
})
//vue 里有關(guān)于 render 的介紹，我大概簡(jiǎn)要介紹一下這里的用途，h 是 vue 生態(tài)系統(tǒng)中作為 createElement 別名的通用慣例 也是 JSX 語(yǔ)法的要求。如果在作用域中 h 失去作用， 在應(yīng)用中會(huì)觸發(fā)報(bào)錯(cuò)。
//render 所創(chuàng)建的 h 函數(shù) 可以直接返回模板中dom元素，相當(dāng)于
render: function(h){
    return h(App)
}
//個(gè)人覺(jué)得由于這里的App 是代表的 app.vue 這個(gè)組件文件，那么文件中的 標(biāo)簽中的 dom 元素將自動(dòng)被拿來(lái)返回，當(dāng)然還包括文件中的data屬性之類(lèi)的

src/components/second.vue

// scoped 讓css只在這文件中生效 lang="scss" 不能寫(xiě)成 sass 打包會(huì)報(bào)錯(cuò)

src/components/app.vue

index.html

    
        
    
    
        

         //這是打包生成的main文件
    

Last step 更改 package.json

// 在 scripts 中加入 dev 之后直接通過(guò) npm運(yùn)行 項(xiàng)目中裝的 webpack-dev-server,而不是使用全局的 webpack-dev-server

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

運(yùn)行(CIL)

npm run dev

ps:

如果想讓他自動(dòng)打開(kāi)默認(rèn)瀏覽器 再 選項(xiàng) "dev" webpack-dev-server 后面加個(gè) --open

--hot 與 --line 區(qū)別

// 不會(huì)刷新瀏覽器
$ webpack-dev-server
//刷新瀏覽器
$ webpack-dev-server --inline
//重新加載改變的部分，HRM(熱替換)失敗則刷新頁(yè)面
$ webpack-dev-server  --inline --hot

Final

打開(kāi)瀏覽器看看效果。這系列文章就全部結(jié)束，最后一篇間隔稍微長(zhǎng)了點(diǎn)，不過(guò)還是沒(méi)夭折~~~

webpack -> vue Component 從入門(mén)到放棄（三）
webpack -> vue Component 從入門(mén)到放棄（二）
webpack -> vue Component 從入門(mén)到放棄（一）
github源代碼