hello拆火，大家好们镜！ 最近一直都在做項目模狭，所以沒有及時更新我的文章嚼鹉，請大家多多包涵锚赤！
下面請跟隨我一起學(xué)習(xí)Vue宴树，這里有我在工作中總結(jié)的重要的知識點以及項目中遇到的一些Bug！
一翠霍、安裝node.js
首先需要安裝node環(huán)境
1寒匙、這是node.js最新固定版本下載地址：http://nodejs.cn锄弱；
2会宪、這是多版本的node.js的下載地址：https://blog.csdn.net/s8460049/article/details/52396399
安裝完成后塞帐，可以在該文件夾下打開cmd命令工具輸入node -v和npm -v葵姥，如果能顯示出版本號句携，就說明安裝成功。
二麸澜、安裝node-cli
安裝好了node炊邦，我們可以直接全局安裝vue-cli：
但是使用npm這種安裝方式比較慢，推薦使用國內(nèi)鏡像cnpm來安裝碘菜，所以先設(shè)置cnpm：
如果安裝失敗忍啸，可以使用npm cache clean清理緩存计雌，然后再重新安裝（所有操作都可以使用這種方式清除緩存凿滤，重新安裝）
然后使用cnpm安裝vue-cli和webpack
cnpm install -g vue-cli
最新的vue項目模板中，都帶有webpack插件反番，所以這里可以不安裝webpack
安裝完成后恬口，可以使用vue-V（這里-V大寫）查看是否安裝成功祖能。
D:\nodejs>cnpm install -g vue-cli
Downloading vue-cli to D:\nodejs\node_global\node_modules\vue-cli_tmp
Copying D:\nodejs\node_global\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to D:\nodejs\node_global\node_modules\vue-cli
Installing vue-cli's dependencies to D:\nodejs\node_global\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.16.0@commander
[2/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[3/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[4/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.1@chalk
[5/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[6/20] semver@^5.1.0 installed at node_modules\_semver@5.5.0@semver
[7/20] rimraf@^2.5.0 installed at node_modules\_rimraf@2.6.2@rimraf
[8/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[9/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[10/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[11/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[12/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[14/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[15/20] request@^2.67.0 installed at node_modules\_request@2.87.0@request
[16/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[17/20] async@^2.4.0 installed at node_modules\_async@2.6.1@async
[18/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.0.2@download-git-repo
[19/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.0.11@handlebars
[20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.0.0@inquirer
deprecate metalsmith@2.3.0 ? gray-matter@2.1.1 ? coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2018-07-14): 3 packages (detail see file D:\nodejs\node_global\node_modules\vue-cli\node_modules\.recently_updates.txt)
2018-07-20
→ request@2.87.0 ? extend@~3.0.1(3.0.2) (04:28:11)
2018-07-18
→ request@2.87.0 ? mime-types@~2.1.17(2.1.19) (13:29:59)
2018-07-15
→ request@2.87.0 ? mime-types@2.1.19 ? mime-db@~1.35.0(1.35.0) (23:53:24)
All packages installed (251 packages installed from npm registry, used 18s(network 18s), speed 383.03kB/s, json 235(1.58MB), tarball 5.21MB)
[vue-cli@2.9.6] link D:\nodejs\node_global\vue@ -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue
[vue-cli@2.9.6] link D:\nodejs\node_global\vue-init@ -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
[vue-cli@2.9.6] link D:\nodejs\node_global\vue-list@ -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
D:\nodejs>vue -V
2.9.6
如果提示“無法識別vue”钞螟，有可能是npm版本過低鳞滨，可以使用npm install -g npm來更新版本
三拯啦、生成項目
首先需要在命令行中進入到項目目錄褒链，然后輸入：
vue init webpack Vue-Project
其中webpack是模板名稱甸鸟，可以到vue.js的GitHub上查看很多的模板https://github.com/vuejs-templates抢韭；
Vue-Project是自定義的項目名稱季惯，命令執(zhí)行之后勉抓，會在當(dāng)前目錄生成一個以該名稱命名的項目文件夾
配置完成后，可以看到目錄下多出了一個項目文件夾梳码，里面就是vue-cli創(chuàng)建的一個基于webpack的vue.js項目然后進入項目目錄（cd Vue-Project）隐圾，使用cnpm安裝依賴
cnpm install
然后啟動項目
npm run dev
如果瀏覽器打開之后掰茶，沒有加載出頁面濒蒋，有可能是本地的8080 端口被占用盐碱，需要修改一下配置文件config>index.js
最好將端口號改為不常用的端口，另外我還將build的路徑前綴修改為'./'(原本為'/'),是因為打包之后县好，外部引入js和css文件時，如果路徑以'/'開頭暖混，在本地是無法找到對應(yīng)文件的（服務(wù)器上沒問題）。所以如果需要在本地打開打包后的文件拣播，就得修改文件路徑禀酱。
四牧嫉、打包上線
需要把自己的項目文件放到src文件夾下
項目開發(fā)完成之后剂跟，可以輸入npm run build來進行打包工作
npm run build
打包完成后，會生成dist文件夾酣藻，如果已經(jīng)修改了文件路徑曹洽，可以直接打開本地文件查看
項目上線時送淆，只需要將dist文件夾放到服務(wù)器就行了。
