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\_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是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹
项目文件夹.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文件夹放到服务器就行了。
网友评论