Vue CLI的使用

安裝Vue腳手架

//預設安裝最新版本
npm install -g @vue/cli
//或者一起安裝腳手架全局伺服器
npm install -g @vue/cli @vue/cli-service-global
           

注意：我這裡安裝的是Vue CLI 4.1.2的版本

如果需要按照Vue CLI2的初始化項目需要拉取2.x模闆。

npm install -g @vue/cli-init
           

• Vue CLI2初始化項目

  vue init webpack my-project  
             

• Vue CLI3/4初始化項目

  vue create my-project
             

Vue CLI2初始化項目流程圖:

課外知識：

• node由C++開發，V8引擎做支撐。是以使用node可以直接運作js代碼，而不是通過浏覽器
• 假如我用了ESlint，但後來不想用了，可以在config檔案夾中index.js，找到useESlint設為false，然後重新編譯即可。

目錄結構:

補充：cli2中static檔案夾原封不動進行打包。cli3中public替換static，并把index.html檔案移到pulick中

npm run dev流程圖

npm run build流程圖

Runtime-Compiler和Runtime-only的差別

Vue程式運作過程

template -> ast(抽象文法樹) -> render -> virtual dom(虛拟dom) -> ul(真實頁面)

components運作的就是template -> ast過程，而render函數不需要這個過程

為什麼不需要這個過程： 因為我們配置.vue檔案封裝處理時安裝過vue-template-compiler，

由它把template解析成js對象進行render渲染。是以最終生成的bundle中不需要compiler編譯

差別：

1. 是以Runtime-only函數性能更高，
2. Runtime-only代碼量更少

render函數的使用

解析render: h => h(App)

render函數中回調過來的h就是vue中的createElement

1. 普通用法

   //createElement('标簽'，{标簽的屬性},['内容'])

   render:function (createElement) {
    	//基本使用
    	return createElement('h2',{class:'box'},['hello vue'])
    	//嵌套用法
    	return createElement('h2',{class:'box'},['hello vue',createElement('button',['按鈕'])])
    }
              

2. 傳入元件對象

   render:function (createElement) {
    	return createElement(cpn)
    }
              

是以render: h => h(App) 傳入的是元件對象

總結：

• 如果在之後的開發中，你依然使用template，就需要選擇Runtime-Compiler
• 如果你之後的開發中，使用的是.vue檔案夾開發，那麼可以選擇Runtime-only。 ps:我們一般用runtime-only

Vue CLI3/4

Vue CLI3/4初始化項目流程圖:

目錄結構

注意：

• $mount('#app')等同于el:'#app'

配置檔案打開方式

cli3的配置檔案打開方式

一、圖形化管理界面

啟動配置伺服器  vue ui
	
1. cd進目前目錄，運作vue ui
2. 進入vue項目管理器導入目前檔案夾
3. 在依賴選項中搜尋依賴進行安裝
           

二、本地檔案查找

進入node-modules/cli-serviver/lib/config檔案夾，一般不通過這種方式

三、建立檔案方式

1. 建立一個vue.config.js
2.在檔案中導出配置 module.exports={}
3.記得在頭部require()插件
           

配置别名

在webpack.config中alias裡設定别名，

如果是CLI3/4則在vue.config.js中配置

注意：配置成功後，如使用src導入前面加波浪符号~

ps：前面的導入和函數别忘記寫

踩坑記錄：

• 配置方式1不行試試配置方式2
• 編譯失敗重新開機編譯器

• 實在不行。内部已設定好@=src，直接用@/views這種方式，擷取src下面的目錄。

  但這種方式不支援import導入檔案，支援src='@/views/xxx.jpg'的導入