Vue入门
之前一直在做java后台，最近的项目开发都是前后分离的。所以最近自己也在学习vue这个前端的框架。因为是前端的知识不是很精通，所以就通过bolg的形式记录下来。
本地的node环境已经安装好了。所以就直接开始项目的搭建。
项目搭建
我是使用VS code。通过VS code在电脑的F盘新建一个香项目目录vuedemo，并进入该项目。
1533190646459.png
进入vuedemo目录后，我们执行命令，来初始化项目：
vue init webpack vuedemo
初始化的过程中，需要我们确认一些信息，我们一直回车就行了。然后等相关的依赖安装好。
1533191018767.png
项目初始化完成后，我们进入vuedemo这个目录，我们就可以通过命令npm install来安装项目的依赖了。不过使用npm命令可以需要很长的时间所以我们可以，使用淘宝的镜像地址。
打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回车之后，我就可以可以快乐的用 cnpm 替代 npm
cnpm insatll
通过以上的命令安装依赖。
1533191486968.png
依赖安装完成后，我们执行命令
npm run dev
如果不报错，我们就应该可以看到以下的信息
1533191619031.png
浏览器访问地址：http://localhost:8080/#/
1533191653505.png
到这里，一个基础的vue项目就已经搭建好了。
使用ElementUI
element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
安装ElementUI。
通过cmd执行以下的命令就可以把elementui安装到项目中了。
cnpm i element-ui -S
那么现在就引入element-ui组件模块，用VS code打开vuedemo项目。修改src/main.js文件，
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
1533192576795.png
我们把首页的组件修改一下：
1533192832588.png
把其他多余的代码删除调，添加几个elementUI组件的button标签。重新访问主页可以看到：
-1533192912567.png