Vue基础入门(一)

Vue入门

之前一直在做java后台,最近的项目开发都是前后分离的。所以最近自己也在学习vue这个前端的框架。因为是前端的知识不是很精通,所以就通过bolg的形式记录下来。
本地的node环境已经安装好了。所以就直接开始项目的搭建。

项目搭建

我是使用VS code。通过VS code在电脑的F盘新建一个香项目目录vuedemo,并进入该项目。


Vue基础入门(一)
1533190646459.png

进入vuedemo目录后,我们执行命令,来初始化项目:

 vue init webpack vuedemo

初始化的过程中,需要我们确认一些信息,我们一直回车就行了。然后等相关的依赖安装好。


Vue基础入门(一)
1533191018767.png

项目初始化完成后,我们进入vuedemo这个目录,我们就可以通过命令npm install来安装项目的依赖了。不过使用npm命令可以需要很长的时间所以我们可以,使用淘宝的镜像地址。
打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org
回车之后,我就可以可以快乐的用 cnpm 替代 npm

cnpm insatll

通过以上的命令安装依赖。


Vue基础入门(一)
1533191486968.png

依赖安装完成后,我们执行命令

npm run dev

如果不报错,我们就应该可以看到以下的信息


Vue基础入门(一)
1533191619031.png

浏览器访问地址:http://localhost:8080/#/

Vue基础入门(一)
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)
Vue基础入门(一)
1533192576795.png

我们把首页的组件修改一下:


Vue基础入门(一)
1533192832588.png

把其他多余的代码删除调,添加几个elementUI组件的button标签。重新访问主页可以看到:


Vue基础入门(一)
-1533192912567.png
上一篇:springCloud Finchley 实战入门(基于springBoot 2.0.3)【一 专题介绍】


下一篇:springCloud Finchley 实战入门(基于springBoot 2.0.3)【二 服务治理 Eureka】