Vue搭建及打包

1、安裝node.js
首先須要安裝node環境
一、這是node.js最新固定版本下載地址：http://nodejs.cn；
二、這是多版本的node.js的下載地址：http://www.javashuo.com/article/p-tfjsrggr-ca.html
安裝完成後，能夠在該文件夾下打開cmd命令工具輸入node -v和npm -v，若是能顯示出版本號，就說明安裝成功。

 

node、npm安裝完成.png

 

2、安裝node-cli
安裝好了node，咱們能夠直接全局安裝vue-cli：

 

vue-cli安裝命令.png

 

npm安裝vue-cli.png

可是使用npm這種安裝方式比較慢，推薦使用國內鏡像cnpm來安裝，因此先設置cnpm：

 

全局cnpm安裝命令.png

若是安裝失敗，可使用npm cache clean清理緩存，而後再從新安裝（全部操做均可以使用這種方式清除緩存，從新安裝）

 

cnpm安裝成功.png

而後使用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來更新版本
3、生成項目
首先須要在命令行中進入到項目目錄，而後輸入：

vue init webpack Vue-Project

其中webpack是模板名稱，能夠到vue.js的GitHub上查看不少的模板https://github.com/vuejs-templates；
Vue-Project是自定義的項目名稱，命令執行以後，會在當前目錄生成一個以該名稱命名的項目文件夾

 

項目文件夾.png

配置完成後，能夠看到目錄下多出了一個項目文件夾，裏面就是vue-cli建立的一個基於webpack的vue.js項目而後進入項目目錄（cd Vue-Project），使用cnpm安裝依賴

 

cnpm install

而後啓動項目

npm run dev

若是瀏覽器打開以後，沒有加載出頁面，有多是本地的8080 端口被佔用，須要修改一下配置文件config>index.js

 

config-index.js.png

最好將端口號改成不經常使用的端口，另外我還將build的路徑前綴修改成'./'(本來爲'/'),是由於打包以後，外部引入js和css文件時，若是路徑以'/'開頭，在本地是沒法找到對應文件的（服務器上沒問題）。因此若是須要在本地打開打包後的文件，就得修改文件路徑。
4、打包上線
須要把本身的項目文件放到src文件夾下
項目開發完成以後，能夠輸入npm run build來進行打包工做

npm run build

打包完成後，會生成dist文件夾，若是已經修改了文件路徑，能夠直接打開本地文件查看 項目上線時，只須要將dist文件夾放到服務器就好了。