16. 使用vue3結構及配置管理

主要內容:

1. vue-cli2和3的區別
2. 建立vue-cli3腳手架
3. vue-cli3項目的目錄結構
4. vue-cli2和vue-cli3中 main.js文件的區別
5. 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: 請選擇一個配置

三選一, 咱們來看看這個配置的含義:

1. defalut (babel, eslint)
   默認配置, 默認配置安裝了es6轉es5,eslint代碼格式化工具

2. 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= {
    
}