Vue基础入门（一）

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