精华内容
下载资源
问答
  • 主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料,以及介绍了vue引入elementUI报错的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
  • vue引入elementUI

    2021-01-31 17:12:48
    vue引入ElementUI 一. 全局引入 项目根目录下执行命令:npm i element-ui -S main.js中引入elementui: import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element) 在...

    vue引入ElementUI


    一. 全局引入

    1. 项目根目录下执行命令:npm i element-ui -S
    2. main.js中引入elementui:
    import Element from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(Element)
    
    1. 在组件中直接使用

    二. 按需引入

    1. 项目根目录下执行命令:vue add element
      在这里插入图片描述
    2. 此时我们选择按需引入(import on demand)
    3. 选择zh-CN,回车开始下载
      在这里插入图片描述
    4. 下载完成
      在这里插入图片描述
    5. 此时,我们的项目下多了plugins目录和该目录下的element.js文件,并且在main.js中也已经引入了element.js,babel.config.js也已经配置好了
      在这里插入图片描述在这里插入图片描述
    6. 使用,element.js中
      在这里插入图片描述
    展开全文
  • Vue引入elementUI组件

    千次阅读 2019-05-22 15:27:52
    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。 中文文档:...

    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。

    中文文档:http://element-cn.eleme.io/#/zh-CN
    github地址:https://github.com/ElemeFE/element

    图片.png

    1:安装node

    端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

    image

    2:查看node的版本号

    下载好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。

    输入命令: node -v
    
    

    image

    3:安装淘宝npm镜像

    由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
    淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

    输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    

    image

    4:安装全局vue-cli脚手架

    淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;

    输入命令:cnpm install --global vue-cli
    
    

    image

    ####5:开始进入主题,初始化一个vue项目
    我这里是在d盘里面新建一个项目,先用d:的命令,回车键进入d盘;回车键默认创建项目信息。

    vue init webpack itemname
    

    图片.png

    出现这样的提示,初始化成功
    图片.png

    运行初始化demo,输入命令npm run dev;运行一下初始后的demo,弹出访问地址,如果没有问题则进行安装elementUI;准备好好之后,开始引入饿了么elementUI组件。

    ####6:安装 elementUI

    npm i element-ui -S
    

    快捷键ctrl+c,终止批处理操 作吗(Y/N),在输入命令npm i element-ui -S
    图片.png

    ######注意:安装过程中出现这样的bug的时候,需要解决
    图片.png
    解决办法:尝试 删除项目中的 package-lock.json 文件 和 node_modules 文件夹,然后再尝试 npm install.

    成功安装组件显示如下
    图片.png

    #####7:在components文件夹下面创建test.vue文件,复制一段elementUI官方文档的代码,进行测试
    图片.png

    <template>
    	<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
    		<el-menu-item index="1">处理中心</el-menu-item>
    		<el-submenu index="2">
    			<template slot="title">我的工作台</template>
    			<el-menu-item index="2-1">选项1</el-menu-item>
    			<el-menu-item index="2-2">选项2</el-menu-item>
    			<el-menu-item index="2-3">选项3</el-menu-item>
    		</el-submenu>
    		<el-menu-item index="3">
    			<a href="https://www.ele.me" target="_blank">订单管理</a>
    		</el-menu-item>
    	</el-menu>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				activeIndex: '1',
    				activeIndex2: '1'
    			};
    		},
    		methods: {
    			handleSelect(key, keyPath) {
    				console.log(key, keyPath);
    			}
    		}
    	}
    </script>
    
    

    ####8:在App.vue中引入test.vue
    图片.png

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
        <Test></Test>
      </div>
    </template>
    
    <script>
    	import Test from './components/test.vue'
    	
    export default {
    	components:{
      Test,
     },
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    
    

    ####9:打开main.js,加入element-ui的js和css

    import ElementUI from 'element-ui' //element-ui的全部组件
    import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
    Vue.use(ElementUI) //使用elementUI
    

    ####10:再次运行,组件中的效果如下:

    输入命令:

    npm run dev
    

    图片.png


    原文作者:祈澈姑娘 关注「编程微刊」公众号 ,在微信后台回复「小程序」,获取小程序开发全套资料和500G编程资源教程。

    展开全文
  • vue引入elementUI报错

    2019-07-04 11:46:52
    通过vue init webpack 创建的vue项目.本来我在好好的写代码,觉得电脑卡,随手把电脑重启了一下,然后npm run dev,结果给我来了个大大的cannot get! 终端报错如下: This dependency was not found: * element-ui/lib/...

    通过vue init webpack 创建的vue项目.本来我在好好的写代码,觉得电脑卡,随手把电脑重启了一下,然后npm run dev,结果给我来了个大大的cannot get! 终端报错如下:

    This dependency was not found:
    
    * element-ui/lib/theme-chalk/index.css in ./src/main.js
    
    To install it, you can run: npm install --save element-ui/lib/theme-chalk/index.css
    

    然后在度娘找各种原因,试了不下十种办法,例如在webpack.config.js中也就是webpack.base.conf.js(通过Vue init webpack-simple创建的项目配置文件为webpack.config.js,Vue init webpackwebpack.base.conf.js)添加代码:

    { test: /.(eot|woff|ttf)$/, loader: 'url-loader' }
    

    或者在utils.js中修改代码,安装css-loader,file-loader,url-loader等等,但是这些我之前都装过,现在怎么会突然报这个错呢!好吧,或许可以去Git上拉前两天的代码,把这个代码扔了,但是我这两天刚把路由权限写完啊,之前版本没有啊啊啊!!只有找原因了…
    我试着把报错的css都注释掉把引入的elementUI的css和Vue.use(element)都注释掉,然后发现还有一个报错:

    import 'quill/dist/quill.core.css';
      import 'quill/dist/quill.snow.css';
      import 'quill/dist/quill.bubble.css';
    

    这些css是引入的一个富文本编辑器插件的css,好像发现了一些规律,只有插件的css引入才会报错!好吧,这个发现其实没帮上我什么忙…我只是把这些都注释掉然后项目就可以启动起来了. 启动起来后,由于丢了elementUI整个页面都是报错.element的组件都找不到,然后再试着把elementUI再注释回来,这时竟然发现报错提示postcss-loader丢了,然后

    npm install --save-dev postcss-loader autoprefixer
    

    继续创建一个postcss.config.js

    module.exports = {
        plugins:[
            require("autoprefixer")
        ]
    }
    

    OK,现在项目可以跑了,我也是一脸懵逼,postcss-loader不是添加浏览器前缀的插件吗,这也能影响css引入?!好吧,不管怎样,总之问题暂时解决了,看看之后会不会再崩吧…

    展开全文
  • 前置: 在已经安装好vue的前提下 ,没有安装vue参考:vue搭建教程 elementUI官网组件使用文档: elementUI使用文档 ...2. 打开vue项目在man.js引入elementui 3.直接在vue的文件使用elementUI的样式即...

    前置:

          在已经安装好vue的前提下 ,没有安装vue参考: vue搭建教程

          elementUI官网组件使用文档: elementUI使用文档

     

    1.终端直接运行安装命令

    npm i element-ui -S
    

     

    2. 打开vue项目在man.js引入elementui 

     

    3.直接在vue的文件使用elementUI的样式即可 例如布局的片段代码,使用过程中直接复制elementUI官网的代码进行修改即可

     

    转载于:https://www.cnblogs.com/Jack-cx/p/11371206.html

    展开全文
  • vue引入elementUI部分组件库

    千次阅读 2019-04-02 16:53:13
    在main.js中 import {Cascader} from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.component(Cascader.name, Cascader); 然后就可以正常使用啦
  • 目录1、安装ElementUI2、在main.js中引入elementUI3、测试 ElementUI框架官网地址:https://element.eleme.cn/#/zh-CN/component/installation 1、安装ElementUI 推荐使用 npm 的方式安装,它能更好地和 webpack ...
  • Vue引入ElementUI

    2021-12-06 17:51:39
    打开cmd进入项目目录下,输入: npm i element-ui -S 打开main.js,加入element-ui的js和css import ElementUI from 'element-ui' //引入element-ui的全部组件...Vue.use(ElementUI) //在Vue中使用elementUI ...
  • 使用vue-cli脚手架搭建vue + elementUI 小案例,功能代码不多,主要包括vue项目目录的创建、elementUI引入、前端路由、i18n国际化语言、scss、引入iconfont
  • 哟时候只需要引入ElementUI中的几个组件,全局引入会增加项目的体积,所以按需引入更合适 在mian.js中引入并注册组件 import {Message} from 'element-ui' 在main.js注册,这里是挂在Vue圆形上的 Vue.prototype...
  • 选择全局还是按需引入-全局 Do you wish to overwrite Element's SCSS variables? Yes 是否使用SCSS-是 Choose the locale you want to load zh-CN 选择语言-中文 3, Successfully invoked generator for ...
  • vue引入elementUI 报错

    2017-06-13 09:08:00
    在main.js里面引入import 'element-ui/lib/theme-default/index.css'中报错,无法启动项目,这是把package.json里面的webpack改成 1 "webpack": "beta",重新安装即可,这就可以启动了2 elementUI 2.0版本的地址已经...
  • Vue引入elementUI组件方法 简单记录一下引入elementUI组件方法 1.打开Terminal终端窗口,输入命令: npm i element-ui -S 当然如果速度不给力,可以使用淘宝镜像进行安装下载: cnpm i element-ui -S 2.安装成功...
  • 因项目需要用到elementUI组件,...但是编译时报错,发现在搭建完框架,引入elementUI之前需要先下载相关组件信息 在控制台输入npm i element-ui -S,进行下载 下载完成后重新启动项目,编译不报错,错误解决。 ...
  • 这是我的引入方式,来自官网npm安装方式引入elementUI到项目 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; 错误: These dependencies were not found: 具体...
  • 当我们在做后台管理系统时,经常会遇到非常复杂的表单: ...方案1: 在一个 vue 文件中 所有的表单项显示隐藏、验证、数据获取、提交、自定义等逻辑放在一起 v-if/v-show elementui 缺点 乱 乱 还是乱 一
  • Vue项目搭建 + 引入ElementUI

    万次阅读 多人点赞 2018-11-06 23:49:11
    初始化单页系统 在学习Vue的过程中,官方网站都是给了非常详细的介绍,所以初始化大型单页应用,官网给的参考资料地址:https://cn.vuejs.org/v2/guide/installation.html ...【第二步】输入npm install vue 【第三...
  • 执行命令npm install element-ui --save main.js中引入组件
  • 里面包含了elementui结合高德地图的定位已经位置标记相关的资料,里面的定位组件下载就可使用,包含组件和说明文档。
  • 在非vue项目引用elementUI样式, 方法一(通过 CDN 的方式加载) 引用地址 <!-- 必须先引入vue, 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></...
  • 需求 省市区地址由前半部分的...2、在组件内引入 import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data' 其中: provin
  • 基于 vue 的elementui的无限滚动组件,全局引入elementui,代码简单易懂,参数少适合理解
  • Vue引入elementUI组件自定义样式,怎么修改到自己想要的样式?有大神可以教教不?
  • vue add elementui然后会自动生成element.js,运行起来后页面时一片空白的,这里原因是vue-cli3后,取消了Vue 这个对象。官方提供另一种方式(这个仔细看文档才知道):element-plus,具体操作可以点击跳转查看 在 ...
  • vue脚手架引入ElementUi

    千次阅读 2019-01-18 15:15:51
    安装命令:cnpm install element-ui --save 修改webpack.base.conf.js的配置 { test: /\\\\\\\\.css$/, ...打开src/main.js,引入下面的代码 ...import ElementUi from 'element-ui' ...Vue.use(ElementUi)  
  • 服务端项目不想搞前后端分离,又想用vue vueelementui版本必须匹配。 vue2 可以这样https://blog.csdn.net/milli236/article/details/80511044 vue3
  • 原因: Vue中默认App.vue自带的 margin-top: 60px; 去除即可,这是cli搭建的vue项目中自带的css,其他地方改都会被它覆盖
  • 然后想引入elementui时报错 #浏览器显示空白 检查报图示错误 #而当我去掉element相关包后又运行正常,这时发现原来v4.5.6版本实例对象不一样了 于是上网查询,发现了有遇到同样的问题的难友,他们最后都是通过...
  • vue引入ElementUI

    2019-09-25 08:55:24
    element国内网站:... 引入ElementUI命令:npm install element-ui --save (网速不好用cnpm) 在项目src目录下的main.js中引入: import ElementUI from 'element-ui' import 'element-ui/lib/theme-...
  • element UI select下拉选项位置问题在使用elementUI下拉选项时,可能存在下拉时下拉列表选项框的位置距离下拉框所在的位置距离过大,这个是由于elementUI自己设置的根据下拉框位置定位,而他可能是根据position:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,986
精华内容 4,794
关键字:

vue引入elementui

vue 订阅