[笔记] elementUI ---（一)环境搭建

一、npm方式安装（vue脚手架引入element）

1、npm 安装 elementUI

# 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S

安装成功后可以在 node_modules 中查看是否有 element-ui 文件夹

2、在 main.js 中引入，并保存使用

// 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 ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

/* 阻止启动生产消息，常用作指令 */
Vue.config.productionTip = false

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

3、可以在默认 components 下 HelloWorld.vue下修改测试效果

<template>
  <div>
  	<!-- ...添加以下标签 -->
    <el-button @click="show = !show">Click Me</el-button>
  </div>
</template>

<script>
  export default {
    data: () => ({
      show: true
    })
  }
</script>

<style scope>
 
</style>

4、启动项目，查看 elementU I效果

npm run dev

页面中 有出现 elementUI样式按钮，则说明 elementUI 引入成功