Vue.js 使用 ElementUI

1. 首先创建Vue项目 (使用 vue-cli 进行创建)

创建项目文章指导地址: https://blog.csdn.net/assiduous_me/article/details/89208649

2. ElementUI:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

 链接地址:http://element.eleme.io/#/zh-CN

3. 正式开始

1. Element 引入，在vs code 的终端下输入下面命令?:

npm i element-ui -S

2. 全局配置引入Element，打开main.js

 

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.config.productionTip = false;
Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

3.  创建一个 HelloElement.vue 组件

<template>
  <div class="mElementForm">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="即时配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "HelloElement",
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      }
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style>
.mElementForm {
  margin: 0 auto;
  width: 800px;
}
</style>

4. 修改 home.vue 将新创建的组件引入

<template>
  <div class="home">
    <HelloElement></HelloElement>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloElement from "@/components/HelloElement.vue";

export default {
  name: "home",
  components: {
    HelloElement
  }
};
</script>

5. 在vs code 的终端输入 npm run serve 查看一下

 

到这里已经全部结束了，项目中已经可以是用element-ui了，最后告诉大家一个配置

打开package.json文件，添加下面这个东西?：然后当你再运行npm run serve 会自动弹出浏览界面，嘻嘻！