vue按需引入Element UI的方法

在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到。

首先我们先vue create demo创建一个项目出来此时我们的项目是这样的

此时我们在终端输入

vue add element

  

可以看到让我们选择全部引入还是按需引入,此时我们选择按需引入,Import on demand

然后选择zh-CN,这时候我们可以看到此处多了一个plugins的文件夹,里面有一个element.js的文件,并且main.js中多了一个import的内容。然后如果我们仔细观察的话会发现其实babel.config.js也是注入了相关内容的。

从element官网我们可以看到是按照这种方式按需引入的,但是使用vue add element的这种方式的话,则无需按照这种方式进行单独配置。

那么element.js文件是什么呢?我们且来一看,我们具体是如何按需引入的呢?

然后我们就可以直接在页面直接使用啦,注意使用element的哪一个组件的话,都需要在本文件进行引入、使用的。

原文地址:https://www.cnblogs.com/gitByLegend/p/10960504.html

时间: 2024-10-01 07:14:07

vue按需引入Element UI的方法的相关文章

如何在vue项目中引入element ui组件

(1)安装element ui,即: npm i element-ui -S 然后在项目中的node_modules目录下查看是否有element-ui文件夹,如果有说明安装成功了: (2)引入element ui 在main.js中引入element ui,即: 1 import ElementUI from 'element-ui' 2 import 'element-ui/lib/theme-chalk/index.css' 3 Vue.use(ElementUI) [注意红色部分,以前是

在Vue框架中引入Element

文章会讲到如何在Vue框架中引入Element 那我们先来说一下Vue框架:Vue是渐进式,JavaScript框架.很多人不理解什么是渐进式,简单点讲就是易用.灵活.高效(没有太多限制) 这里介绍npm安装方式: 打开cmd,找到你Vue项目的路径 运行 npm i element-ui -S 然后在main.js里写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/

quasar框架引入element ui 组件

在使用quasar 框架时,不能满足部分需求,例如quasar不支持级联组件.table树形数据,因此引入element ui插件 .一直以为在quasar项目中执行:npm i element-ui -S然后在main.js中全局引入:,然而并不是~,这样引入使用element ui组件时会报组件未定义的"错误!",quasar 的全局配置是boot目录下,如下:查看quasar的CLI文档:正确的写法:配置完毕!!! 原文地址:https://blog.51cto.com/1356

vue按需引入echarts

下载安装echarts包:npm install echarts -D 一.全局引入 main.js中配置 import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts //引入组件 缺点:如果是完整的引入Echarts,会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加载耗时过长,影响用户体验 二.按需引入 如果是在许多页面中都有用到,就写在main.js中 //引入基本模板 let echart

vue按需引入/全局引入echarts

npm install echarts -S 1.按需引入 新建echarts.js公共引入 // 文件路径 @/lib/echarts.js 自行配置 // 加载echarts,注意引入文件的路径 import echarts from 'echarts/lib/echarts' // 再引入你需要使用的图表类型,标题,提示信息等 import 'echarts/lib/chart/bar' import 'echarts/lib/component/legend' import 'echar

vue模块化(echart+element ui)

最近看了下vue的框架,随手做了个项目,记录分享下 技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图 主要是配置的是npm 打包命令 和引入vue-route vue的路由文件 和element ui 文件 下面这个是 引入echart.js 文件, 基本资料就这些. 首先我们开始构建一个vue-cli项目 1.首先node环境(这里就不多啰嗦了) 2.执行vue-cli命令 npm install --gl

vue+vuex+router+element ui

1. cnpm install -g vue-cli 项目的main.js引入import Vue from 'vue' 2. 创建项目 vue init webpack +项目名称 3.  cnpm install ----->下载依赖文件 npm run dev ----->运行项目 4.config文件夹,下面的index.js里面修改port端口号 /////////////////////////////////////// 好像vue 在2.0之后自动的就引入了router和vue

Vue 实现 Element 的按需引入

使用 Vue-Cli 脚手架创建 Vue 项目实现 Element 的按需引入 安装 element-ui 和 babel-plugin-component 和 babel-preset-es2015 依赖 npm intall element-ui --save npm install babel-plugin-component -D npm install babel-preset-es2015 -D 修改 .babelrc 文件 { "presets": [["es2

【vue开发问题-解决方法】(二)element UI日期控件失效

问题:在vue项目中使用elementUI,使用日期控件的时候出现错误 而正常情况下,点击日期控件会出现以下面板: 查看代码:与elementUI官网中的代码一致,绑定的数据也都是data:''形式 然后又看了控制台输出的错误信息:堆栈溢出 网上查看这些信息都是js问题,但是vue的js和elementUI的js都是压缩版不能调试,因为vue和elementUI都是使用CDN引入的,所以猜想是否是elementUI的CDN引入文件错误,改用官网的网络链接,也没用.突发奇想将elementUI引入