您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

利用vue+elementUI部分引入组件的实现方法

2024/2/27 9:58:30发布14次查看
vue.js的ui组件库,在git上有多个项目,我见的使用者比较多的是iview和element.两个组件库,组件都很丰富。本文主要给大家介绍了关于利用vue+elementui实现部分引入组件的相关资料,以及介绍了vue引入elementui报错的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
官网的介绍
iview: 一套基于 vue.js 的高质量 ui 组件库
element,一套为开发者、设计师和产品经理准备的基于 vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。
两者各有优缺点,不多评论,根据自己的需求,我最后使用了element。因为最近公司开发一个很小的后台项目,所以考虑部分引入element的组件,因为第一次单独引入没有经验,网上看了很多都有这样那样的问题,个人感觉官网也没把我说明白(也许自己水平太低了),所以自己研究了一下亲测有效,如有错误欢迎指出。
实现方法
1、安装vue-cli
npm install -g vue-cli
2、创建项目projectname是你项目的名字
npm install webpack projectname
3、进入项目目录
cd projectname
4、初始化项目安装依赖
npm install
5、安装elementui
npm install element-ui --save -dev
6、首先确定项目是否有style-loader和babel-plugin-component 若没有npm一个
npm install xxx --save -dev
7、简单粗暴点,找到.babelrc 把原文件内容全部删除,粘贴下面代码
{ presets: [[env, {      modules: false,      targets: {browsers: [> 1%, last 2 versions, not ie <= 8]}     }],     stage-2],   plugins: [      transform-runtime,      [component,[      {      libraryname:element-ui,      stylelibraryname:theme-default //1.4的老项目用这个,2.0的用theme-chalk,假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了      }      ]]      ],   comments:false,      env: {   test: {    presets: [env, stage-2],    plugins: [istanbul]   }   }  }
8、在webpack.base.conf.js加入下面一句
{  test: /\.css$/,  loader: 'style-loader' },
9、在mian.js中引入
import { button,input } from 'element-ui'  vue.use(button)  vue.use(input)
10、然后就可以使用button和input了
vue引入elementui 报错
在main.js里面引入import 'element-ui/lib/theme-default/index.css'中报错,无法启动项目,这是把package.json里面的webpack改成webpack: beta ,重新安装即可,这就可以启动了
相关推荐:
vue2.0、elementui实现表格翻页
vue element-ui input 远程搜索实例详解
使用vue element-ui 写个复用table组件
以上就是利用vue+elementui部分引入组件的实现方法的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product