16. 使用vue3結構及配置管理
主要內容:
- vue-cli2和3的區別
- 創建vue-cli3腳手架
- vue-cli3項目的目錄結構
- vue-cli2和vue-cli3中 main.js文件的區別
- vue-cli3的配置文件管理
一. vue-cli2和vue-cli3的區別
- vue-cli3 是基於webpack4的, vue-cli2是基於webpack3
- vue-cli3的設計原則是”0配置”, 移除了配置文件根目錄下build和config等目錄
- vue-cli3 提供了vue ui命令, 進行可視化配置, 操作更方便
- 替換了static文件夾為public文件夾, 並且index.html移動到public文件夾中
二. 創建vue-cli3腳手架
之前創建了vue-cli2的腳手架, 這次來創建vue-cli3的.
創建項目的命令:
vue create 項目名稱
1. please pick a preset: 請選擇一個配置
三選一, 我們來看看這個配置的含義:
- defalut (babel, eslint)
默認配置, 默認配置安裝了es6轉es5,eslint程式碼格式化工具
- Manually select feature: 手動選擇特性
通常, 如果我們需要指定哪些插件安裝,哪些不安裝, 就可以選擇手動
- 按空格鍵, 選中/取消選中
- 按上下箭頭, 上下選擇
- 取消Linter, 我們不使用格式啊校驗.
某些配置是單獨放在在一個配置文案
2. Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys): 配置文件放在那裡呢?
- In dedicated config files:獨立文件
- In package.json : 放到package.json中
通常我們都選擇獨立的配置文件, 方便管理
3. Save this as a preset for future projects? (y/N) 是否將剛剛的配置保存到項目中?
如果選擇是: 下次在配置選項的時候, 除了default,manually,還會多一個我們保存的項目配置.
- Y: 如果以後搭建項目都希望是這個配置就選擇y
- N: 不希望保存配置
下次在創建項目的時候, 我們就可以自動選擇之前保存的項目特徵
如果我們設置了很多自定義配置,如何取消呢?
在/Users/用戶名/.vuerc, 修改這個文件
{
"useTaobaoRegistry": false,
"presets": {
"mySet": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {}
},
"vueVersion": "2"
}
}
}
裡面有個選項是presets. 下面就是我們保存的設置.設置名稱是mySet.這個配置只安裝一個插件:@vue/cli-plugin-babel
4. Save preset as: 保存上面的配置的文件名是什麼?
三. vue-cli3項目的目錄結構
下面來對比看一下vue-cli2 和vue-cli3的項目結構的區別
可以看到vue-cli3的項目結構簡潔了很多
- build和config配置文件都沒有了
- static換成了public文件夾.
下面我們來看一下vue-cli3項目中各個文件的含義
1. node_modules: npm構建的組件都在這個文件夾裡面
2. public: 裡面存放公共資源. 目前有index.html和
3. src: 存放源程式碼
4. .browserslitstrc: 瀏覽器適配配置
> 1%
last 2 versions
not dead
適配市場份額大於1%的最後兩個版本, 不適配已經過期的版本
5. gitignore: 忽略文件
node_modules
/dist
重點看這個, 忽略node_modules文件和/dist構建後的文件. 通過運行npm run serve就可以生成這兩個文件了
6. babel.config.js: babel插件設置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
通常, 不修改這個文件的內容
7. package.json: npm配置文件
{
"name": "03-vuecli3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"
}
}
這個比vue-cli2的devDependencies配置文件少了很多. 而多了一個下面這個配置:
"@vue/cli-service": "~4.5.0",
這個配置的作用是: 管理dev環境的依賴. vue-cli3使用這個配置以後, 簡化了配置文件.
8. package-lock.json: 真實使用的插件的版本號.
在package.json配置文件中, 我們會使用~或者^來模糊匹配版本號, 而這個文件里就是精確指明使用的詳細版本號了
四.vue-cli2和vue-cli3中 main.js文件的區別
來看下面的圖片, 對比二者的區別:
Vue.config.productionTip = false
這句話的意思是: 是否列印項目啟動的詳細提示資訊. false: 不列印. true: 列印
不同的地方在這裡
vue-cli2
new Vue({
el: '#app',
render: h => h(App)
})
vue-cli3
new Vue({
render: h => h(App),
}).$mount('#app')
其實這兩種寫法是一個意思. el:’#app’,vue在解析的時候, 會去執行$mount(“#app”).
五. vue-cli3的配置文件管理
vue-cli3為了項目結構簡單， 去掉了config和build文件夾。 但是這些文件夾實際上都是需要的。 加入我們想要修改配置文件， 要如何修改呢？有三種方法：
方法一：使用vue UI配置介面修改
首先， 我們安裝vue UI介面管理。 這是一個全局的命令
vue ui
安裝好以後， 如下所示：
然後打開介面
在這我們可以導入項目, 創建項目.
我們導入剛剛創建的vuecli3項目, 導入成功後看到如下介面:
頁面左側有菜單, 分別看:
a.插件
在這裡可以看到我們安裝的全部插件, 還可以點擊添加插件按鈕,安裝新插件. 這些插件可以在package.json配置文件中找到
{
"name": "03-vuecli3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"vue-template-compiler": "^2.6.11"
}
}
在devDependencies選項中有三個插件, 而我們的vue ui中只有兩個, 另一個在<依賴>裡面,一會就可以看到了.
b.依賴
可以看到目前這個項目依賴core-js和vue. 其中vue的版本是2.6.12
同時依賴了vue-template-compiler, 版本也是2.6.12, 通常vue和vue-template-compiler的版本是一樣的. 如果不一樣, 可能編譯會報錯.
c.配置
這裡面就有我們之前在webpack.config.js中定義的輸入路徑,輸出路徑, 公共路徑等. 如果需要修改, 可以直接修改這裡
d.任務
我們之前啟動服務都是使用命令, vue3也可以在ui介面進行啟動
點擊運行按鈕, 即可啟動.並且可以監控啟動狀態等.
方法二：在node_module模組中查看配置
雖然vue-cli3簡化了配置, 但是這些配置還是得有, 只是對用戶來說, 隱藏了. 那麼這個配置隱藏在哪裡了呢?在node_module中@vue目錄下.
在@vue目錄下, 找到cli-service目錄, 現在vue的配置都交給了cli-service來管理. 在cli-service目錄下, 有一個webpack.config.js.這個就是webpack的配置.
// this file is for cases where we need to access the
// webpack config as a file when using CLI commands.
let service = process.VUE_CLI_SERVICE
if (!service || process.env.VUE_CLI_API_MODE) {
const Service = require('./lib/Service')
service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
service.init(process.env.VUE_CLI_MODE || process.env.NODE_ENV)
}
module.exports = service.resolveWebpackConfig()
我們看到它引入了lib目錄下的Service.js配置文件, 這裡面有引入了很多包.
這裡就有base基礎配置, dev開發環境配置,prod生成環境配置等.
方法三： 自定義需要修改的配置文件
如果我們想要修改默認配置, 需要在根目錄下新建一個文件vue.config.js. 這個文件名是固定的, 不可修改.
然後將自定義的內容寫到module.exports裡面
module.exports= {
}
