vue element-ui使用

逃离我推掉我的手 2023-02-12 14:22 55阅读 0赞

vue的安装过程请查看
vue cli3 安装过程

创建完项目之后在项目引入element-ui,

  1. npm i element-ui -S

引入成功的插件都会在package.json中的这段文字中出现,
在这里插入图片描述
同时也可以看一下我们安装插件的进度条,是否显示成功,如果失败需要重新安装,如果还是不成功就清除之前的安装然后重新安装一遍
在这里插入图片描述
没有报错即可

接下来就在vue项目中引入element来使用,有两种引入方式,一种是全部引入,一种是按需引入,按需引入的话有些我们没有用到的组件就不会加载,减少了内存和减少了加载需要的时间等

全部引入

在main.js文件中

  1. import ElementUI from 'element-ui';
  2. import 'element-ui/lib/theme-chalk/index.css';
  4. Vue.use(ElementUI);

即
在这里插入图片描述
引入之后我们进行使用
比如在某个页面中使用element的组件

  1. <el-button type="primary">信息按钮</el-button>

页面就会显示
在这里插入图片描述
此时说明我们已经成功将element-ui加入项目,之后就可以尽情使用了

按需引入

按需引入我们需要引入插件来协助

  1. npm install babel-plugin-component -D

安装完了之后修改 .babelrc 文件
修改内容

  1. {
  2.   "presets": [["es2015", { "modules": false }]],
  3.   "plugins": [
  4.     [
  5.       "component",
  6.       {
  7.         "libraryName": "element-ui",
  8.         "styleLibraryName": "theme-chalk"
  9.       }
  10.     ]
  11.   ]
  12. }

由于我没有暴露这个文件出来,所以我就直接创建了一个 .babelrc,在根目录下面创建,把上面的那些内容放进去
然后我们在main.js中引入我们需要使用个的组件
比如

  1. import { Button } from 'element-ui';
  2. import 'element-ui/lib/theme-chalk/index.css';
  4. Vue.use(Button);

在这里插入图片描述
在页面得到的效果和全局引入的是一样的
在这里插入图片描述
接下来就是我们根据自己的需要引入组件即可

发表评论

表情：
评论列表 （有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读