Vue-cli項目的創(chuàng)建
最近在開發(fā)網(wǎng)站，項目運用到了Vue-cli這個腳手架工具左腔，下面記錄一下vue-cli創(chuàng)建項目的一些步驟唧垦，為自己的學(xué)習(xí)做相關(guān)筆記。
vue.png
一翔悠、首先我們需要安裝node.js 這是我們的核心
1.下載 node.js
安裝步驟:一路next安裝好了或者自定義目錄(看個人)
2.安裝好了以后檢查一下是否安裝成功
1. 打開cmd 輸入node -v 是否顯示node版本號
2. 因為安裝成功后也安裝了npm 所以在cmd 輸入 npm -v 是否顯示npm版本號
3. 如下圖安裝成功：
node-npm成功.png
4.一般情況下可能會安裝cnpm鏡像(看個人網(wǎng)速) 打開cmd 安裝全局阿里巴巴鏡像文件 輸入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
5.驗證是否安裝cnpm成功 在cmd 輸入: cnpm -v 顯示的是cnpm 安裝的路徑(如圖git-驗證)
3.一般情況下我們下載Git 安裝
1. 在打開打開Git Bash Here
2. 在Git Bash Here 進行和cmd的輸入业崖，我們將得到相同的結(jié)果野芒，但是Git的功能更為強大 ，代碼倉創(chuàng)建等等
3. 如圖所示：
git-驗證.png
二双炕、接下來進入正題了創(chuàng)建Vue-cli 這里進行兩種創(chuàng)建方式
1. Git(cmd命令行的模式) 創(chuàng)建
1. 打開Git Bash Here 全局安裝輸入：
npm install --global vue-cli
或者是:
cnpm install --global vue-cli
2. 安裝完成后 打開Git Bash Here 查看vue安裝是否正確 輸入：
vue -V
vue-安裝完成驗證.png
3. 一般安裝目錄在npm目錄下
vue-目錄.png
4. 現(xiàn)在我們開始用vue-cli腳手架工具構(gòu)建項目吧
(1).創(chuàng)建一個文件夾如:MyVue/myvue-cli 打開Git Bash Here 輸入：
vue init webpack vuefirstdemo
vue-創(chuàng)建.png
注釋:
(1) 這里創(chuàng)建Vue 的項目有幾種狞悲，常見的是:
webpack 、webpack-simple妇斤、browserify摇锋、browserify-simple、simple等等站超，
一般大型項目主要推薦webpack荸恕，而個人或者是業(yè)務(wù)邏輯并沒有那么復(fù)雜的話推薦使用webpack-simple
(2) vuefirstdemo:-----> 表示的是文件名，也就是項目名
(3) Project name (vuefirstdemo)： ----->項目名稱死相，直接回車融求，按照括號中默認(rèn)名字（注意這里的名字不能有大寫字母，如果有會報錯：
Sorry, name can no longer contain capital letters 應(yīng)將項目名改為小寫(*)
(4) Project description (A Vue.js project)： ---->項目描述(可寫可不寫)算撮，也可直接回車生宛，使用默認(rèn)名字
(5) Author ()： ---->作者,看作者自己，怎么寫,默認(rèn)也可以肮柜。
(6) Runtime + Compiler: recommended for most users 運行加編譯陷舅，既然已經(jīng)說了推薦，選擇即可推薦是：
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
僅運行時审洞，已經(jīng)有推薦了就選擇第一個了
(7) Install vue-router? (Y/n) 是否安裝vue-router莱睁，看項目需求，輸入"y",回車則安裝芒澜，一般情況下都會需要到仰剿。
(8) Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風(fēng)格管理工具痴晦，是用來統(tǒng)一代碼風(fēng)格的,這個是一個好的習(xí)慣酥馍，使用推薦大家使用。
(9) Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預(yù)設(shè)阅酪，編寫vue項目時的代碼風(fēng)格，直接y回車
(10) Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試汁针，這個看自己了
(11) Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 术辐，也是看自己項目，直接回車
查看項目目錄
vue-創(chuàng)建完成.png
5. 接下來分別介紹一下vue-cli項目中文件/目錄主要是干什么用的
(1). build:---->構(gòu)建項目腳本目錄
(2). config:---->構(gòu)建配置目錄：如端口號等
(3). node-modules:---->依賴的node庫文件
(4). src:---->主要源代碼編寫地方施无，
src/assets:----->資源文件辉词，如：css、img猾骡、js等瑞躺，
components:----->自定義組件編寫位置敷搪，
router:----->路由，
App.vue:----->vue 的根組件幢哨，
main.js:----->主函數(shù)入口文件赡勘，
(5). static:----->靜態(tài)文件目錄
(6). test:----->測試文件目錄
(7). .eslintignore和.eslintrc.js:-----> ES語法的配置文件
(8). index.html: ------>入口文件
(9). package.json: ----->項目描述文件
6.接下來我們運行創(chuàng)建的項目
(1) 在該項目下 打開Git Bash Here 直接輸入:
npm install
如果報錯的話，我們可以用
cnpm install
如下圖: <**如果沒安裝cnpm請看上面 【一捞镰、首先我們需要安裝node.js 這是我們的核心】 >
cnpm -install.png
(2) 然后輸入:
cnpm run dev
如下圖說明成功：
cnpm run dev.png
7. 現(xiàn)在可以進行訪問了闸与，打開瀏覽器輸入:http://localhost:8080，
訪問網(wǎng)址.png
(1) 如果無法打開那么則說明是端口被占用了岸售，進入config/index.js文件進行修改端口重新運行
修改端口.png
10. 打包上線: cnpm run build
第一種方式完成
主要要記得幾個命令:
cnpm install --global vue-cli
vue init webpack 項目名<小寫>
cnpm install
cnpm run dev
cnpm run build
2. WebStorm 開發(fā)工具直接創(chuàng)建
1. 打開WebStorm File--->New--->Project 如下圖:
創(chuàng)建項目1.png
2. 選擇Vue.js 如下圖
注意: 當(dāng)然践樱，在這里之前一定要先安裝Node.js 還有Vue-cli 看上面【一、首先我們需要安裝node.js 這是我們的核心】 安裝方式
創(chuàng)建2.png
3. 注意在location里面的項目名一定要是小寫的不然不能通過
4. 我們還可以根據(jù)項目的需要來創(chuàng)建幾種方式如:
webpack 凸丸、webpack-simple拷邢、browserify、browserify-simple屎慢、simple等等 這里我選擇 webpack
然后點擊---->Next
創(chuàng)建3.png
5. Starting Vue CLI... Vue-cli 項目加載中
項目創(chuàng)建加載中4.png
6. 輸入項目名 注意:項目名必須是小寫
輸入項目名5.png
7. 項目說明( 對項目介紹一句話)
項目說明6.png
8. 輸入作者(默認(rèn)即可)我這里輸入“xiaoming”
輸入作者7.png
9. 選擇webpack Vue build 選項 (默認(rèn)即可)
Vue build8.png
10. 是否安裝路由 Vue-router (默認(rèn)安裝)
路由-router9.png
11. 是否安裝ESLint 編碼方式
ESLint編碼10.png
12. 選擇ESLint 方式(默認(rèn)即可)
ESLint-標(biāo)準(zhǔn)方式11.png
13. 是否安裝test(默認(rèn)安裝吧)
測試-test12.png
14. 選擇Pick a test runner 方式（默認(rèn)即可）
15. 是否安裝Nightwatch E2E 測試方式（默認(rèn)即可）
安裝E2E14.png
16. 選擇項目創(chuàng)建方式npm
創(chuàng)建成功15.png
17. 項目創(chuàng)建成功
項目創(chuàng)建成功16.png
- 接下來我們?nèi)绾芜\行Webstorm里創(chuàng)建的項目呢篷店？
1. 打開Webstorm Terminal
直接輸入：
cnpm install
cnpm run dev
打包發(fā)布：
cnpm run build
訪問網(wǎng)址:http://localhost:8080
cnpm install.png
cnpm run dev.png
2. 在Webstorm 配置運行環(huán)境
配置運行1.png
配置運行2.png
運行成功3.png
3. 運行頁面顯示 訪問網(wǎng)址:http://localhost:8080
訪問網(wǎng)址.png
三谨胞、總結(jié)
創(chuàng)建Vue-cli項目到此結(jié)束了，希望對大家有所幫助！Ｏ读蕖！
- 主要在開發(fā)過程中不斷的提高自我
- 接下來就是在開發(fā)過程中分享一些坑和知識
- 主要是一些常用的命令一定要記住
查看最新版本 Vue-cli3項目創(chuàng)建
