基於Vue-cli 快速搭建專案
Vue-cli可以快速幫助我們建立一個專案,這是官方給我們提供的腳手架。下面我說一下vue-cli的使用方法。
一、準備工作
在使用vue-cli時,首先需要安裝nodejs,npm,其次需全域性安裝vue和vue-cli
1、nodejs和npm安裝方法詳見https://www.cnblogs.com/le220/p/8670349.html
2、npm install -g vue
3、npm install -g vue-cli
二、vue-cli快速搭建專案
安裝完成後,同時在C:\Users\Andminster\AppData\Roaming\npm目錄下為會生成幾個檔案
三、配置環境變數
Vue不是內部或外部命令問題解決
表示系統沒有找到vue.cmd的地址,需要將vue.cmd的地址新增到系統環境變數的path中。
可以全域性搜尋,vue.cmd
右鍵選擇“開啟檔案所在目錄”,將該目錄新增至系統環境變數path中:
電腦——屬性——高階系統設定
四、安裝完成後,建立自己的工作空間,在cmd切換至剛剛建立好的工作空間,如果已經有工作空間,直接切換到工作空間即可。
使用命令建立專案
vue init webpack test
test是專案名稱,這個名字自己隨便取。
命令輸入後,會進入安裝階段,需要使用者輸入一些資訊
1、Project name (vuetest) 專案名稱,可以自己指定,也可直接回車,按照括號中預設名字(注意這裡的名字不能有大寫字母,如果有會報錯Sorry, name can no longer contain capital letters)。
2、Project description (A Vue.js project) 專案描述,也可直接點選回車,使用預設名字
接下來會讓使用者選擇
3、接下來也是選擇題Pick an ESLint preset (Use arrow keys)
4、Standard (https://github.com/feross/standard) 標準
5、AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法,這個github地址說的是JavaScript最合理的方法
6、none (configure it yourself) 這個不用說,自己定義風格
具體選擇哪個因人而異吧 ,我選擇標準風格
7、Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試,我選擇安裝
8、Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ,我選擇安裝
9、完成
五、執行專案
在專案資料夾下執行npm install(安裝依賴包),npm run dev(執行專案)。
在執行專案中如果遇到埠被佔用,找到bulid資料夾下的webpack-dev-server.js修改port即可。