一、 搭建環境
- 安裝node.js與git，還有編輯器VSCode
- 檢查node與npm版本，切換公司源或淘寶鏡像
- 全局安裝vue-cli腳手架工具：
npm install –g @vue/cli，（安裝Vue Cli3.x版本才能使用Vue create命令）。如果事先安裝了2.x的話，可以先卸載執行以下命令再重新安裝：npm uninstall –g vue-cli - 檢驗是否安裝成功的方法：檢查vue的版本，輸入命令：
vue –version
二、 創建項目與安裝相關依賴
- 在VSCode打開想要創建項目的文件夾，ctrl+~打開終端，輸入：
Vue create project_name / Vue init webpack ProjectName - 構建完成後依據提示cd和run
- 安裝H-UI/Element UI：
npm i element-ui -S；安裝webpack：npm install webpack --save dev - 打包命令：
npm run build，生成dist文件打包給後臺，項目路徑中要採用相對路徑
三、 創建單文件組件
首先工程目錄/src下創建components文件夾，創建一個單文件組件，格式如app.vue格式，template，script，style。然後在 App.vue 使用組件 ( 因爲index.html 裏面定義了div id=“app” /div所以就以這個組件作爲主入口)，使用組件的步驟如下：
- 引入：在標籤內的第一行寫
import firstcomponent from './component/firstcomponent.vue'
- 註冊：在標籤內的 data 代碼塊後面加上
components: { firstcomponent } // 多組件用逗號分隔
- 使用：在template標籤內內加上firstcomponent標籤
四、 關於目錄結構
Src下（簡寫 @ 例如@/components/HelloWorld）
- 創建文件夾utils作爲工具函數，裏面放置工具函數的js文件。每個函數通過export對外提供
- 創建components放置公用組件
- 搭建路由：首先引入vue-router，新建文件夾router，下設置index.js文件（如果採用vue init命令，可以選擇安裝router，這些文件夾已經生成），裏面配置路由路徑和對應的組件，然後去main.js註冊，上面引入下面註冊，之後運行輸入地址就OK了。（溫馨提示：在配置路由前加一個mode:‘history’,就可以去掉地址欄中的‘#’），如果想製作導航，在APP.vue中增加router-link，to後面寫路由配置的path。
- 待補充