欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 21:49:04
前言 vue.js的ui组件库,在git上有多个项目,我见的使用者比较多的是iview和element.两个组件库,组件都很丰富。 官网的介绍 iview:...

前言

vue.js的ui组件库,在git上有多个项目,我见的使用者比较多的是iview和element.两个组件库,组件都很丰富。

官网的介绍

  • 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" ,重新安装即可,这就可以启动了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。