前言：

用了幾次 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 多頁面腳手架

轉載于:https://www.cnblogs.com/xianshenglu/p/8906175.html

總結

以上是生活随笔為你收集整理的从零搭建 vue-cli 脚手架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。