使用Vue-cli搭建项目

hello，大家好！ 最近一直都在做项目，所以没有及时更新我的文章，请大家多多包涵！
下面请跟随我一起学习Vue，这里有我在工作中总结的重要的知识点以及项目中遇到的一些Bug！
一、安装node.js
首先需要安装node环境
1、这是node.js最新固定版本下载地址：http://nodejs.cn；
2、这是多版本的node.js的下载地址：https://blog.csdn.net/s8460049/article/details/52396399
安装完成后，可以在该文件夹下打开cmd命令工具输入node -v和npm -v，如果能显示出版本号，就说明安装成功。

node、npm安装完成.png

二、安装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\[email protected]@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\[email protected]@commander
[2/20] minimatch@^3.0.0 installed at node_modules\[email protected]@minimatch
[3/20] ora@^1.3.0 installed at node_modules\[email protected]@ora
[4/20] chalk@^2.1.0 installed at node_modules\[email protected]@chalk
[5/20] read-metadata@^1.0.0 installed at node_modules\[email protected]@read-metadata
[6/20] semver@^5.1.0 installed at node_modules\[email protected]@semver
[7/20] rimraf@^2.5.0 installed at node_modules\[email protected]@rimraf
[8/20] [email protected] installed at node_modules\[email protected]@uid
[9/20] tildify@^1.2.0 installed at node_modules\[email protected]@tildify
[10/20] multimatch@^2.1.0 installed at node_modules\[email protected]@multimatch
[11/20] user-home@^2.0.0 installed at node_modules\[email protected]@user-home
[12/20] validate-npm-package-name@^3.0.0 installed at node_modules\[email protected]@validate-npm-package-name
[13/20] [email protected] existed at node_modules\[email protected]@coffee-script
[14/20] consolidate@^0.14.0 installed at node_modules\[email protected]@consolidate
[15/20] request@^2.67.0 installed at node_modules\[email protected]@request
[16/20] metalsmith@^2.1.0 installed at node_modules\[email protected]@metalsmith
[17/20] async@^2.4.0 installed at node_modules\[email protected]@async
[18/20] download-git-repo@^1.0.1 installed at node_modules\[email protected]@download-git-repo
[19/20] handlebars@^4.0.5 installed at node_modules\[email protected]@handlebars
[20/20] inquirer@^6.0.0 installed at node_modules\[email protected]@inquirer
deprecate [email protected] › [email protected] › 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
    → [email protected] › extend@~3.0.1(3.0.2) (04:28:11)
  2018-07-18
    → [email protected] › mime-types@~2.1.17(2.1.19) (13:29:59)
  2018-07-15
    → [email protected] › [email protected] › 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)
[[email protected]] link D:\nodejs\node_global\vue@ -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue
[[email protected]] link D:\nodejs\node_global\vue-init@ -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
[[email protected]] 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是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹

项目文件夹.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文件时，如果路径以'/'开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
四、打包上线
需要把自己的项目文件放到src文件夹下
项目开发完成之后，可以输入npm run build来进行打包工作

npm run build

打包完成后，会生成dist文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
项目上线时，只需要将dist文件夹放到服务器就行了。