从零搭建 vue-cli 脚手架
前言：
用了幾次 vue-cli 做 vue 項(xiàng)目，感覺(jué)沒(méi)什么大問(wèn)題，雖然也沒(méi)有用 vue-router 和 vuex 。但是心里一直有個(gè)梗，就是最初的目錄生成和配置文件，一直沒(méi)動(dòng)過(guò)，也不知道具體原理。
雖然網(wǎng)上一搜，類似對(duì)于目錄結(jié)構(gòu)的大概介紹也不少，如圖：
僅僅到這一步，估計(jì)很多人會(huì)心有不甘，而且對(duì)于傳說(shuō)中的難以配置的 webpack ，在這里好像也沒(méi)有什么感覺(jué)。實(shí)際上，通過(guò)在 vue-cli 里寫代碼，還真是沒(méi)感覺(jué) webpack 的存在感，，，
并且尤雨溪也在文章里說(shuō)明：
所以我就從頭配置了下，在閱讀正文前，請(qǐng)確保你有一定的 npm，webpack，vue 基礎(chǔ)，下面開(kāi)始：
目標(biāo)：
通過(guò) vue-cli 配置的項(xiàng)目，如果不加 vue-router 和 測(cè)試文件，如圖：
那么生成的項(xiàng)目目錄應(yīng)該是這樣子的，順帶看下我的 vue-cli 和 webpack 版本：
因?yàn)榘姹镜牟煌?#xff0c;安裝的時(shí)候，如果有錯(cuò)或問(wèn)題，控制臺(tái)都會(huì)有提示，這個(gè)需要隨機(jī)應(yīng)變。
開(kāi)始：
1. 在父目錄下，新建個(gè)文件夾 build-vue-cli-from-zero，切換到 build-vue-cli-from-zero，
npm init按照提示填寫：
主要是 description 建議填寫下，否則后面一直會(huì)提示，這樣項(xiàng)目的第一個(gè)文件 package.json 就出現(xiàn)了
2. 安裝相關(guān)依賴
webpack vue vue-loader 這個(gè)肯定是要的：
npm install --save-dev webpack vue vue-loader?
裝完后，就會(huì)發(fā)現(xiàn) package.json 的內(nèi)容就多了一些
這是 --save-dev 的作用，具體不多說(shuō)了，目錄下還多了一個(gè)文件：package-lock.json 和文件夾：node_modules
但是安裝完，會(huì)發(fā)現(xiàn)控制臺(tái)有警告，這個(gè)肯定是要看的，通常有版本更新或者插件停用了，都會(huì)有警告的：
其他的警告仔細(xì)看沒(méi)什么的，但是這兩個(gè)警告就要求我們還要裝依賴了，那么繼續(xù)裝：
npm install --save-dev css-loader vue-template-compiler到這里，控制臺(tái)還有警告，但是仔細(xì)看都無(wú)關(guān)緊要了：
所以后面如果還有這些警告，都可以忽略了。
3. 建立 src 目錄
通常，我們的工作都是在 src 這個(gè)目錄里完成的，這里我們就仿照 vue-cli 的風(fēng)格，創(chuàng)建相應(yīng)的文件和文件夾，當(dāng)然，這里不如直接復(fù)制過(guò)來(lái)好了
到這里，乍一看，好像該有的文件都有了，雖然 lint 和 babel 都沒(méi)裝，但是好像也不影響運(yùn)行，至少能跑起來(lái)吧，試試
npm run dev結(jié)果報(bào)錯(cuò):
因?yàn)槲覀兊侥壳盀橹苟紱](méi)有配置過(guò) webpack ，并不是說(shuō)裝了就可以了，重頭戲才剛剛開(kāi)始
4. webpack 配置上 - package.json
在項(xiàng)目下新建 config 文件夾，在里面繼續(xù)新建 index.js，目前的項(xiàng)目結(jié)構(gòu)如圖：
從事后的角度來(lái)說(shuō)，這里的 index.js 放的就是 webpack 的配置，就像是以前很多人在主文件目錄下放的? webpack.config.js 一樣，那么配置文件有了，肯定需要有地方運(yùn)行這個(gè)配置文件，你看前面的報(bào)錯(cuò)：
現(xiàn)在再來(lái)告訴你配置在 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 的時(shí)候就自動(dòng)生成了，那么這里就要解釋下
cross-env NODE_ENV=development webpack-dev-server --config config/index.js1）首先 cross-env webpack-dev-server 都是依賴，這個(gè)后面要安裝；安裝 cross-env 是為了跨平臺(tái)設(shè)置環(huán)境變量
2）NODE_ENV=development 表示設(shè)置 NODE 的環(huán)境變量為開(kāi)發(fā)環(huán)境，這個(gè)也好理解
3）--config config/index.js 表示配置文件在 config/index.js 目錄下，當(dāng)然這里是相對(duì)路徑，config 必須要和 package.json 在同一個(gè)目錄，否則要根據(jù)情況修改
到這里，大家應(yīng)該還想起來(lái)了還有個(gè)命令 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 有兩點(diǎn)區(qū)別，應(yīng)該有人注意到了，production 和 development 是區(qū)分生產(chǎn)和開(kāi)發(fā)環(huán)境；
webpack 和 webpack-dev-server 區(qū)別，我覺(jué)得是，生產(chǎn)環(huán)境下只要打包就行了，而開(kāi)發(fā)環(huán)境下需要在 localhost 下測(cè)試，所以出現(xiàn)了 dev-server，看名字也很好理解嘛
這個(gè)明白就可以了，那么裝依賴：
npm install --save-dev cross-env webpack-dev-server5. webpack 配置下 – index.js
上面只是好了一半，因?yàn)?config/index.js 沒(méi)有內(nèi)容嘛，里面要怎么寫，看下面：
//依賴 const path = require('path' ) const HTMLPlugin = require('html-webpack-plugin') //用來(lái)生成打包后的 html 文件 const webpack = require('webpack' ) const extractPlugin = require('extract-text-webpack-plugin') //將打包后的 css 從文件中抽出來(lái) //判斷開(kāi)發(fā)或生產(chǎn)環(huán)境 const isDev = process.env.NODE_ENV === 'development' //配置文件主體(開(kāi)發(fā)和生產(chǎn)公用的部分) const config = {target: 'web' ,entry: path.join(__dirname, '../src/main.js' ),output: {filename: 'bundle.[hash:8].js' ,path: path.join(__dirname, '../dist/' )},module: {//規(guī)定文件類型加載的 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 ，可以適用于局域網(wǎng) 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 和相關(guān)的 loader 和依賴要補(bǔ)補(bǔ)課了；
根據(jù)上面的配置，那么一個(gè)個(gè) loader 和依賴就裝起來(lái)吧
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上面裝完后，會(huì)發(fā)現(xiàn)：
那么繼續(xù)：
npm install --save-dev babel-core less裝了 babel 是為了將 ES6 編譯成 ES5，自然還要配置下 .babelrc 文件，這個(gè)文件要在主目錄下新建：
{ "presets": ["env"], "plugins": ["transform-vue-jsx"] }6. 調(diào)試
到這里，好像該裝的該配置的都完了，那么我們?cè)囋?#xff1a;
npm run dev結(jié)果:
那么繼續(xù):
npm install --save-dev webpack-cli結(jié)果：
這個(gè)時(shí)候再試試 ：
npm run dev結(jié)果：
我們把 App.vue 和 main.js 打開(kāi)，給文件加上后綴名 .vue
再試試，npm run dev
根據(jù)提示，我們裝下：
npm install --save-dev babel-plugin-transform-vue-jsx結(jié)果：
再裝下：
npm install --save-dev babel-helper-vue-jsx-merge-props這個(gè)時(shí)候，沒(méi)有提示了，再試試，npm run dev
那么跟之前一樣：
這個(gè)時(shí)候，也沒(méi)提示了，繼續(xù)試試，npm run dev
那么跟之前一樣，
npm install --save-dev babel-preset-env這回終于可以了：
打開(kāi)：localhost:8080，F12，刷新下頁(yè)面
會(huì)發(fā)現(xiàn)兩個(gè)錯(cuò)誤，且頁(yè)面空白
第一個(gè)錯(cuò)誤，考慮下也知道了，打開(kāi) main.js，給頁(yè)面加上一個(gè) #app 就可以了
但是上面的方法，解決不了第二個(gè)錯(cuò)誤，按照提示給的方法，要么換成 render() 函數(shù)，要么用包含編譯器的構(gòu)建；
這里用 render() 函數(shù)來(lái)解決，因?yàn)楹笳呶也粫?huì)，- -，也就是把上面截圖的代碼換成：
const root = document.createElement('div' ) document.body.appendChild(root) new Vue({render(h) {return h(App)} }).$mount(root)這個(gè)時(shí)候，再來(lái) npm run dev，一切正常：
那么好，我們?cè)僭囋?#xff0c;npm run build
一切正常，沒(méi)報(bào)錯(cuò)，此時(shí)的 dist 和所有文件目錄：
用本地服務(wù)器打開(kāi)，一切正常！
7. 上傳 github，上傳之前，文件夾里還要放個(gè)文件 .gitignore，里面內(nèi)容：
這些文件并沒(méi)有什么用，尤其是 node_modules，同步上去的話，可能有幾千甚至上萬(wàn)個(gè)文件，不如自己用的時(shí)候 npm install 來(lái)得方便。
對(duì)比：
總體實(shí)現(xiàn)了之后，我們?cè)賮?lái)和 vue-cli 的文件目錄對(duì)比下，左邊是 vue-cli，右邊是自己實(shí)現(xiàn)的：
可以發(fā)現(xiàn)以下不同：
1. vue-cli 多了 build 目錄
2. vue-cli 的 config 、dist 結(jié)構(gòu)更清楚，分工更明確
3. vue-cli 多了 static 可以放靜態(tài)資源
4. vue-cli 多了 eslint、postcss 、editor的配置文件和 index.html 模板
5. vue-cli 引入組件可以省略后綴名
以及支持模板預(yù)編譯
總結(jié)：
1. 與 vue-cli 相比，不足之處還是不少的，如果要補(bǔ)齊，基本上還要修改配置文件，webpack 和各種 loader 的搭配。
2. 鑒于作者對(duì)于 webpack 和 loader 的配置還不夠熟悉，只能做到這里，后面的配置等我再仔細(xì)學(xué)了 webpack 和 loader ，再來(lái)補(bǔ)齊。
最終的項(xiàng)目地址:? build-vue-cli-from-zero
參考文檔：
Vue.js 目錄結(jié)構(gòu)
新手向：Vue 2.0 的建議學(xué)習(xí)順序
Vue+Webpack打造todo應(yīng)用
從搭建vue-腳手架到掌握webpack配置（二.插件與提取)
從零開(kāi)始搭建一個(gè)簡(jiǎn)單的基于webpack的vue開(kāi)發(fā)環(huán)境
從零開(kāi)始搭建 webpack + vue + AdminLTE 多頁(yè)面腳手架
轉(zhuǎn)載于:https://www.cnblogs.com/xianshenglu/p/8906175.html
總結(jié)
以上是生活随笔為你收集整理的从零搭建 vue-cli 脚手架的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Scrum 冲刺博客集合
- 下一篇： 查看linux中tcp连接数