Vue CLI

創(chuàng)建Vue CLI項目

【步驟】

1. 命名項目空間：在電腦里創(chuàng)建文件夾，用于存儲所有項目；
2. 定位項目空間：在"CMD窗口"里定位到工程的項目空間上；
   • 方法1：(a)用"WIN+R"打開運行窗口，輸入"CMD"進入"CMD窗口"；(b)輸入項目空間所在盤符(如"f:")后回車；?輸入"cd 根目錄路徑(可拖拽文件夾到CMD窗口)"后按"enter"鍵即可；
   • 方法2：(a)打開項目空間所在文件夾；(b)"ALT+D"輸入"CMD"后按"enter"鍵即可；
3. 創(chuàng)建項目第一步：在"CMD窗口"輸入"vue create 項目名稱"后按"enter"鍵后等待跳轉(zhuǎn)即可(像是卡住了,是在加載,一定不要多次按空格)；
4. 創(chuàng)建項目第二步：用"↑"鍵和"↓"鍵進行選擇，選擇選項(“Manually select features”)后按"enter"鍵進入下一頁面；
5. 創(chuàng)建項目第三步：用"↑"鍵和"↓"鍵選擇，"space"鍵修改，選"Babel"、"Router"、"Vuex"后按"enter"鍵進入下一頁面；
6. 創(chuàng)建項目第四步：選"2.x"后按下回車，出現(xiàn)"(Y/n)"繼續(xù)按"enter"鍵進入下一頁面；
7. 創(chuàng)建項目第五步：出現(xiàn)"？Where do you prefer placing config for Babel,ESLint,etc.?(Use arrow keys)"(翻譯：你要將文件放到哪里?)，選擇第二項("In package.json")后按"enter"鍵，出現(xiàn)"(y/N)"，繼續(xù)按"enter"鍵即可；
8. 加載相關(guān)的文件：此時會自動加載相關(guān)文件，加載完畢后出現(xiàn)"Successfully created project 項目名稱."則表示項目創(chuàng)建成功；

【注意】

1. 相關(guān)的文件最好不要有中文和空格；
2. 出現(xiàn)"error"相關(guān)，關(guān)掉重來試試；

啟動Vue CLI項目

【步驟】

1. 用軟件"IDEA"打開 "node.js"創(chuàng)建好的項目；
2. 在軟件左下角找到"Terminal"選項卡并打開；

• 若定位是在項目的根目錄上則進行下一步；
• 若沒定位在項目的根目錄上定位后下一步；

1. 輸入"npm run serve"后回車，等待加載即可；
2. "Compiled successfully in XXXms"代表成功；

【說明】

1. 啟動Vue ClI項目也可通過"CMD窗口"這樣的方式來完成；
2. 啟動成功的提示還包括"http://localhost:8080"這樣的網(wǎng)址；
3. 在CMD 窗口中，按下"Ctrl + C" 即可停止已啟動的項目；

解析Vue CLI項目

文件夾：.idea

【說明】：軟件"IDEA"管理項目時自動生成的，可以無視；

文件夾：node_modules

【說明】：當前項目所需的依賴項(自己不要操作)；

【注意】：

1. 此文件夾不會提交到git，若需要的話用以下方式下載；
2. 若沒有\(zhòng)缺失，可以在"Terminal"輸入"npm install"來下載；

文件夾：public

【說明】：

1. 是當前項目啟動后的根路徑，可存放各種資源（如.css、.js、.jpeg）；
2. 若此文件夾下有"1.jpg"，則可通過"http://loaclhost:8080/1.jpg"查看；

文件：favicon.ico

【說明】：項目的圖標，每個項目在(編譯后的)根目錄下有此文件，會在瀏覽器中顯示；

文件：index.html

【說明】：當前項目的頁面，在"Vue CLI"項目中有且僅有一個"HTML頁面"；

文件夾：src

文件夾：assets

【說明】：資源文件夾，用于存放靜態(tài)資源(如 .css、.js、jpeg)

【注釋】：反正就是存放不隨程序運行而變化的文件(如：logo.png)；

文件夾：components

【說明】：存放視圖組件(被其他視圖組件調(diào)用的)，是可能被復(fù)用的組件，并且在不同的調(diào)用中，傳入的參數(shù)可以不同；

文件夾：router

文件：index.js

【說明】：路由配置文件，主要配置訪問路徑與視圖組件的對應(yīng)關(guān)系；

文件夾：store

文件：index.js

【說明】：存儲共享的量的文件；

文件夾：views

【說明】：用于存放視圖組件；

文件：APP.vue

【說明】：是"index.html"默認加載的視圖文件；

文件：main.js

【說明】：當前項目的主".js"文件，通常用于管理一些配置；

【注釋】：如：添加了某些依賴項(如:Element UI)后，可能需要在此處導入，才可以使得各".vue"文件可以使用這些依賴項；

文件：.gitignore

【說明】：用于配置哪些文件和文件夾不會提交到"git"，如果此項目不提交到"git"，則此文件沒用；

文件：babel.config.js

【說明】："Babel"的配置文件，通常不用關(guān)心(不需要操作)；

文件：jsconfig.json

【說明】：".js"文件的配置文件，通常不用關(guān)心(不需要操作)；

文件：LICENSE

【說明】：許可證協(xié)議文件，默認的項目中通常沒有此文件，在"git"上公開的項目通常都包含此文件；

文件：pakcage.json

【說明】：主要配置當前項目的依賴項和項目的編譯打包等配置，通常不建議手動修改；

文件：package-lock.json

【說明】：自動管理的配置文件，通常不建議手動修改；

文件：README.md

【說明】：此項目的說明文件，如果此項目提交到"git"，通常會顯示在"git"的此項目的主頁；

【注釋】：通常應(yīng)該在此文件中對項目進行必要的描述(如何配置此項目、如何啟動此項目、相關(guān)的注意事項等)；

文件：vue.config.js

【說明】：".vue"文件的配置文件，通常不用關(guān)心(不要操作)；

使用Vue CLI項目

.vue文件相關(guān)

【說明】：

1. .vue文件的源代碼可以由3大部分組成：(a).頁面設(shè)計<template>；(b).樣式<style>；?.腳本<script>；
2. 這3大部分并不都是必須的，例如某個.vue沒有<script>也是完全正常的；

【<template>】：

1. 其直接子標簽必須有且僅有一個；
2. 在其子級里如果出現(xiàn)了<router-view/>，表示此區(qū)域?qū)⒂闪硪粋€視圖文件來負責設(shè)計；
3. 至于是哪個視圖，取決于"router/index.js"中的路由配置；

關(guān)于路由的簡單配置

【說明】：

1. router下的index.js文件是用于配置路由的，在此文件中有一個"routes"常量，其屬性值是一個對象的數(shù)組；
2. 數(shù)組元素中，可以有三個屬性：
   • path：路徑（不可重復(fù)）；
   • name：自定義名稱，此屬性可不配置；
   • component：路徑對應(yīng)的視圖組件(某個.vue文件加載得到的對象)，有兩種加載方式：1.在當前文件的起始位置通過"import"語法靜態(tài)導入(默認導入)；2.在此"component"屬性值位置使用箭頭函數(shù)結(jié)合"import"函數(shù)進行導入；
3. 當顯示的視圖組件中使用到了<router-view />時，將根據(jù)當前訪問的URL（瀏覽器中的路徑）來決定顯示哪個視圖；

【例子】：

import HomeView from '../views/HomeView.vue'const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue')}]

Vue CLI的嵌套路由

【場景】：在開發(fā)實踐中，一個項目中，可能存在這樣的情況：

1. 部分頁面完全沒有共用的部分，所以，在App.vue中，要僅保留一個<router-view/>標簽；
2. 但仍有部分頁面存在共用的部分，所以，在其它.vue文件中，也可能需要再次使用到<router-view />；
3. 具體表現(xiàn)為在App.vue中只有<router-view/>，則此處實際顯示的就是另外某個.vue了，但是在這些其他的.vue中也會用到<router-view/>，即出現(xiàn)了“嵌套”；

配置相關(guān)文件

【步驟】：

1. 打開CMD/終端窗口并且定位到當前項目的文件夾；
2. 輸入"npm i 需要的配置 -S"按下回車 , 靜待即可；
3. 出現(xiàn)"added ‘數(shù)字’ packages in '數(shù)字’s"表示成功；

Element UI

【1】安裝Element UI

npm i element-ui -S

【2】配置Element UI

位置："src/main.js"；

內(nèi)容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

【3】檢查Element UI

說明：

1. 在"package.json"文件中查看是否有相關(guān)依賴("'element-ui':'^2.15.9")；
2. 若有，但不能用，則刪掉"node_modules"，重新下載即可；

Axios

【1】安裝Axios

npm i axios -S

【2】配置Axios

位置："src/main.js"；

內(nèi)容：

import axios from 'axios'
Vue.prototype.axios = axios

說明：

1. 需要注意，目標服務(wù)器可能是禁止跨域訪問的（錯誤提示中有CORS字樣），在Spring Boot工程中，可以使得啟動項目的類實現(xiàn)WebMvcConfigurer接口；