一、環境搭建
1、安裝node環境(版本≥ 8.9)
2、安裝vue-cli3.0
npm install @vue/cli -g
此處省略安裝步驟截圖了,相信各位都已裝好了,下圖為查看版本結果:
二、建項目
1、vue create 搭建新項目
vue create <Project Name> //文件名 不支持駝峰(含大寫字母)
我沒有卸載舊版本的 vue-cli(1.x 或 2.x),所以創建時也會出現vue2.0
2、自定義配置,根據你需要用箭頭上下鍵選擇(按 “空格鍵”選擇/取消選擇,A鍵全選/取消全選,I鍵進行反選)對應功能
3、我沒有卸載舊版本的 vue-cli(1.x 或 2.x),所以創建時需要選擇2.0 還是 3.0
4、是否用history模式來創建路由 —— 我選 Y
Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由(通過調用瀏覽器提供的接口)
最直觀的區別就是在url中 hash 帶了一個很丑的 # 而history是沒有#的
//index.js
const router = new VueRouter({
mode: "history",
routes
});
5、css預處理器(主要為css解決瀏覽器兼容、簡化CSS代碼 等問題) —— 我選 Less
6、ESLint:提供一個插件化的javascript代碼檢測工具,ESLint + Prettier 使用較多 —— 我選 ESLint + Prettier
7、何時檢測 —— 我選 Lint on save
lint on save //在保存時進行檢測
lint and fix on commit //在fix和commit是進行檢查
8、單元測試 —— 我選 Jest
9、如何存放配置 —— 我選 In dedicated config files
10、是否保存本次配置(y:記錄本次配置,然后需要你起個名; n:不記錄本次配置) ——我選N
11、配置完成,開始編譯
12、編譯完成,開始運行
13、運行成功