vue入门|ElementUI使用指南

╰半橙微兮° 2022-06-01 08:41 554阅读 0赞

# 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.运行项目之后看到下面界面，说明安装成功**

![20180125120934026][]

**4.安装element-ui**

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

![20180125113500905][]

**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>

效果如下图所示：

![20180125134415547][]

接下来就有你们自己去研究啦，![再见][bye.gif]

[20180125120934026]: /images/20220601/a204860ceaa94cd0afd97959ed2f4e60.png
[20180125113500905]: /images/20220601/01302a1f735d446aa2b9bab491e688c7.png
[20180125134415547]: /images/20220601/7eae4800255249dc8c103b9e54f6395b.png
[bye.gif]: /images/20220601/9e9c54098b1c4531ac58c8ffdaa10cdb.png