Vue2.9.6安装element-ui

傷城~ 2023-10-06 22:29 40阅读 0赞

#### 阅读目录 ####

*  安装 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 组件

## 源码 ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]

### 路由文件：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>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d754ec265774496d9f6aca24c210760f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16