Vue 學習筆記 (一) -- 初識 VueCli 3

XiaoChen發表於2018-10-11
Vue筆記

簡介

接觸 Vue 已經有一段時間了，之前做專案都是套用自己之前配置好的專案模板，最近突發奇想想要再重新配置一下專案，然而。。。

zengqingdeMacBook-Pro:Vue zengqing$ vue init webpack hello-world

  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.

zengqingdeMacBook-Pro:Vue zengqing$ 

複製程式碼

之前的 vue init 建立命令不能用了有木有，然後想到之前更新了一波腳手架，然後趕緊翻看一下 Vue Cli 官方文件 然後發現畫風已經是變成這個樣子的了

Vue 學習筆記 (一) -- 初識 VueCli 3

原來已經升級到了 3.xx 版本的了，那麼我們就來學習一下 Vue Cli 3 的新東西吧。

新特性

整理收集了一些 Vue Cli 3 的新特性，總結如下：

  • 使用命令的變化
  • 專案結構變化
  • 專案配置選項的變化
  • 支援更多新功能

以上純屬個人觀點，僅供參考。

使用命令的變化

該方面主要體現在建立專案上面，就像剛開始說的那樣 vue init webpack hello-world 已經替換為 vue create hello-world。

官方文件上說 Vue CLI 2 是被 Vue CLI 3 覆蓋的。如果你仍然需要使用舊版本的 vue init 功能還是可以實現的，只需要使用以下命令：

npm install -g @vue/cli-init
# `vue init` 的執行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project
複製程式碼

具體建立專案命令的介紹會放在下一篇文章再聊，此處僅做介紹

專案結構變化

先上 2.x 版本專案結構

.
├── README.md
├── build
│   ├── build-preview.js
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── preview.env.js
│   └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   ├── router
│   ├── style
│   └── utils
└── static
    └── background.mp3
複製程式碼

下面是新版本腳手架生成的專案結構

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    ├── components
    ├── main.js
    ├── router.js
    └── views
複製程式碼

可以看出新版本的腳手架工具生成的專案是極其的簡潔了。

  • 移除了配置檔案目錄，config 和 build 資料夾。
  • 移除了 static 資料夾，新增 public 資料夾，並且 index.html 移動到 public 中。 在 src 資料夾中新增了 views 資料夾，用於分類 檢視元件 和 公共元件。

專案配置選項的變化

想必大家都知道在 2.0 版本的時候，要修改專案配置可以在 build 和 config 目錄下進行修改，然而在 3.0 中這兩個資料夾都已經移除了，那麼新版本的配置應該在哪裡設定呢？其實也很簡單，只需要在專案根目錄下新建一個 vue.config.js 檔案然後在裡面寫專案所需配置就可以了。

具體配置方法會在後續文章中給出

支援更多新功能

在新版本的腳手架中建立專案的時候可以看到新增了對 TypeScript 與 PWA 的支援

更多文章可檢視 我的部落格

相關文章