elementUI 创建 - 爱码网

框架模板element-ui-vue.zip 已经写好的一个小模板，自己npm install 一下就行，只是缺少node_modules文件夹

1. 利用vue脚手架创建项目

2.11版本

> npm i -g vue-cli
> mkdir my-project && cd my-project
> vue init webpack
> npm i && npm i element-ui

启动服务命令：

npm run dev

2.13版本

npm install vue-cli -g //全局安装 vue-cli , 也可以不用这句

vue init webpack element // element 是项目名

npm i element-ui -S   // 安装 elementui组件

src 引入elementui --- main.js上修改

import ElementUI from \'element-ui\'
import \'element-ui/lib/theme-chalk/index.css\'

// vue 在脚本中使用elementui
Vue.use(ElementUI)

2. 运行程序

进入项目目录下， 执行命令
npm start

第一个程序

了解VUE-CLI3与2的区别及vue.config.js配置文件

区别是文件的简化

index.js 或者 router.js

详情可以看使用element框架增加router路由

import Vue from \'vue\'
import Router from \'vue-router\'
import Hello from "@/components/Hello";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: \'/\',
      name: \'Hello\',
      component: Hello
    }
  ]
})

安装ElementUI

npm i element-ui -S

使用ElementUI

引入element ui

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from \'vue\'
import App from \'./App\'
import router from \'./router\'
import store from "./store";
import ElementUI from \'element-ui\';
import \'element-ui/lib/theme-chalk/index.css\';


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

// 令牌
// d5pvv6omk5rgio0tsh3m4xssynwvii45d5ie1f7n15zzt99q

/* eslint-disable no-new */
new Vue({
  el: \'#app\',
  router,
  components: { App },
  template: \'<App/>\',
  store,
})

main.js

<template>
  <div id="app">
    <div><img src="./assets/logo.png"></div>
    <div>
      <Element_Radio></Element_Radio>
    </div>

    <router-view/>
  </div>
</template>

<script>
import Element_Radio from "./components/Element_Radio";
  export default {
    name: \'App\',
    components: {
      "Element_Radio": Element_Radio,
    },
    methods: {}
  }
</script>

<style>
  #app {
    font-family: \'Avenir\', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

App.vue

<template>
  <div>
    <el-radio v-model="radio" label="1">男</el-radio>
    <el-radio v-model="radio" label="2">女</el-radio>
    <button @click="radio_click">按钮</button>
  </div>
</template>

<script>
  export default {
    name: "Element_Redio",
    data() {
      return {
        radio: \'1\'
      }
    },
    methods: {
      radio_click: function () {
        console.log(this.radio)
      }
    }
  }
</script>

<style scoped>

</style>

Element_Radio.vue