【Vue】ElementUI在vue-cli程序中的使用

---

搭建环境

1. 找到项目的路径进入cmd。
2. 创建一个名为hello-vue的工程vue init webpack hello-vue
3. 安装依赖，我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件。

#进入工程目录
cd hello-vue
# 安装 vue-router
cnpm install vue-router --save-dev
# 安装 element-ui
cnpm i element-ui -S
# 安装依赖
cnpm install
# 安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动项目
npm run dev

4. npm命令解释:

• npm install moduleName:安装模块到项目目录下
• npm install -g moduleName : -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看npm config prefix的位置
• npm install -save moduleName : --save的意思是将模块安装到项目目录下，并在package 文件的dependencies节点写入依赖，-S为该命令的缩写
• npm install -save-dev moduleName: --save-dev的意思是将模块安装到项目目录下，并在package 文件的 devDependencies 节点写入依赖，-D为该命令的缩写

5. 用IDEA打开即可

使用ElementUI

1. 官网使用教程：https://element.eleme.cn/#/zh-CN/component/installation
2. 前面有使用命令安装ElementUI：cnpm i element-ui -S,这里可以直接导入使用。

在main.js里面导入：

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

Vue.use(ElementUI);

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

完整的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',
  render: h => h(App),
  router,
  components: { App },
  template: '<App/>'
})

3. 然后就可以在组件中直接使用ElementUI

例如：

<template>
  <div>
    <div class="block">
      <span class="demonstration">默认不区分颜色</span>
      <el-rate v-model="value1"></el-rate>
    </div>
    <div class="block">
      <span class="demonstration">区分颜色</span>
      <el-rate
        v-model="value2"
        :colors="colors">
      </el-rate>
    </div>
  </div>
</template>


<script>
  export default {
    name: "Login",
    data() {
      return {
        value1: null,
        value2: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      }
    }
  }
</script>

<style scoped>

</style>

写好的组件import到我们的路由index.js使用：

import Vue from 'vue'
//安装vue-router后导入进来
import VueRouter from 'vue-router'

//导入组件
import Login from '../views/Login'

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/login',
      name: 'login',
      //跳转的组件
      component: Login
    }
  ]
});

最后在我们的根组件App.vue中使用到此路由：

<template>
  <div id="app">
    <router-link to="/login">登录</router-link>
    <!--展示组件-->
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App'
}
</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>