Element UI 總結

Element UI官方文檔！！！

Element UI 項目模板

多用用就熟悉了。。。。。。。。。

git clone  https://github.com/ElementUI/element-starter.git

cd element-starter

npm install

npm run dev   //  package.json  命令
//  Project is running at http://127.0.0.1:8010/

package.json

"scripts": {
    "dev": "webpack-dev-server --inline --hot --env.dev",
    "build": "rimraf dist && webpack -p --progress --hide-modules"
  },

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

APP.vue

template

<template>
  <div id="app">

        <img src="./assets/logo.png">
        <div>
          <el-button @click="startHacking">Start</el-button>
        </div>

    <el-checkbox-group v-model="checkList">
      <el-checkbox label="複選框 A"></el-checkbox>
      <el-checkbox label="複選框 B"></el-checkbox>
      <el-checkbox label="複選框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="選中且禁用" disabled></el-checkbox>
    </el-checkbox-group>

    <div style="margin: 25px 0;"></div>
    <pre  >{{  $data  }}</pre>

  </div>
</template>

script

<script>
export default {
  data(){
    return {
      msg :  'cookie fzx',
      radio: 3,
      checkList: ['選中且禁用','複選框 A'],
      value4: true,
      value5:100,
  },
  methods: {
    startHacking () {
      this.$notify({
        title: 'It works!',
        type: 'success',
        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
        duration: 5000
      })
    },
  }
}
</script>

<style>
#app {
  font-family: Helvetica, sans-serif;
  text-align: left;
}
</style>