Vue.js 使用 ElementUI

印度阿三17 2019-04-11

展開全文

1. 首先創(chuàng)建Vue項目 (使用 vue-cli 進行創(chuàng)建)

創(chuàng)建項目文章指導地址:?https://blog.csdn.net/assiduous_me/article/details/89208649

2. ElementUI:一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的桌面端組件庫

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.? 創(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="活動性質(zhì)">
        <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 /src
import HelloElement from "@/components/HelloElement.vue";

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