vue入门|ElementUI使用指南

vue入门|ElementUI使用指南

1.开发前务必熟悉的文档：

vue.js2.0中文,项目所使用的js框架
vue-router,vue.js配套路由
vuex      状态管理
Element UI框架

2.构建项目框架

全局安装脚手架环境
npm install -g vue-cli
创建一个基于webpack模板项目my-project
vue init webpack my-project
进入项目
cd my-project
安装依赖
npm install
启动项目
npm run dev

3.运行项目之后看到下面界面，说明安装成功

4.安装element-ui

npm install element-ui -S
S代表save 安装到本地开发者环境中
检查一下package.json看看是否安装成功，如果有element-ui 表示安装成功

5.导入element-ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)//全局使用ElementUI

如果没报错的话，就可以正常使用啦

6.接下来我们就可以参照Element的官方文档上手开发了

demo:

我们只需要改动HelloWorld.vue的内容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-progress type="circle" :percentage="0"></el-progress>
    <el-progress type="circle" :percentage="25"></el-progress>
    <el-progress type="circle" :percentage="100" status="success"></el-progress>
    <el-progress type="circle" :percentage="50" status="exception"></el-progress>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  }
}
</script>

效果如下图所示：

接下来就有你们自己去研究啦，