你也許不知道的Vuejs - 工欲善其事必先利其器

時間 2019-11-16

標籤也許不知道 vuejs 工欲善其事必先利其器简体版

原文原文鏈接

by yugasun from yugasun.com/post/you-ma… 本文可全文轉載，但須要保留原做者和出處。javascript

開發環境

既然是實戰，怎離不開項目開發的環境呢？先給你們推薦下個人我的開發環境：css

硬件設備：Mac OSX 編譯器：Visual Studio Code 命令行工具：iTerm2 調試工具：Chrome Dev tool + vue-devtools 版本管理：Githtml

具體工具的操做界面和如何使用，這裏就不展現了。隨便用搜索引擎搜索，就是相關介紹。你們能夠根據我的喜愛，來選擇適合你的開發環境。vue

模塊化開發

前面的文章中使用 Vue，都是直接引入源碼方式來使用，可是實際開發中項目通常很複雜，而且會涉及到不少頁面模板，不可能全部的功能咱們都寫在同一個js文件，而後在經過 script 標籤引入，這樣項目大了會愈來愈不易維護，因此項目須要模塊化開發。java

關於什麼事模塊化，具體如何模塊化構架咱們的項目，推薦閱讀 JavaScript 模塊化入門Ⅰ：理解模塊和 JavaScript 模塊化入門Ⅱ：模塊打包構建。node

當項目代碼多了，咱們的模塊文件愈來愈多，就須要工具來幫助咱們更好的管理和打包這些模塊，讓咱們能更好的關注模塊化開發，而不是這些瑣碎的事情。因而 webpack 相似的工具就應運而生，固然除了 webpack 還有不少相似的工具，他們各有各的優勢，好比：rollup、parcel...。webpack

從此文章全部的實例將用到 webpack 的 3.x 版本工具來結合Vue 完成開發工做。git

初始 webpack

這裏不得不說一下，不少朋友在開發 Vue 項目的時候，一上來就使用 vue-cli 腳手架工具開發項目，雖然能夠很快的構建項目模板，不用關注初始化配置問題。可是我不建議這麼作，由於一上來就是 vuejs + webpack + es6 + babel + eslint... 等各類工具，有人都還不知道他們是什麼，就開始用。出了問題，就不知道如何是好。雖然藉助搜索引擎能夠幫助咱們解決80%的難題，但仍是須要花費大量的精力去搜索查詢，不斷的嘗試，等問題解決了，一天就過去了，得不償失啊。程序員

因此我建議先從學會使用 webpack 開始，一步一步的引入進來，會容易接受一些。畢竟這世界上大多數人都不是天才，要學會跑，得先學會走路。es6

雖然當前社會比較浮躁，可是擁有一顆寧靜的心，腳踏實地，纔是成功之道啊~

好了廢話很少說，直接進入今天的正題，使用 webpack 愉快的進行 Vuejs 項目開發。

在閱讀下面代碼以前，請提早熟悉 nodejs 模塊的使用，包括基本的經過 npm 安裝模塊依賴和如何引入第三方模塊使用，這裏雖然會提到，但不會詳細解釋。

咱們先新建一個項目文件夾，在根目錄下新建 index.html，代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue webpack demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="./build.js"></script>
</body>
</html>
複製代碼

命令行運行 npm init，按照交互提示，填寫項目相關信息（固然都是英文，不懂得直接翻一下就明白了），填寫完成後，項目根目錄下會出現 package.json 文件（關於package.json文件內容具體介紹，能夠閱讀這篇文章：package.json文件）。而後經過 npm 安裝咱們須要的 vue 庫：

# 添加 --save 參數，會將 vue 依賴添加到 package.json 文件中
npm install vue --save
複製代碼

而後新建一個 src 目錄，在 src 目錄下建立一個 app.js 入口文件，代碼以下：

// 模塊化的引入 vue，並將其賦值給 Vue 變量
var Vue = require('vue')

new Vue({
  el: "#app",
  template: "<h1>{{ msg }}</h1>",
  data () {
    return {
      msg: 'Hello Vue.js'
    }
  }
})
複製代碼

固然 require 函數瀏覽器是沒法識別的，這是就須要經過 webpack 幫咱們實現編譯打包工做，轉化爲主流瀏覽器但是別的 ES5 代碼。

先安裝 webpack 包依賴：

# 添加 --save-dev 參數，會將 webpack 開發依賴添加到 package.json 文件中
npm install webpack --save-dev
複製代碼

而後在項目根目錄下建立 webpack.config.js 文件，代碼以下：

module.exports = {
  // 入口文件
  entry: './src/app.js',
  // 編譯輸出文件
  output: {
    filename: 'build.js'
  },
  resolve: {
    alias: {
      // 由於咱們這裏用的是 require 引入方式，因此應該使用vue.common.js/vue.js/vue.min.js
      'vue$': 'vue/dist/vue.common.js'
    }
  }
}
複製代碼

由於上面的 index.html 中引入的是編譯後的 build.js 文件，要看到開發效果，就須要手動運行 webpack 打包命令：

./node_modules/.bin/webpack
複製代碼

這裏若是你想直接運行 webpack，那麼就須要你的電腦全局安裝 webpack，能夠經過運行 npm install webpack -g 命令來全局安裝。

而後你會看到輸出如下結果：

$ webpack
Hash: 8a61c2605578f38f46cd
Version: webpack 3.10.0
Time: 386ms
   Asset    Size  Chunks             Chunk Names
build.js  104 kB       0  [emitted]  main
   [0] (webpack)/buildin/global.js 509 bytes {0} [built]
   [1] ./src/app.js 148 bytes {0} [built]
    + 4 hidden modules
複製代碼

此時根目錄下就會出現 build.js 文件，咱們再經過瀏覽器打開 index.html 文件，熟悉的畫面出現了，Hello Vue.js。

到這裏一個簡單的基於 vue + webpack 的項目就構建完成了，是否是很簡單，火燒眉毛想本身動手試試呢？固然 webpack 的功能遠不止如此更詳細的功能，請閱讀官方文檔，全面的瞭解下 webpack 的強大。

實時從新加載(live reloading)

上面的例子還有個問題，就是每次咱們更新了代碼，就須要從新進行打包編譯，並手動刷新瀏覽器，才能看到咱們更改的效果，實在是太麻煩了。webpack 做者也考慮到了這個問題，因而同時開發了 webpack-dev-server 工具，來幫助咱們實現 live reloading 的功能，也就是當咱們更新代碼時，瀏覽器會實時刷新，呈現更新後的效果。

趕忙用起來~ 先安裝下依賴：

npm install webpack-dev-server --save-dev
複製代碼

而後修改 webpack.config.js 配置文件以下：

module.exports = {
  // 入口文件
  entry: './src/app.js',
  // 編譯輸出文件
  output: {
    filename: 'build.js'
  },
  resolve: {
    alias: {
      // 由於咱們這裏用的是 require 引入方式，因此應該使用vue.common.js/vue.js/vue.min.js
      'vue$': 'vue/dist/vue.common.js'
    }
  },

  // 這裏添加的是有關 webpack-dev-server 的配置
  devServer: {
    // 這裏定義 webpack-dev-server 開啓的web服務的根目錄
    contentBase: './'
  }
}
複製代碼

而後執行命令：

./node_modules/.bin/webpack-dev-server
複製代碼

控制檯會輸出一下內容：

$ ./node_modules/.bin/webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./
Hash: d33155f6797f2c78c448
Version: webpack 3.10.0
Time: 903ms
   Asset    Size  Chunks                    Chunk Names
build.js  627 kB       0  [emitted]  [big]  main
   [0] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js 40 bytes {0} [built]
   [4] (webpack)-dev-server/client?http://localhost:8080 7.91 kB {0} [built]
   ...
  [28] ./node_modules/timers-browserify/main.js 1.9 kB {0} [built]
    + 15 hidden modules
webpack: Compiled successfully.
複製代碼

打開瀏覽器，訪問： http://localhost:8080，此時咱們熟悉的畫面又出現了，O(∩_∩)O~~。咱們再嘗試修改 app.js 中 msg 內容，瀏覽器的內容也會跟着變化，是否是很酷，趕忙動手試試吧。

使用 npm 腳本

針對上面的打包命令 ./node_modules/.bin/webpack 和實時開發命令 ./node_modules/.bin/webpack-dev-server，雖然你能夠很快的在命令行復制粘貼輸入，可是第一次仍是免不了動手輸入。做爲一個懶惰的程序員，怎麼能接受敲擊這麼多多餘的字符呢？正好package.json 文件中 scripts 字段就能夠幫助咱們解決這個煩惱。

先來看下介紹：

scripts 是用來指定運行腳本命令的npm命令行縮寫的，好比 start 指定了運行 npm run start 時，所要執行的相關命令。

好的，既然明白了它的做用，咱們就來嘗試改寫 package.json 文件，修改 scripts 字段爲以下內容：

"scripts": {
  "dev": "webpack-dev-server",
  "build": "webpack"
}
複製代碼

而後，在命令行輸入：

npm run dev
複製代碼

你會發現跟執行 ./node_modules/.bin/webpack-dev-server 是同樣的效果。

注意：這裏在 scripts 中指定 webpack-dev-server 命令是，省去了命令路徑，這是由於，npm 在執行腳本時，會默認優先執行當前目錄下 ./node_modules/.bin/ 中的命令，若是找不到該命令，則會執行全局命令。

同理，執行 npm run build 就是打包輸出咱們想要的 build.js 文件。

CSS預處理器

雖然 css 已經足夠強大，可是在程序員眼裏，它一直是個很麻煩的東西，它沒有變量，也沒有條件語句，只是單純的一行行的描述，寫起來至關麻煩。因而各類 CSS預處理器應運而生，其中我最喜歡的是 SASS，使用 sass 語法編寫咱們的樣式文件，會大大提升咱們的開發效率，使得 css 工程化變得容易了不少。

接下來介紹下，如何集成到咱們的項目中。

對於 webpack 來講 一切皆模塊，全部的文件經過模塊引入的方式造成依賴關係，而對於每一個模塊的引入或預處理，都是經過 loader 來實現了。由於咱們的 sass 語法瀏覽器是沒法識別的，因此在引入時須要使用相關 loader 對其進項預處理，轉化爲相應的 css。雖然 css 瀏覽器能夠識別的，可是 webpack 本質上是一個 javascript 應用程序的靜態模塊打包器，一切文件內容都將處理爲 javascript，而後進行後期的處理。因此這裏除了須要預處理 sass 的 loader，還須要加載 css 的 loader，最後還須要經過 style-loader 來轉化爲經過 js 的方式動態建立 style 標籤到 index.html 中。

知道了這點，咱們就知道要怎麼作了，首先安裝所需的 loader:

# 由於 `sass-loader` 須要依賴 `node-sass`, 因此這裏一併安裝
npm install style-loader css-loader sass-loader node-sass --save-dev
複製代碼

修改 webpack.config.js 配置文件，添加相關 loader 配置：

module.exports = {
  //...
  module: {
    // 這裏用來配置處理不一樣後綴文件所使用的loader
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}
複製代碼

webpack 的 loader 是支持鏈式傳遞的，它可以對資源使用流水線(pipline)式處理，一組鏈式的 loader 將按照相反順序依次處理，這裏的處理流程就是： sass-loader -> css-loader => style-loader

配置好了，咱們如今來測試下，在 src 目錄下建立一個 app.scss 文件，內容以下：

$red: rgb(218, 42, 42);

h1 {
  color: $red;
}
複製代碼

而後在 src/app.js 文件中引入：

require('./app.scss');

var Vue = require('vue');

new Vue({
  el: "#app",
  template: "<h1>{{ msg }}</h1>",
  data () {
    return {
      msg: 'Hello Vue.js'
    }
  }
});
複製代碼

此時再運行 npm run dev，你會發現咱們的 h1 標籤顏色變了。經過審覈元素，能夠發現 index.html 的 head 標籤中新增了一個 style 標籤，內容就是，app.scss 編譯輸出的內容：

h1 {
  color: #da2a2a;
}
複製代碼

若是還不清楚 sass 用法的，建議去看看這篇基礎介紹文檔：SASS用法指南

圖片加載

既然說到了 css 靜態資源，天然免不了對於圖片的加載了。上文說過，在 webpack 中，一切皆模塊，圖片固然也是以模塊的方式引入的。既然是模塊，天然少不了相關引入的 loader，這裏圖片引入咱們使用到的是 url-loader，先安裝下：

npm install url-loader --save-dev
複製代碼

添加 url-loader 配置：

module.exports = {
  // ...
  module: {
    // 這裏用來配置處理不一樣後綴文件所使用的loader
    rules: [
      // ...
      {
        test: /\.(jpe?g|gif|png)$/,
        use: 'url-loader'
      }
    ]
  }
}
複製代碼

而後再 app.js 中引入：

require('./app.scss');

var Vue = require('vue');
var logoSrc =  require('./logo.jpg')

new Vue({
  el: "#app",
  data () {
    return {
      msg: 'Hello Vue.js'
    }
  },
  render (h) {
    return (
      h('div', [
        h('img', {
          domProps: {
            src: logoSrc,
            alt: 'logo',
            className: 'logo'
          }
        }),
        h('h1', this.msg)
      ])
    )
  }
});
複製代碼

這裏咱們用 render 函數來自定義渲染咱們的節點，它含有默認參數 h 就是咱們花式渲染目標元素講到的 createElement 參數的別名而已，這裏爲了書寫簡單。h 函數的第一個參數爲 dom 名稱，第二個參數爲建立時配置對象，經過 domProps 來添加 DOM 相關的屬性值。這裏將咱們引入的 logoSrc 賦值給它的 src 屬性。

而後再從新運行 npm run dev，頁面中就出現了咱們想要的 logo 圖片了。