vue项目中引入element

本是古典何须时尚 2022-09-10 10:11 222阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]

#### 首先安装 element ui ####

> 常规方式还是cdn和npm安装两种

npm i element-ui -S

#### main.js中做相应的配置 ####

import ElementUI from 'element-ui';
    //需要单独引入样式文件
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);

#### 按需引入 ####

npm install babel-plugin-component -D

在**babel.config.js**中添加plugins

module.exports = { 
      presets: [
        '@vue/cli-plugin-babel/preset'
      ]
      ,
      "plugins": [
        [
          "component",
          { 
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }

可以在main.js部分进行按需引入

import { 
      Button,
      Row,
      Col
    } from "element-ui";
    
    Vue.use(Button);
    Vue.use(Row);
    Vue.use(Col);

点击查看完整的[引入表][Link 1]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/52d20947d96d4daaaa2e39b2f00abfec.png
[Link 1]: https://github.com/ElemeFE/element/blob/master/components.json

发表评论取消回复

表情：

评论列表（有 0 条评论，222人围观）

还没有评论，来说两句吧...

相关阅读

相关创建Vue3项目以及引入Element-Plus

创建Vue3项目以及引入Element-Plus 前提条件：本地需要有node环境以及安装了npm，最好设置了镜像，这样下载包的时候会快些。 1、安装vue脚手架vu

╰+哭是因爲堅強的太久メ/ 2024年03月30日 15:47/ 0 赞/ 37 阅读

相关 Vue中怎样引入Element

引入Element 完整引入在vue项目下的src下的main.js中加入 import Vue from 'vue'; import Elem

秒速五厘米/ 2023年10月18日 10:28/ 0 赞/ 27 阅读

相关关于vue项目element中MessageBox的引入问题及解决

在做vue加element-ui电商后台管理系统进行登录的时候，遇到了一个奇怪的bug，先贴图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZ

左手的ㄟ右手/ 2022年10月05日 13:56/ 0 赞/ 202 阅读

相关 vue项目中引入element

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5

本是古典何须时尚/ 2022年09月10日 10:11/ 0 赞/ 223 阅读

相关在vue项目中引入element，并改变主题色

写项目提高开发效率是最重要的，引入UI框架就是提高开发效率的有效途径。这里就说一下自己是如何引入UI框架的——vue中引入elementUI。（项目其实早已经开发完了，只

Dear 丶/ 2022年05月21日 06:53/ 0 赞/ 244 阅读

相关搭建VUE项目（二）VUE项目中引入Element组件快速开发

组件网址http://element-cn.eleme.io/\/zh-CN 首先，VUE项目需要安装组件，方式一npm: 进入项目根目录后执行 cnpm

ゝ一纸荒年。/ 2022年05月21日 00:27/ 0 赞/ 267 阅读

相关新建vue项目并引入element组件

从新建vue项目到引入组件Element 以及Error when rendering component报错解决一、新建项目 1.打开cmd，运行：vue init

àì夳堔傛蜴生んèń/ 2022年05月19日 08:10/ 0 赞/ 336 阅读

相关 Vue2.0中引入element-ui

1.在项目的Terminal中查看vue版本 vue -V 2.安装Element-UI模块 cnpm install element-ui --save 3.在项目

迷南。/ 2021年09月24日 16:30/ 0 赞/ 333 阅读

相关 Vue引入element-ui

Element快速上手：[https://element.eleme.cn/\/zh-CN/component/quickstart][https_element.eleme.

àì夳堔傛蜴生んèń/ 2021年09月20日 10:20/ 0 赞/ 367 阅读

相关 vue2.0项目引入element-ui

从新建vue项目到引入组件Element 一、新建项目 > 1.查看 node和npm是不是已经安装好命令：node -v npm -v (没有安装的先安装环境)

素颜马尾好姑娘i/ 2021年07月26日 20:48/ 0 赞/ 342 阅读