安裝
1、Visual studio code（VS code）
往期博客：https://www.cnblogs.com/technicist/p/12677052.html
2、Node.js與cnpm
往期博客：https://www.cnblogs.com/technicist/p/12683787.html
3、Vue/cli腳手架
往期博客：https://www.cnblogs.com/technicist/p/13373475.html
使用vue -V命令查看版本的時候，很有可能會報錯
報錯解決的往期博客：https://www.cnblogs.com/technicist/p/13293808.html
項目創建
在自己電腦本地磁盤新建一個文件夾，用於保存項目，文件夾命名最好使用英文名稱，
並進入到該文件夾，按住shift鍵不放，右擊選中Windows PowerShell，輸入vue create "項目名“ 命令,如下圖，我創建的項目名為vue2
回車后，進入如下界面，鍵盤上下鍵選擇需要的創建方法，這里選擇manuallyselect features,手動選擇配置的方式，然后回車
回車進入到如下界面，還是鍵盤上下鍵移動選擇需要的項，按 空格鍵可以選中。選項說明如下：
Babel：將ES6 編譯成ES5
TypeScript： 使用TypeScript
Progressive Web App (PWA) Support : 漸進式Web應用程序（PWA）支持
Router 和 Vuex： 路由和狀態管理
CSS Pre-processors： css預編譯
Linter/Formatter： 代碼檢查工具
Unit Testing ： 單元測試
E2E Testing： E2E測試
選擇完成后，按回車
路由使用歷史模式？這種模式充分利用history.pushState API來完成URL跳轉而無須重新加載頁面，這里填 y ，然后回車
使用什么css預編譯器？ 這里選擇Sass/SCSS (with node-sass)
選擇ESLint with error prevention only，回車
ESLint with error prevention only： 只進行報錯提醒
ESLint + Airbnb config： 不嚴謹模式
ESLint + Standard config： 正常模式
ESLint + Prettier： 嚴格模式
Pick additional lint features:代碼檢查方式，選擇Lint on save 保存時檢查，回車
選擇配置信息存放位置：單獨存放或者並入package.json
這里選擇 In dedicated configfiles
是否保存當前預設，下次構建無需再次配置
選擇 n ,回車 ，等待下載
出現如下信息，表示安裝成功
cd 項目名， 進入到項目的根目錄，
運行項目，輸入命令：npm run serve
瀏覽器 訪問：http://localhost:8080/ ，看到如下頁面表示項目創建成功
使用vs code 打開該項目，
vue-cli項目結構如下，其中src文件夾是需要掌握的，其他文件夾了解一下即可。
引入element
elementUI 官網：https://element.eleme.cn/#/zh-CN/component/installation
安裝指令：npm i element-ui -S
在項目main.js中引入element組件庫和element樣式文件
使用element
Vue.use(ElementUI);
注意，添加完成后，要按 ctrl + S 進行保存
在About.vue中添加如下代碼：
<template>
</template>
注意，添加完成后，要按 ctrl + S 進行保存
在命令行輸入： npm run serve 運行程序
在瀏覽器訪問：http://localhost:8080/about
vs code插件安裝
Vetur ：這個插件是 vscode 能優雅寫 Vue 的核心，代碼高亮，語法檢查等
Vue VSCode Snippets ：代碼補全
Element UI VSCode Snippets 、vscode-element-helper、vue-element-snippet、vue-element-sinppets、element UI Snippets： element的代碼提示
安裝插件步驟如下：
解決css屬性在html標簽里面不提示問題
設置 ->搜索prevent->把SnippetsPreventQuickSuggestions勾掉即可
如果是vue頁面，需要把vscode右下角的頁面模式選擇為 html即可