利用vue-cli一鍵搭建Vue集成環境
利用官方的vue-cli腳手架來搭建Vue集成開發環境
在利用vue-cli腳手架搭建vue集成環境之前,我們需要先安裝nodejs的環境。如果在cmd中輸入node --version和npm --version出現如下的版本信息,就說明安裝已經成功了。
1.全局安裝 vue-cli
npm install --global vue-cli
(我這邊是以前就已經安裝好了,所以這邊顯示的是更新)
2.創建一個基於 webpack 模板的新項目(本地文件下面生成項目的):vue init webpack myvue
如果速度特別慢的話,可以考慮用國內阿里的源碼。命令如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org
關於這些選項的含義可以參考這篇博客的內容:https://www.jianshu.com/p/2769efeaa10a
我具體摘抄出來給大家解釋一下:
vue init webpack vuetest
Test是項目名稱,這個名字自己隨便取。
命令輸入後,會進入安裝階段,需要用戶輸入一些信息
Project name (vuetest) 項目名稱,可以自己指定,也可直接回車,按照括弧中默認名字(注意這裡的名字不能有大寫字母,如果有會報錯Sorry, name can no longer contain capital letters),阮一峰老師博客為什麼文件名要小寫 ,可以參考一下。
Project description (A Vue.js project) 項目描述,也可直接點擊回車,使用默認名字
Author (........) 作者,不用說了,你想輸什麼就輸什麼吧
接下來會讓用戶選擇
Runtime + Compiler: recommended for most users 運行加編譯,既然已經說了推薦,就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時,已經有推薦了就選擇第一個了
Install vue-router? (Y/n) 是否安裝vue-router,這是官方的路由,大多數情況下都使用,不過我的第一個項目中的路由是自己寫的,沒有使用到官方路由,因為有特殊需求,也因為比較早,官方尚未成熟,vue-router官網 。這裡就輸入「y」後回車即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼,ESLint是個代碼風格管理工具,是用來統一代碼風格的,並不會影響整體的運行,這也是為了多人協作,新手就不用了,一般項目中都會使用。ESLint官網
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設,編寫vue項目時的代碼風格,因為我選擇了使用ESLint
Standard (https://github.com/feross/standard) 標準,有些看不明白,什麼標準呢,去給提示的standardgithub地址看一下, 原來時js的標準風格
AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法,這個github地址說的是JavaScript最合理的方法
none (configure it yourself) 這個不用說,自己定義風格
具體選擇哪個因人而異吧 ,我選擇標準風格
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試,我選擇安裝
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ,我選擇安裝
3.進入webpack項目中更新工程依賴,因為現在前端項目會有很多依賴:npm install
(這邊需要注意的是:命令框得是由管理員啟動的才可以!!!)
4.運行webpack項目:npm run dev
5.webpack項目打包:npm run build .
TAG:林志強 |