其他文章
Vuejs的生命周期函数
vue-router配置
vue模板语法
vue计算属性和侦听器
vue Class与Style绑定
vue表单输入绑定
vue 组件基础
准备工作：
- 安装node.js
下载并安装node.js
如下图所示
node.js.png
安装完成之后通过命令：node -v查看当前安装的nodejs的版本 如我的是：v8.11.3
安装npm
npm其实是Node.js的包管理工具。
最新版的node.js是集成了npm ,安装nodejs之后，npm也顺带安装了。可以通过下面的命令查看npm的版本
npm -v如我的显示的是：5.6.0安装vue-cli脚手架构建工具
命令：sudo npm install -g vue-cli因是全局安装，所以会用-g，不加-g只会安装在当前目录下。加sudo的目的是为了解决安装权限的问题，不加sudo可能会因为权限导致无法安装。安装时弹出密码输入时，输入自己电脑密码即可。
安装完成之后可以到这个目录下查看安装的文件：/usr/local/lib/node_modules，该文件夹下有个文件夹是vue-cli就是我们安装的脚手架构建工具，也可以通过vue -V注意V是大写字母，可以查看vue的版本,我电脑上安装之后显示的是：2.9.6创建一个基于 webpack 模板的新项目
命令：
#cd到你想创建项目的文件夹XX下创建项目 my-first-vue-project
vue init webpack my-first-vue-project
或者
vue init webpack-simple my-first-vue-project
命令执行过程中会让你回答几个问题,按下面的展示操作即可
?project name my-first-vue-project //enter即可
?project description a vue.js project //这里是输入项目描述
?author ZekeRain//输入作者即可
?Vue build standalone //选择这个选项即可
?Install vue-router? yes
?Use ESL int to lint your code? no
?Pick an ESL int preset standard
?Setup unit tests with Karma + Mocha ? no
? Setup e2e tests with Nightwatch？ no
执行之后my-first-vue-project文件夹下看到的效果如下：
- 项目创建之后，添加项目依赖
npm install
执行之后my-first-vue-project文件夹下看到的效果如下：
- 编译项目并运行
到此项目基本创建完成了，通过下面的命令就可以执行并看到页面效果了
npm run dev
然后在浏览器里输入：http://localhost:8080即可看到如下效果：
- 说明
国内使用npm工具可能会很慢，可通过淘宝镜像使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
以后使用npm命令的地方都需要用cnpm替换
