vue學(xué)習(xí)教程之帶你一步步詳細(xì)解析vue-cli

vue-cli

在開發(fā)前，我們要至少通讀一遍vue官方文檔和API(看官方文檔是最重要的，勝過看五十、一百篇博客),英文閱讀能力還行的建議閱讀英文文檔，中文文檔內(nèi)容會(huì)稍落后，還要通讀相關(guān)的vue-router、axios、vuex等。

一般來說我們都是先利用vue-cli來搭建項(xiàng)目基本架構(gòu)。

正文

首先，我們來說一下安裝的東西吧！處于有頭有尾的目的，還是幾句話草草了事。步驟如下：

安裝vue-cli

npm install vue-cli -g

以webpack模版安裝目錄

vue init webapck webpack-template

這樣之后，我們就可以使用IDE打開目錄了。

此處注明我的vue-cli的版本2.9.2，以免之后改版之后，誤導(dǎo)讀者。

之后，附上自己的目錄截圖，并沒有做改動(dòng)，如圖：

首先，第一個(gè)問題，從何看起呢？當(dāng)然，是從webpack.base.conf.js開始看起了。這個(gè)是dev和prod環(huán)境都會(huì)去加載的東西。然后，我們可以先從webpack.base.conf.js中會(huì)被用到的幾個(gè)文件看起。其實(shí)，base中被用到了如下的文件，我們可以從代碼中看出：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

分別是：

path路徑

這個(gè)模塊可以看nodejs官網(wǎng)的介紹，其實(shí)，就是一個(gè)文件路徑的獲取和設(shè)置等模塊，學(xué)習(xí)node的時(shí)候，我們往往會(huì)看到這個(gè)模塊被大量運(yùn)用。

path模塊提供了用于處理文件和目錄路徑的使用工具

utils.js

我們可以到其中去看一下代碼，其實(shí)光從名字上我們可以推斷出，它可能是為整個(gè)腳手架提供方法的。我們可以先來看一下頭部引用的資源文件：

const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

同樣的，它也引用了path模塊和config目錄中的index.js文件，之后的話是一個(gè)npm包——extract-text-webpack-plugin。這個(gè)包的話，是用來分離css和js的內(nèi)容的。后續(xù)我們可以詳細(xì)了解一下。同時(shí)，它還引用的package.json文件，這是一個(gè)json文件，加載過來之后，會(huì)變成一個(gè)對象。

所以，我們需要從它的頭部依賴開始說起：

path模塊我們之前提到過，這里就不細(xì)說。我們可以來分析一下config目錄下的index.js文件。

index.js

這個(gè)文件中，其實(shí)有十分充足的代碼注釋，我們也可以來深入探究一下。

從代碼中，我們可以看到通過module.exports導(dǎo)出了一個(gè)對象，其中包含兩個(gè)設(shè)置dev和build。

在dev中，設(shè)置了一些配置，代碼如下：

modules.exports = {
 dev: { 
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {}, 
 // Various Dev Server settings
 host: 'localhost', // can be overwritten by process.env.HOST
 port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
 autoOpenBrowser: false,
 errorOverlay: true,
 notifyOnErrors: true,
 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 
 // Use Eslint Loader?
 // If true, your code will be linted during bundling and
 // linting errors and warnings will be shown in the console.
 useEslint: true,
 // If true, eslint errors and warnings will also be shown in the error overlay
 // in the browser.
 showEslintErrorsInOverlay: false, 
 /**
 * Source Maps
 */
 
 // https://webpack.js.org/configuration/devtool/#development
 devtool: 'eval-source-map', 
 // If you have problems debugging vue-files in devtools,
 // set this to false - it *may* help
 // https://vue-loader.vuejs.org/en/options.html#cachebusting
 cacheBusting: true, 
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 cssSourceMap: false,
 }
 }

通過它的注釋，我們可以理解它在dev中配置了靜態(tài)路徑、本地服務(wù)器配置項(xiàng)、Eslint、Source Maps等參數(shù)。如果我們需要在開發(fā)中，改動(dòng)靜態(tài)資源文件、服務(wù)器端口等設(shè)置，可以在這個(gè)文件中進(jìn)行修改。

下面還有一個(gè)build的對象，它是在vue本地服務(wù)器啟動(dòng)時(shí)，打包的一些配置， 代碼如下：

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),
 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 /**
 * Source Maps
 */
 productionSourceMap: true,
 // https://webpack.js.org/configuration/devtool/#production
 devtool: '#source-map',
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
 }

其中包括模版文件的修改，打包完目錄之后的一些路徑設(shè)置，gzip壓縮等。明白了這些字段的意思之后，就可以在之后的開發(fā)中，主動(dòng)根據(jù)項(xiàng)目需求，改動(dòng)目錄內(nèi)容。

聊完config下的index.js文件，回到utils.js文件中，我們可以來看幾個(gè)其中的方法，來分析它們分別起到了什么作用。

1、assetsPath方法

接受一個(gè)_path參數(shù)

返回static目錄位置拼接的路徑。

它根據(jù)nodejs的proccess.env.NODE_ENV變量，來判斷當(dāng)前運(yùn)行的環(huán)境。返回不同環(huán)境下面的不同static目錄位置拼接給定的_path參數(shù)。

2、cssLoaders方法

接受一個(gè)options參數(shù)，參數(shù)還有的屬性：sourceMap、usePostCSS。

同時(shí)，這里用到了我們之前提到的extract-text-webpack-plugin插件，來分離出js中的css代碼，然后分別進(jìn)行打包。同時(shí)，它返回一個(gè)對象，其中包含了css預(yù)編譯器(less、sass、stylus)loader生成方法等。如果你的文檔明確只需要一門css語言，那么可以稍微清楚一些語言，同時(shí)可以減少npm包的大小(畢竟這是一個(gè)令人煩躁的東西)。

3、styleLoaders方法

接受的options對象和上面的方法一致。該方法只是根據(jù)cssLoaders中的方法配置，生成不同loaders。然后將其返回。

4、createNotifierCallback方法

此處調(diào)用了一個(gè)模塊，可以在GitHub上找到，它是一個(gè)原生的操作系統(tǒng)上發(fā)送通知的nodeJS模塊。用于返回腳手架錯(cuò)誤的函數(shù)

一共這么四個(gè)函數(shù)方法，在utils中被定義到。

回看到webpack.base.conf.js文件中，我們可以直接跳過config目錄下的index.js文件，之前已經(jīng)分析過了。直接來看一下vue-loader.conf.js下的內(nèi)容。

vue-loader.conf.js

這個(gè)文件中的代碼非常的少，我們可以直接貼上代碼，然后來分析，其中的作用。代碼如下：

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap
module.exports = {
 loaders: utils.cssLoaders({
 sourceMap: sourceMapEnabled,
 extract: isProduction
 }),
 cssSourceMap: sourceMapEnabled,
 cacheBusting: config.dev.cacheBusting,
 transformToRequire: {
 video: ['src', 'poster'],
 source: 'src',
 img: 'src',
 image: 'xlink:href'
 }
}

其中，主要就是根據(jù)NODE_ENV這個(gè)變量，然后分析是否是生產(chǎn)環(huán)境，然后將根據(jù)不同的環(huán)境來加載，不同的環(huán)境，來判斷是否開啟了sourceMap的功能。方便之后在cssLoaders中加上sourceMap功能。然后判斷是否設(shè)置了cacheBusting屬性，它指的是緩存破壞，特別是進(jìn)行sourceMap debug時(shí)，設(shè)置成false是非常有幫助的。最后就是一個(gè)轉(zhuǎn)化請求的內(nèi)容，video、source、img、image等的屬性進(jìn)行配置。

具體的還是需要去了解vue-loader這個(gè)webpack的loader加載器。

分析了這么多，最終回到webpack.base.conf.js文件中

webpack.base.conf.js

其實(shí)的兩個(gè)方法，其中一個(gè)是來合并path路徑的，另一個(gè)是加載Eslint的rules的。

我們直接看后面那個(gè)函數(shù)，createLintingRule方法：

其中，加載了一個(gè)formatter，這個(gè)可以在終端中顯示eslint的規(guī)則錯(cuò)誤，方便開發(fā)者直接找到相應(yīng)的位置，然后修改代碼。

之后的一個(gè)對象，就是webpack的基礎(chǔ)配置信息。我們可以逐一字段進(jìn)行分析：

看完這些，你或許對webapck.base.conf.js中的內(nèi)容有了一些初步的了解。其實(shí)，看懂它還需要你了解webpack這個(gè)非常有用的打包工具。

之后，我們在來回看webpack.dev.conf.js這個(gè)文件

webpack.dev.conf.js

這個(gè)文件中，引用了webapck-merge這npm包，它可以將兩個(gè)配置對象，進(jìn)行合并。代碼如下：

const merge = require('webpack-merge');
const devWebpackConfig = merge(baseWebpackConfig, {
 ...
}

這樣就合并了base中的webpack配置項(xiàng)。之后，我們可以來看一下dev環(huán)境中的新增了那些配置項(xiàng)，它們分別起到了什么作用？

后，還有一個(gè)函數(shù)，確保啟動(dòng)程序時(shí)，如果端口被占用時(shí)，會(huì)通過portfinder來發(fā)布新的端口，然后輸出運(yùn)行的host字符串。

webpack.prod.conf.js

這是打包到生產(chǎn)環(huán)境中，會(huì)被用到的文件。我們可以看到，它相對于之前的webapck.dev.conf.js文件少了一些插件，多了更多的插件。我們也可以和之前一樣，通過它新增的一些東西，來知道它到底干了什么！(此處的新增是相對于webpack.dev.conf.js沒有的內(nèi)容)

這樣，我們的webpack配置文件內(nèi)容基本上就全部看完了。或許，會(huì)有點(diǎn)蒙，還是看官方文檔來的實(shí)在。

最后，還需要分析一個(gè)build.js文件。

build.js

這個(gè)文件是在打包的時(shí)候，會(huì)被用到的。

首先，文件的開頭請求了check-version.js中的函數(shù)，然后確定了一下node和npm的版本。相對于較低版本的node和npm，在打包過程中，會(huì)產(chǎn)生警告。之后，設(shè)置環(huán)境參數(shù)，設(shè)置成生產(chǎn)環(huán)境，之后就是一系列打包的流程。

總結(jié)

本篇文章，主要總結(jié)了一下vue-cli生成的文件中，其中的一些配置參數(shù)和文件大致的作用。有不到位的地方，希望大家可以指正。同時(shí)希望我們共同進(jìn)步，共勉。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com