從零搭建 vue-cli 腳手架

前言：

用了幾回 vue-cli 作 vue 項目，感受沒什麼大問題，雖然也沒有用 vue-router 和 vuex 。可是內心一直有個梗，就是最初的目錄生成和配置文件，一直沒動過，也不知道具體原理。

雖然網上一搜，相似對於目錄結構的大概介紹也很多，如圖：

僅僅到這一步，估計不少人會心有不甘，並且對於傳說中的難以配置的 webpack ，在這裏好像也沒有什麼感受。實際上，經過在 vue-cli 裏寫代碼，還真是沒感受 webpack 的存在感，，，

而且尤雨溪也在文章裏說明：

因此我就從頭配置了下，在閱讀正文前，請確保你有必定的 npm，webpack，vue 基礎，下面開始：

目標：

經過 vue-cli 配置的項目，若是不加 vue-router 和 測試文件，如圖：

那麼生成的項目目錄應該是這樣子的，順帶看下個人 vue-cli 和 webpack 版本：

由於版本的不一樣，安裝的時候，若是有錯或問題，控制檯都會有提示，這個須要隨機應變。

開始：

1. 在父目錄下，新建個文件夾 build-vue-cli-from-zero，切換到 build-vue-cli-from-zero，

npm init

按照提示填寫：

主要是 description 建議填寫下，不然後面一直會提示，這樣項目的第一個文件 package.json 就出現了

2. 安裝相關依賴

webpack vue vue-loader 這個確定是要的：

npm install --save-dev webpack vue vue-loader

 

裝完後，就會發現 package.json 的內容就多了一些

這是 --save-dev 的做用，具體很少說了，目錄下還多了一個文件：package-lock.json 和文件夾：node_modules

可是安裝完，會發現控制檯有警告，這個確定是要看的，一般有版本更新或者插件停用了，都會有警告的：

其餘的警告仔細看沒什麼的，可是這兩個警告就要求咱們還要裝依賴了，那麼繼續裝：

npm install --save-dev css-loader vue-template-compiler

到這裏，控制檯還有警告，可是仔細看都可有可無了：

因此後面若是還有這些警告，均可以忽略了。

3. 創建 src 目錄

一般，咱們的工做都是在 src 這個目錄裏完成的，這裏咱們就仿照 vue-cli 的風格，建立相應的文件和文件夾，固然，這裏不如直接複製過來好了

到這裏，乍一看，好像該有的文件都有了，雖然 lint 和 babel 都沒裝，可是好像也不影響運行，至少能跑起來吧，試試

npm run dev

結果報錯:

由於咱們到目前爲止都沒有配置過 webpack ，並非說裝了就能夠了，重頭戲纔剛剛開始

4. webpack 配置上 - package.json

在項目下新建 config 文件夾，在裏面繼續新建 index.js，目前的項目結構如圖：

從過後的角度來講，這裏的 index.js 放的就是 webpack 的配置，就像是之前不少人在主文件目錄下放的  webpack.config.js 同樣，那麼配置文件有了，確定須要有地方運行這個配置文件，你看前面的報錯：

如今再來告訴你配置在 package.json 裏：

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "cross-env NODE_ENV=development webpack-dev-server --config config/index.js" },

注意，只有 dev 是新加的，test 最初 npm init 的時候就自動生成了，那麼這裏就要解釋下

cross-env NODE_ENV=development webpack-dev-server --config config/index.js

1）首先 cross-env webpack-dev-server 都是依賴，這個後面要安裝；安裝 cross-env 是爲了跨平臺設置環境變量

2）NODE_ENV=development 表示設置 NODE 的環境變量爲開發環境，這個也好理解

3）--config config/index.js 表示配置文件在 config/index.js 目錄下，固然這裏是相對路徑，config 必需要和 package.json 在同一個目錄，不然要根據狀況修改

到這裏，你們應該還想起來了還有個命令 npm run build ，那麼以此類推，完整的 scripts 是這樣：

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "cross-env NODE_ENV=production webpack --config config/index.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config config/index.js" }

先後 build 和 dev 有兩點區別，應該有人注意到了，production 和 development 是區分生產和開發環境；

webpack 和 webpack-dev-server 區別，我以爲是，生產環境下只要打包就好了，而開發環境下須要在 localhost 下測試，因此出現了 dev-server，看名字也很好理解嘛

這個明白就能夠了，那麼裝依賴：

npm install --save-dev cross-env webpack-dev-server

5. webpack 配置下 – index.js

上面只是好了一半，由於 config/index.js 沒有內容嘛，裏面要怎麼寫，看下面：

//依賴

const path = require('path'

) const HTMLPlugin 

= require('html-webpack-plugin')

//用來生成打包後的 html 文件

const webpack = require('webpack'

) const extractPlugin 

= require('extract-text-webpack-plugin')

//將打包後的 css 從文件中抽出來 //判斷開發或生產環境

const isDev = process.env.NODE_ENV === 'development'

//配置文件主體(開發和生產公用的部分)

const config =

 { target: 

'web'

, entry: path.join(__dirname, 

'../src/main.js'

), output: { filename: 

'bundle.[hash:8].js'

, path: path.join(__dirname, 

'../dist/'

) }, module: { //規定文件類型加載的 loader rules: [ { test: 

/\.vue$/

, loader: 

'vue-loader'

 }, { test: 

/\.jsx$/

, loader: 

'babel-loader'

 }, { test: 

/\.(gif|jpg|jpeg|png|svg)$/

, use: [ { loader: 

'url-loader'

, options: { limit: 

1024

, name: 

'[name]-custom.[ext]'

 } } ] } ] }, plugins: [ new webpack.DefinePlugin({ 

'process.env': { NODE_ENV: isDev ? '"development"' : '"production"'

 } }), new HTMLPlugin({ filename: 

'index.html'

 }) ] } if (isDev) { config.mode 

= 'development'

 config.devtool 

= '#cheap-module-eval-source-map'

 config.devServer 

=

 { port: 

'8080'

, host: 

'0.0.0.0',

//相比 localhost ，能夠適用於局域網 overlay: { errors: true }, hot: true//熱加載 } config.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ) config.module.rules.push( { test: 

/\.css$/

, use: [

'style-loader', 'css-loader'

] }, { test: 

/\.less$/

, use: [ 

'style-loader'

, 

'css-loader'

, { loader: 

'postcss-loader'

, options: { sourceMap: true } }, 

'less-loader'

 ] } ) } else { config.mode 

= 'production'

 config.entry 

=

 { app: path.join(__dirname, 

'../src/main.js'

), vendor: [

'vue'

] } config.output.filename 

= '[name].[chunkhash:8].js'

 config.module.rules.push( { test: 

/\.css$/

, use: [

'style-loader', 'css-loader'

] }, { test: 

/\.less$/

, use: extractPlugin.extract({ fallback: 

'style-loader'

, use: [ 

'css-loader'

, { loader: 

'postcss-loader'

, options: { sourceMap: true } }, 

'less-loader'

 ] }) } ) config.plugins.push(new

extractPlugin('styles.[chunkhash:8].css'

)) config.optimization 

=

 { splitChunks: { cacheGroups: { vendor: { name: 

'vendor'

 } } }, runtimeChunk: true } } module.exports 

= config

這些看不懂很正常，可是要大概理解是幹什麼的，不能理解的話， webpack 和相關的 loader 和依賴要補補課了；

根據上面的配置，那麼一個個 loader 和依賴就裝起來吧

npm install --save-dev path html-webpack-plugin extract-text-webpack-plugin@next babel-loader url-loader file-loader less-loader style-loader postcss postcss-loader

上面裝完後，會發現：

那麼繼續：

npm install --save-dev babel-core less

裝了 babel 是爲了將 ES6 編譯成 ES5，天然還要配置下 .babelrc 文件，這個文件要在主目錄下新建：

{ 

"presets": ["env"], "plugins": ["transform-vue-jsx"] }

6. 調試

到這裏，好像該裝的該配置的都完了，那麼咱們試試：

npm run dev

結果:

那麼繼續:

npm install --save-dev webpack-cli

結果：

這個時候再試試 ：

npm run dev

結果：

咱們把 App.vue 和 main.js 打開，給文件加上後綴名 .vue

再試試，npm run dev

根據提示，咱們裝下：

npm install --save-dev babel-plugin-transform-vue-jsx

結果：

再裝下：

npm install --save-dev babel-helper-vue-jsx-merge-props

這個時候，沒有提示了，再試試，npm run dev

那麼跟以前同樣：

npm install --save-dev babel-plugin-syntax-jsx

這個時候，也沒提示了，繼續試試，npm run dev

那麼跟以前同樣，

npm install --save-dev babel-preset-env

這回終於能夠了：

打開：localhost:8080，F12，刷新下頁面

會發現兩個錯誤，且頁面空白

第一個錯誤，考慮下也知道了，打開 main.js，給頁面加上一個 #app 就能夠了

可是上面的方法，解決不了第二個錯誤，按照提示給的方法，要麼換成 render() 函數，要麼用包含編譯器的構建；

這裏用 render() 函數來解決，由於後者我不會，- -，也就是把上面截圖的代碼換成：

const root = document.createElement('div'

) document.body.appendChild(root) new Vue({ render(h) { return h(App) } }).$mount(root)

這個時候，再來 npm run dev，一切正常：

那麼好，咱們再試試，npm run build

一切正常，沒報錯，此時的 dist 和全部文件目錄：

用本地服務器打開，一切正常！

7. 上傳 github，上傳以前，文件夾裏還要放個文件 .gitignore，裏面內容：

.DS_Store
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

這些文件並無什麼用，尤爲是 node_modules，同步上去的話，可能有幾千甚至上萬個文件，不如本身用的時候 npm install 來得方便。

對比：

整體實現了以後，咱們再來和 vue-cli 的文件目錄對比下，左邊是 vue-cli，右邊是本身實現的：

能夠發現如下不一樣：

1. vue-cli 多了 build 目錄

2. vue-cli 的 config 、dist 結構更清楚，分工更明確

3. vue-cli 多了 static 能夠放靜態資源

4. vue-cli 多了 eslint、postcss 、editor的配置文件和 index.html 模板

5. vue-cli 引入組件能夠省略後綴名

以及支持模板預編譯

總結：

1. 與 vue-cli 相比，不足之處仍是很多的，若是要補齊，基本上還要修改配置文件，webpack 和各類 loader 的搭配。

2. 鑑於做者對於 webpack 和 loader 的配置還不夠熟悉，只能作到這裏，後面的配置等我再仔細學了 webpack 和 loader ，再來補齊。

最終的項目地址:  build-vue-cli-from-zero

參考文檔：

Vue.js 目錄結構

新手向：Vue 2.0 的建議學習順序

Vue+Webpack打造todo應用

從搭建vue-腳手架到掌握webpack配置（二.插件與提取)

從零開始搭建一個簡單的基於webpack的vue開發環境

從零開始搭建 webpack + vue + AdminLTE 多頁面腳手架