Hello,Vue

vue2.0 + vue-cli + vue-devtools 安装教程

项目初始化

首先第一步我们需要安装 vue-cli

通过官方手册的推荐，执行全局安装：

npm install --global vue-cli

接下来直接利用 vue init webpack ${project name}命令构建项目即可：

sh-3.2# vue init webpack project
? **Project name** hello-vue
? **Project description** A basic Vue2.0 program 
? **Author** liumapp 
? **Vue build** standalone
? **Install vue-router?** Yes
? **Use ESLint to lint your code?** Yes
? **Pick an ESLint preset** Standard
? **Setup unit tests with Karma + Mocha?** Yes
? **Setup e2e tests with Nightwatch?** Yes
 vue-cli  · Generated "project".
 To get started:

 cd project

 npm install

 npm run dev

 Documentation can be found at https://vuejs-templates.github.io/webpack

构建完成后，一个基本的前端项目雏形就已经出来了，npm install 和 npm run dev 这两个基本命令运行一下就没什么问题了。不过要注意一下，vue-router 在项目构建之初就能够自动下载到项目中。

但是在 npm install 之前，建议将镜像设置为国内的：

npm config set registry https://registry.npm.taobao.org

但是笔者有一段时间发现 taobao 的镜像也会出问题，换成这个似乎更好一点：

npm config set registry https://registry.npmjs.org

在执行完 npm run dev 这个命令之后，我们就能够进入项目的 demo 页面。

默认地址为 localhost:8080

vue-devtools

项目能够看到 demo 页面之后，我们下一步就是安装 vue-devtools，用来调试 vue。

直接进入 vue-devtools 的 Git 仓库

因为 vue-devtools 是一款浏览器插件，使用 Chrome 的同学，将需要翻墙去谷歌的应用商店进行下载。

插件安装的地址请在 vue-devtools 的 README 中寻找。

安装成功后，我们可以在 Vue 的页面中直接打开 Console ，然后找到 Vue 这一栏即可开始使用 vue-devtools，如图所示