Vue2.9.6安装element-ui

阅读目录

• 安装 element-ui
• 源码
• • 路由文件：E:\node\vue296\src\router\index.js
  • 入口：E:\node\vue296\src\main.js
  • 组件：E:\node\vue296\src\components\Count.vue

PS E:\node\vue296> npm i element-ui -S
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 6 packages from 6 contributors in 12.379s
PS E:\node\vue296>

安装成功之后，进入项目 src 目录在 main.js 中添加（element官网有快速上手）：

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)

组件中添加 element-ui 组件

<template>
  <div>
    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
  </div>
</template>

路由文件：E:\node\vue296\src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import Count from '@/components/Count'

Vue.use(Router)

export default new Router({
    mode: 'history', //mode模式
    routes: [
        {
            path: '/count',
            name: 'Count',
            component: Count,
        },
    ]
})

入口：E:\node\vue296\src\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 ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router'

// 引入store
import store from './vuex/store'

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

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

组件：E:\node\vue296\src\components\Count.vue

<template>
  <div>
     <h1>{{ msg }}</h1>
    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
  </div>
</template>

<script>
export default {
    name: 'Count',
    data () {
        return {
            msg: 'Element UI 组件'
        }
    }
}
</script>

<style scoped>
</style>