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

备注：vue init 再3.x以后建议用vue create，请参考https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%96-2-x-%E6%A8%A1%E6%9D%BF-%E6%97%A7%E7%89%88%E6%9C%AC

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

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>

效果如下图所示：

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

vue入门|ElementUI使用指南

vue入门|ElementUI使用指南

猜你喜欢