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开发过程中的调试，是一个很有用的工具。