Vue-cli引入element-ui简单示例

Vue-cli集成Element-UI实战
最新推荐文章于 2024-08-11 01:05:02 发布
原创 最新推荐文章于 2024-08-11 01:05:02 发布 · 2.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element-ui #vue-cli

本文详细介绍了如何使用Vue-cli创建项目并集成Element-UI，包括安装、配置及使用Element-UI组件的具体步骤，适合初学者快速上手。

Vue-cli引入element-ui简单示例

参考官方

vue：https://cn.vuejs.org/
nodejs：http://nodejs.cn/
element-ui：http://element-cn.eleme.io/#/zh-CN/component/installation

项目创建

请参考：https://blog.youkuaiyun.com/qq_15764943/article/details/86300310

添加element-ui

安装

（1）方式一：npm安装

cnpm i element-ui -S

（2）方式二：依赖安装

package.json添加依赖 "element-ui": "^2.2.1"
cnpm install

引入

在main.js中，引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

在这里插入图片描述

示例

添加element按钮
（1）创建组件
在这里插入图片描述
（2）注册路由
在这里插入图片描述
（3）首页使用
在这里插入图片描述
（4）页面效果
在这里插入图片描述

Vue-cli4 配置 element-ui 按需引入操作
10-14
主要介绍了Vue-cli4 配置 element-ui 按需引入操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
精选资源
vue-cli-plugin-element-Vue CLI 3插件，可在几秒钟内用element-ui构建企业应用程序-Vue.js开发
05-27
vue-cli-plugin-element可以在几秒钟内使用vue-cli和element-ui快速构建企业应用程序。 该项目不仅是vue-cli插件，而且是vue-cli-plugin-element，可在几秒钟内使用vue-cli和element-ui快速构建企业应用程序。 该...
vue-cli引入element-ui
最新发布
qq_44849312的博客
08-11 214
在vue的 HelloWorld页面中加入element-ui样式测试。导航样式生效即为成功啦。
vue-cli ElementUI
weixin_44141393的博客
05-19 322
ElementUI 1.使用 第一步, 在项目的终端运行下面的命令 安装elementui的js css文件 npm i element-ui -S 第二步, 在 main.js中 引入elementui //参考官网介绍 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //全局中 使用 elementui Vue.use(ElementUI); 第三步, 在components文件夹中
vue-cli 引入 element u
Eighteen Z
09-19 295
vue配套ui框架 element ui（饿了么开源项目） 进入项目先安装element ui npm i element-ui -S 也可以直接引入文件 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css&q
vue项目神器，vue-cli和ElementUI
weixin_41597939的博客
09-29 1393
vue-cli vue-cli是开发vue项目的一个脚手架工具，在模块化开发中，我们可以使用vue-cli快速搭建一个项目，在创建项目过程中还可以集成第三方插件，快速的把项目搭建起来，我们可以针对对应的模块进行开发。 全局安装 npm install -g @vue/cli 查看是否安装成功 vue --version 创建项目 vue create my-project 启动项目 npm run serve 在这里我们创建的项目集成了babel,v
vue2.0基于vue-cli+element-ui制作树形treeTable
10-17
主要介绍了vue2.0基于vue-cli+element-ui制作树形treeTable，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli4引入element ui
睡不够
08-23 5144
vue-cli4引入element ui 按照官网文档按需引入出问题报错，如下可解决问题 官方文档链接: element-ui文档 安装element ui npm i element-ui -S main.js引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 添加 babel-plugin-component 依赖 借助 babel-plug
vue-cli 搭建项目，ElementUI的搭建和使用
nenye233的博客
06-25 899
vue-cli 官方提供的一个脚手架，用于快速生成一个vue的项目模板；预先定义 好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个 骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；简单的说 Node.js是一个前端js运行环境或者说是一个 JS 语言解释器。npm 是Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个。
vue-cli4按需引入element-ui
duduyingya的博客
05-08 1018
下载node.js以及webpack等 用vue-cli4快速搭建vue项目 vue按需引入element-ui （1） 用管理员的cmd的窗口进入到项目目录下 安装按需引入用到的插件 npm install babel-plugin-component -D (2)然后继续在cmd黑框的项目目录下输入以下命令 安装element-ui 不然下面按需引入的包会报错找不到 npm i element-ui -S （3）然后打开刚刚创建好的vue项目 新建文件 .babelrc 与src文件夹对齐的
怎么样在vue-cli的项目里面引入element ui
weixin_30650039的博客
08-06 207
第一步:先进入到项目里面 npm i element-ui -S 第二步: import Vue from 'vue'; import ElementUI from 'element-ui'; //这个是必须写的 import 'element-ui/lib/theme-chalk/index.css'; //这个也是必须的 ,其他的应该在下载vue-cli就有的啦 import App fr...
vue-cli@4按需引入Element-ui
qq_40908383的博客
09-27 254
根据官方提供方法进行按需引入, 一直不成功 下面使用 vue add element 来进行按需引入, 成功 vue-cli@3.0之后，element-ui提供相应的element插件，我们可以用这个插件快速的来安装element-ui。只需要在当前项目目录下，运行vue add element即可： 直接把配置内容放到babel.config.js文件： 会自动生成 按需引入文件 main.js 中也会自动导入相应文件 ...
Vue CLI@4按需引入element-ui
sinat_33127389的博客
09-17 866
记录一下按需引入element-ui时踩过的坑。 1.使用npm安装element-ui npm i element-ui -S 2.安装 babel-plugin-component npm install babel-plugin-component -D 3.将babel.config.js修改为： module.exports = { presets: [ '@vue/cli-plugin-babel/preset' //跟官网的不同 ], "plugins": [
Vue-cli项目及Element UI 环境搭建 保姆级教程
2201_75691974的博客
06-28 1038
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，使我们的开发更加的快速。
element-ui vue-cli 引入方法
未玄的博客
11-06 522
import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI)
vue-cli的引入（element-ui、mint-ui，axios）
Lisunlight的博客
07-28 1431
为了使所有的组件均可使用，文件的引入都在 src/main.js 中引入 1、element-ui （1）npm install element-ui //下载组件 （2）在main.js中输入（实现全局引入） import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(...
vue-cli4创建项目导入Element-UI踩过的坑
weixin_45185103的博客
10-06 4930
错误1：Uncaught TypeError: Cannot read property ‘prototype‘ of undefined 错误2：unknown option – skipGetStart
vuecli4.5.11引入elementUI
weixin_46472377的博客
03-25 701
vuecli4.5.11引入elementUI 话不多说网上查了很多并且官方也还没给出正式版elementUI引入，目前只是体验引入项目 1.完整引入（不推荐使用，测试版还是有bug） 在 main.js 中写入以下内容： import { createApp } from ‘vue’ import ElementPlus from ‘element-plus’; import ‘element-plus/lib/theme-chalk/index.css’; import App from ‘./App.
Vue中Element一般使用、Vue-cli和手工搭建环境中按需使用Element
duansamve的博客
04-16 958
1、安装： cnpm i element-ui -S 2、在 main.js 中引入并注册： import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(Elem...
electron-vue + vue-cli + element-ui 实时热更新版
08-09
electron-vue是一个基于Vue.js和Electron的开发框架，可以用来快速构建跨平台的桌面应用程序。它集成了vue-cli和element-ui，使得开发者能够使用Vue.js的开发方式来构建桌面应用，并且可以使用element-ui的组件库来简化界面的开发工作。 Vue-cli是Vue.js官方提供的脚手架工具，可以帮助开发者快速搭建Vue.js项目。它提供了一些基础模板，可以选择使用不同的配置模板来创建项目，并且集成了一些常用的开发工具和构建工具，使得开发者可以更方便地进行开发和调试工作。 Element-ui是一个基于Vue.js的开源UI组件库，提供了一套美观、易用的UI组件，包括表单、按钮、弹窗等常用组件。Element-ui不仅提供了丰富的组件，还提供了详细的文档和示例，开发者可以快速地使用和定制这些组件，从而提高开发效率。 实时热更新版是指electron-vue、vue-cli和element-ui进行了实时热更新的版本。在开发过程中，开发者可以通过某些配置和插件，实现代码的热更新，即在开发过程中，代码的修改会立即反映在应用程序中，无需重新编译和刷新页面。这样可以极大地提高开发效率，减少开发调试的时间。 总之，electron-vue集成了vue-cli和element-ui，是一个使用Vue.js开发桌面应用的开发框架。通过使用实时热更新版，开发者可以更加高效地进行开发工作。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值