Vue2.9.6安装element-ui

Posted 2022-04-22 知其黑、受其白

阅读目录

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

安装 element-ui

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

+ element-ui@2.15.8
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>