創(chuàng)建項目文章指導地址:?https://blog.csdn.net/assiduous_me/article/details/89208649
?鏈接地址:http://element.eleme.io/#/zh-CN
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.? 創(chuàng)建一個 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="活動區(qū)域"> <el-select v-model="form.region" placeholder="請選擇活動區(qū)域"> <el-option label="區(qū)域一" value="shanghai"></el-option> <el-option label="區(qū)域二" 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">立即創(chuàng)建</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 將新創(chuàng)建的組件引入
<template> <div class="home"> <HelloElement></HelloElement> </div></template><script>// @ is an alias to /srcimport HelloElement from "@/components/HelloElement.vue";export default { name: "home", components: { HelloElement }};</script>
5. 在vs code 的終端輸入 npm run serve 查看一下
