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

来源：互联网 2024-10-13 00:52:28

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": ["&gt; 1%", "last 2 versions", "not ie <p>8、在webpack.base.conf.js加入下面一句<br></p><pre class="brush:php;toolbar:false">{ 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" ,重新安装即可，这就可以启动了