Vue-cli webpack模板

Vue webpack項目開始構建模板使用，關鍵內容摘要

中文文檔 https://loulanyijian.github.io/vue-cli-doc-Chinese/

官方英文 http://vuejs-templates.github.io/webpack/

所有模板 https://github.com/vuejs-templates

0 安裝和使用 vue-cli

$ npm install -g vue-cli # 全局安裝vue-cli
$ vue init webpack my-project # 使用vue-cli初始化一個完整的webpack項目。
$ cd my-project # 進入目錄
$ npm install # 安裝依賴 (package.json)
$ npm run dev # 啟動開發環境版本

使用Vue-cli命令行工具初始化基於模板的項目的命令語法：

$ vue init <template-name> <project-name>

可用 vue list 命令查看所有模板類型

1 項目結構

├── build/                      # webpack 編譯任務配置文件: 開發環境與生產環境
│   └── ...
├── config/                     
│   ├── index.js                # 項目核心配置
│   └── ...
├── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue組件
│   ├── components/             # 組件
│   │   └── ...
│   └── assets/                 # 模塊資源 (會被webpack處理)
│       └── ...
├── static/                     # 純靜態資源 (直接拷貝到dist/static/里面)
├── test/
│   └── unit/                   # 單元測試
│   │   ├── specs/              # 測試規范
│   │   ├── index.js            # 測試入口文件
│   │   └── karma.conf.js       # 測試運行配置文件
│   └── e2e/                    # 端到端測試
│   │   ├── specs/              # 測試規范
│   │   ├── custom-assertions/  # 端到端測試自定義斷言
│   │   ├── runner.js           # 運行測試的腳本
│   │   └── nightwatch.conf.js  # 運行測試的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 編輯配置文件
├── .eslintrc.js                # eslint 配置文件
├── index.html                  # index.html 入口模板文件
└── package.json                # 運行的腳本與相關依賴

build/

包含實際為開發環境與生產環境的webpack配置文件。通常不需要關注這些文件，除非想自定義webpack的loader，這樣的話，你應當先看看 build/webpack.base.conf.js 這個文件。

config/index.js

主要的配置文件，包含構建中最常用的一些配置。

src/

應用程序源碼文件。如何組織目錄結構取決於開發者。如果使用Vuex/VueRouter，可以自行添加store/router目錄。一般結構如下：

├── src/
|   ├── ...
└── store
|   ├── index.js          # where we assemble modules and export the store
|   ├── actions.js        # root actions
|   ├── mutations.js      # root mutations
|   └── modules
|   │   ├── cart.js       # cart module
|   │   └── products.js   # products module
|   └── router/           # 路由
│       └── routes.js

static/

不想通過webpack處理的靜態資源目錄。這些目錄中的資源會在webpack構建的時候，被直接復制到相同的目錄中。

開發中使用的資源文件，在src/assets目錄 。二者的區別：

• assets中的文件會被webpack處理成模塊依賴，這些資源可能會在構建過程中被內聯/復制/重命名；而static/並非由Webpack來處理：它們被直接復制到最終目標目錄。這些文件使用絕對路徑，這個可通過config/index.js文件中的 build.assetsPublicPath 和 build.assetsSubDirectory來控制。

• 任何放置在static/的文件都使用絕對的URL /static/[filename]來引用。

  如果你修改assetSubDirectory 參數成 assets，然后這些URL需要變成/assets/[filename]。

http://vuejs-templates.github.io/webpack/static.html

https://loulanyijian.github.io/vue-cli-doc-Chinese/static.html

test/unit

包含單元測試相關文件。

test/e2e

包含端到端測試相關文件。

index.html

應用中的 模板 index.html。在開發環境中，webpack會生成相關資源，這些資源的url會自動插入到模板來渲染最終的HTML。

package.json

NPM包元數據文件，包括所有的構建依賴與構建命令。

2 構建命令

npm run dev

對應 package.json 中的NPM腳本命令

"scripts": {
    "dev": "node build/dev-server.js",
    //...
}

npm run build`

對應 package.json 中的

"scripts": {
    //...
    "build": "node build/build.js",
    //...
}

3 預處理器

這個模板已經預設大部分流行的 css 預處理器，包括 LESS, SASS, Stylus, 和 PostCSS。要使用一個預處理器的話 ，所有你需要做的就是安裝相應的webpack loader。例如，使用SASS:

npm install sass-loader node-sass --save-dev

你需要安裝node-sass，因為saas-loader需要這個依賴項

在組件中使用

安裝成功后, 你可以通過修改<style>標簽上的lang屬性，在你的*.vue組件中使用預處理器。

<style lang="scss">
/* 寫 SASS 代碼! */
</style>

• lang="scss" 對應CSS超集語法（用大括號和semicolones）。
• lang="sass" 對應縮進語法。

PostCSS

默認的情況下，在*.vue文件中的樣式會被PostCSS處理，所以你不需要用一個特殊的loader來操作它。如果你想用它的話，你可以簡單的在build/webpack.base.conf.js文件中添加PostCSS插件。

使用配置文件

從11.0開始vue-loader支持自動加載postcss-loader支持的PostCss配置文件：

• postcss.config.js
• .postcssrc
• package.json中的postcss 設置

使用配置文件允許您在由postcss-loader處理的常規CSS文件和*.vue文件內部CSS之間共享相同的配置，建議使用配置文件。

內聯選項

或者，可以使用vue-loader的postcss選項專門為*.vue文件指定postcss配置。

// webpack.config.js //for webpack 2.x
module.exports = {
  // other options...
  module: {
    // module.rules is the same as module.loaders in 1.x
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // ... // vue-loader options goes here
          postcss: [require('postcss-cssnext')()]
        }
      }
    ]
  }
}

除了提供一個插件數組外，該postcss選項還接受：

• 返回一個插件數組的函數;

• 包含要傳遞到PostCSS處理器選項的對象。這在使用依賴於自定義解析器/字符串的PostCSS項目時非常有用：

  postcss: {
    plugins: [...], // list of plugins
    options: {
      parser: sugarss // use sugarss parser
    }
  }
  

http://vue-loader.vuejs.org/en/features/postcss.html

獨立的 CSS 文件

為了確保一致的提取和處理，建議在根組件App.vue中引入全局的、獨立的樣式文件，例如：

<!-- App.vue -->
<style src="./styles/global.less" lang="less"></style>

注意，你可能只需要為你自己編寫的應用程序編寫樣式。在那些存在的樣式庫，如Bootstrap 或 Semantic UI，你可以在 /static文件夾中放置他們並且直接在index.html文件中引入。這樣做會避免額外的構建時間，也更好的利用瀏覽器的緩存。(請參考處理靜態資源)

4 環境變量

有時需要根據程序運行環境的不同而有不同的配置值。如

// config/prod.env.js 生產環境
module.exports = {
  NODE_ENV: '"production"',  //字符串變量需要包成單引號和雙引號 '"..."'
  DEBUG_MODE: false,
  API_KEY: '"..."' // 這是所有環境之間共享的
}

// config/dev.env.js  開發環境
module.exports = merge(prodEnv, {  // 繼承自 prod.env .(通過merge)
  NODE_ENV: '"development"',
  DEBUG_MODE: true // 會覆蓋prod.env中的debug_mode值
})

// config/test.env.js  測試環境
module.exports = merge(devEnv, {
  NODE_ENV: '"testing"'
})

用法

在代碼中使用環境變量很簡單。例如:

Vue.config.debug = process.env.DEBUG_MODE