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文件夹放到服务器就好了。