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";

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" /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" /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

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


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

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

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

来源：http://www.icode9.com/content-4-161551.html