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

ゝ一纸荒年。 2022-05-21 00:27 307阅读 0赞

组件网址http://element-cn.eleme.io/\#/zh-CN

首先，VUE项目需要安装组件，

方式一npm:

进入项目根目录后执行

cnpm  i  element-ui -S

方式二：CDN

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

我在上一篇博客的基础上使用方式一，之后修改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 App from './App'
    import router from './router'
    //引入Element
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    //引用Element
    Vue.use(ElementUI)
    
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

注意：是import'element-ui/lib/theme-chalk/index.css'而不是import'element-ui/lib/theme-default/index.css'。

现在就可以在项目中直接引用Element了，如在HelloWord中加上：

<el-button type="primary" icon="el-icon-search">搜索</el-button>

npm run dev运行项目后可以看到:

![70][]

[70]: /images/20220521/ba2a7a79354645808b8a8db8a3cfd68d.png

发表评论取消回复

表情：

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

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

相关阅读

相关在Vue项目中使用Element组件

0 写在前面使用组件可以快速进行开发，使用Element UI轻松制作出网页，为前端开发人员大大减轻了代码负担，即使是后端程序员也可以快速上手做出比较精美的界面。

绝地灬酷狼/ 2024年03月26日 15:47/ 0 赞/ 114 阅读

相关 Vue + element-ui 【前端项目一】Vue 组件中引入组件 6

阅读目录效果预览首页组件中引入获取更多组件完整源码 E:\\pdf1\\cg\\src\\components\\Mov

墨蓝/ 2023年10月07日 20:16/ 0 赞/ 26 阅读

相关 Vue组件化开发-Cli搭建项目

Vue组件化 > 人面对复杂问题的处理方式： > > 任何一个人处理信息的逻辑能力都是有限的 > 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一

超、凢脫俗/ 2023年09月28日 04:26/ 0 赞/ 3 阅读

相关如何在vue项目中引入element ui组件以及如何引入iview组件

前言建议都在已经建立好的vue项目的基础上，再引入element ui或iview组件，而不是按照element ui或iview的官方网站进行，那样一般会存在很多设置

短命女/ 2022年12月29日 06:59/ 0 赞/ 229 阅读

相关 vue项目中引入element

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

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

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

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

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

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

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

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

相关使用 vue-cli + element-ui 快速搭建项目

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下载官方提供的模板（本地电脑没

分手后的思念是犯贱/ 2022年05月11日 11:33/ 0 赞/ 237 阅读

相关 vue项目引入swiper组件

swiper官网: [https://3.swiper.com.cn/api/Navigation\_Buttons/2015/0308/209.html][https_3.s

Dear 丶/ 2022年04月13日 14:14/ 0 赞/ 451 阅读

相关【vue】vue +element 搭建项目，$createElement使用

语法：它有三个参数　　第一个：html标签名　　第二个：配置的数据对象　　第三个：内容应用1：自定义弹窗 html: <el-button ty

╰半橙微兮°/ 2021年12月18日 17:37/ 0 赞/ 889 阅读