1.项目环境的搭建
安装nodejs
官网下载nodejs
官方网站：https://nodejs.org/en/
Node.js自带npm包管理工具，使用npm可使我们快速安装项目中所需要的组件。
终端中输入如下命令行，检查node的版本
node --version
当前版本号是v10.2.0,如果没有出现版本号可能是没有安装node成功。
image.png
安装vue-cli脚手架工具
命令行中输入
npm install -g vue-cli
进行vue-cli全局的安装
image.png
输入
vue --version
查看当前安装的vue的版本号。
image.png
另外，由于npm的官方镜像服务器是在国外，国内没有进行科学上网的同学安装依赖包时，有时候速度会非常慢。因此，可采用淘宝的npm镜像，在命令行工具输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后就可以使用cnpm来代替npm了。因此，如果已经安装了淘宝的npm镜像工具，vue-cli可以这样安装：
cnpm install -g vue-cli
此时，项目环境的配置已经基本完成了。
2.项目的搭建
基于webpack模板搭建vue项目
命令行输入
vue init webpack my-project
其中my-project为项目名称，根据自己项目自定义名称。
输入并回车后，待下载完模版，会进入一系列的配置问题，详细如下图：
- Project name：项目名称
- Project description：项目描述
- Author：作者
- Vue build：运行时与编译
- Install vue-router?：是否安装路由？
- Use ESLint to lint your code?：是否进行代码检测？
- Setup unit tests with Karma + Mocha?：是否进行单元测试？
- Setup e2e tests with Nightwatch?：是否进行端对端测试？
配置完成后我们会在自己的项目目录看到我们的项目文件my-project,我们可以将终端定位到当前项目，并在命令行输入下面的命令行，项目启动成功。
my-project
npm run dev
image.png
在浏览器中输入localhost:8080则可以访问项目。
- 推荐： 安装Vue.js devtools扩展程序
打开Chrome网上应用店，安装Vue.js devtools。这个插件，便于我们在进行Vue.js开发过程中的调试，是一个很有用的工具。
