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

最新推荐文章于 2024-08-11 01:05:02 发布
最新推荐文章于 2024-08-11 01:05:02 发布
阅读量2.6k 收藏 4
点赞数 1
分类专栏： JS 文章标签： element-ui vue-cli
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15764943/article/details/86314489
版权

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.csdn.net/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- cli和Element-UI
weixin_45650502的博客
10-18 336
Vue脚手架 vue脚手架的基本用法 Vue脚手架用于快速生成vue项目基础架构 使用步骤： 安装vue脚手架： npm install -g @vue/cli 使用脚手架创建vue项目 // 1.基于交互式命令行的方式，创建 新版vue项目 vue create my-project # OR // 2.基于图形化界面的方式，创建 新版vue项目 vue ui // 3.基于旧版本，创建旧版vue项目 npm install -g @vue/cli-init vue init webpack my-
vue引入Element-ui
热门推荐
m0_51459514的博客
03-22 1万+
vue引入Element-ui之全局引入
Vue-cli4 配置 element-ui 按需引入操作
10-14
主要介绍了Vue-cli4 配置 element-ui 按需引入操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli引入element-ui
最新发布
qq_44849312的博客
08-11 122
在vue的 HelloWorld页面中加入element-ui样式测试。导航样式生效即为成功啦。
前端（六）：Vue组件库Element
qq_52200849的博客
08-07 1632
其特点是占用内存少，并发能力强，在各大型的公司都有非常广泛的使用。在后台运行，那么继续接下来修改端口号的操作，否则不用），通过日志文件发现端口号80被占用，在。启动，该服务器默认占用80端口号，但是打不开（通过查看任务管理器如果没有看到这个。：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下。，可以直接访问到我之前写的DeptView和EmpView。访问我们的端口号（我的依旧是80没有改变），在地址栏输入。3、定义组件文件，访问官网，复制组件代码，调整。表格、分页、对话框、表单。
vue-cli ElementUI
weixin_44141393的博客
05-19 244
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 239
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 1335
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-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-cli4引入element ui
睡不够
08-23 5086
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的Vue超简单入门小例子（推荐）
12-10
这个例子还是比较简单的，独立完成后，能大概知道vue是干嘛的，可以写个todoList的小例子。 开始写例子之前，先对环境的部署做点简单的介绍，其实和Vue官方的差不多。 #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Project name (my-project) #回车 ? Project description  #回车，也可以写点项目描述 ? Author #回车，或者输入
使用vue-cli导入Element UI组件的方法
11-30
首先第一步,现在命令行中输入npm i element-ui,如: 接着在mian.js 中添加 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 如:=> 最后在命令行输入npm run dev打开自己创建的项目就可以使用了 总结 以上所述是小编给大家介绍的使用vue-cli导入Element UI组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
vue-cli 搭建项目，ElementUI的搭建和使用
nenye233的博客
06-25 746
vue-cli 官方提供的一个脚手架，用于快速生成一个vue的项目模板；预先定义 好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个 骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；简单的说 Node.js是一个前端js运行环境或者说是一个 JS 语言解释器。npm 是Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个。
vue-cli4按需引入element-ui
duduyingya的博客
05-08 956
下载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 173
第一步:先进入到项目里面 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 206
根据官方提供方法进行按需引入, 一直不成功 下面使用 vue add element 来进行按需引入, 成功 vue-cli@3.0之后，element-ui提供相应的element插件，我们可以用这个插件快速的来安装element-ui。只需要在当前项目目录下，运行vue add element即可： 直接把配置内容放到babel.config.js文件： 会自动生成 按需引入文件 main.js 中也会自动导入相应文件 ...
Vue-cli项目及Element UI 环境搭建 保姆级教程
2201_75691974的博客
06-28 790
vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，使我们的开发更加的快速。
element-ui vue-cli 引入方法
未玄的博客
11-06 462
import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI)
electron-vue + vue-cli + element-ui 实时热更新版
08-09
它集成了vue-cli和element-ui，使得开发者能够使用Vue.js的开发方式来构建桌面应用，并且可以使用element-ui的组件库来简化界面的开发工作。 Vue-cli是Vue.js官方提供的脚手架工具，可以帮助开发者快速搭建Vue.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值