Vue-CLI (Vue 腳手架) 介紹
Vue-CLI 是一個專門為單頁面應用快速搭建繁雜的腳手架, 它可以輕松的創(chuàng)建新的應用程序而且可用于自動生成Vue和webpack的項目模板
如果只是簡單的寫幾個 Vue 的 Demo 程序, 那么不需要 Vue-CLI
如果你在開發(fā)大型項目, 那么你需要, 并且必然需要使用 Vue-CLI
-
Vue-CLI 使用前提
- Node.js
- Webpack
安裝 Vue 腳手架
Vue-CLI 的安裝
npm install -g @vue/cli
-
注意:
- 上面安裝的是 Vue-CLI 的最新版本
- 如果想按照 Vue-CLI2 的方式初始化項目時是不可以的
- 如果使用 npm 安裝比較慢的話可以使用 cnpm 進行安裝
cnpm 安裝
由于國內(nèi)直接使用 npm 的官方鏡像時非常慢的, 所以推薦使用淘寶 npm 鏡像
npm install -g cnpm --registry="https://registry.npm.taobao.org"
安裝之后就可以使用 cnpm 命令來安裝模塊了
拉取 2.x 模版 (Vue-CLI 舊版本)
Vue-CLI 3 和舊版本使用了相同的 Vue 命令, 所以 Vue-CLI 2 被覆蓋了, 如果你仍想使用舊版本的 vue init 功能, 你可以全局安裝一個橋接工具:
npm install -g @vue/cli-init
# 'vue init' 的運行效果將會跟 'Vue-CLI@2.x' 相同
Vue-CLI 的使用
Vue-CLI 2
初始化項目
vue init webpack 項目名稱
- Project name: 項目名稱(一般和初始化的項目名稱一致)
- Project description: 項目描述
- Author: 作者(姓名, 郵箱)
- Vue build: 構(gòu)建項目時使用 Runtime-Compiler 還是 Runtime-only
- Install vue-router? 是否安裝 Vue 的路由
-
Use ESLint to lint your code? 是否使用 ESlint 限制代碼規(guī)范
- 如果選擇了 ESLint, 那么需要選擇 ESLint 規(guī)范
- Pick an ESLint preset (Use arrow keys) 選擇規(guī)范
- Set up unit tests: 是否使用單元測試
- Setup e2e tests with Nightwatch? 是否端到端測試, 且安裝 Nightwatch?
-
Should we run
npm installfor you after the project has been created? (recommended): 你準備管理項目時使用 NPM 還是 Yarn 呢?
runtime-compiler 和 runtime-only 的區(qū)別
無論是使用 runtime-compiler 還是使用 runtime-only 只要 (template 或 render函數(shù)) 與 el 一起使用, 都會替換掉 el 掛載的標簽
唯一不同: main.js
此為 runtime-compiler 的 main.js
import Vue from "vue";
import App from "./App";
Vue.config.productionTip = false;
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});
此為 runtime-only 的 main.js
import Vue from "vue";
import App from "./App";
Vue.config.productionTip = false;
new Vue({
el: "#app",
render: h => h(App)
});
-
runtime-compiler 的運行過程
- template -> 解析 -> ast -> 編譯 -> render -> virtual dom -> UI
-
runtime-only 的運行過程
- rander -> virtual dom -> UI
區(qū)別
- runtime-only 性能更高
- runtime-only 文件更小 (比 runtime-compiler 輕 10kb 左右), 因為 template 的解析, ast 編譯都會有相應的代碼
簡單總結(jié)
- 如果在之后的開發(fā)中, 你依然使用 template, 就需要選擇 runtime-compiler
- 如果你之后的開發(fā)中, 使用的是 .vue 文件開發(fā), 那么可以選擇 runtime-only
render 函數(shù)
render: function (createElement) {
// 1. createElement("標簽", {標簽的屬性}, ["內(nèi)容"])
// return createElement("div", { class: "box" }, ["hello world"]);
// 2. createElement(組件)
return createElement(App)
}
.vue 文件里的 template 需不需要解析呢?
- 答案是不需要
- 因為在 .vue 文件中的 template 由 vue-template-compiler 解析成 render 函數(shù)
Vue-CLI 3
Vue-CLI 3 及以上版本號稱"零配置", 它將大部分配置文件都藏在 .git文件夾中, 僅有少部分是需要開發(fā)者自行配置的
初始化項目
vue create my-project
Please pick a preset: 選擇配置(默認配置 || 手動選擇一些特性)
- 如果選擇手動設置 >> Check the features needed for your project: 選擇特性(按空格 選中|取消選中)
- Where do you prefer placing config for Babel, ESLint, etc.?: (將某些配置文件放到獨立的文件中 || 將某些配置放在package.json中)
-
Save this as a preset for future projects?: 是否將剛才的配置保存為將來項目的預置
- 如果選擇 yes
- Save preset as: 保存的名字
- Pick the package manager to use when istalling dependencies: 選擇 NPM 或 Yarn
main.js 變化(最終版本)
new Vue({
render: h => h(App)
}).$mount("#app");
用 $mount("#app") 取締了 el
- el 最終還是會通過$mount()進行掛載
配置 Vue CLI3 的方式
啟動配置服務器: vue ui 指令, 安裝@vue/cli 同時安裝了 vue 和 vue ui
- 運行
vue ui命令 - 在項目根目錄創(chuàng)建文件名為 "vue.config.js", 然后運行
git commit -m '添加一個配置文件'
Vue-CLI 2 和 Vue-CLI 3 的區(qū)別
- Vue-CLI 3 是基于 webpack4 打造, Vue-CLI 2 還是 webpack3
- Vue-CLI 3 的設計原則是“零配置”, 移除的配置文件根目錄下的, build 和 config 等目錄
- Vue-CLI 3 提供了
vue ui命令, 提供了可視化配置, 更加人性化 - Vue-CLI 3 移除了 static 文件夾, 新增了 public 文件夾, 并且 index.html 移動到 public 中
