vuecli3 element按需加载按需引入(包括样式)

自从项目进行前后端分离之后,大部分时间都是在用weui(we-vue组件库)的css样式做公众号等前端网页开发。

近期公司准备为统一用户项目做一个管理控制台,我就准备使用Vue + element-ui做框架进行开发,具体选型好处就不再详细说明了,这里简单说一下使用vue-cli 3脚手架新建的项目按需引入element-ui的步骤流程及中间我遇到的问题。

一、按需引入步骤

首先我们按照官网进行install安装操作:
1.安装element-ui

npm i element-ui -S

2.安装按需引入必要插件

npm install babel-plugin-component -D

3.修改babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    // element官方教程
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

4.在main.js中按需引入你要用到的组件,比如Button按钮

import { Button } from "element-ui";
Vue.use(Button);

5.示例:在.vue文件下新增

<el-button type="primary">主要按钮</el-button>
  1. 运行查看引入效果
npm run serve

二、开发过程中遇到的问题

3.然后,将 .babelrc 修改为:
.babelrc ???哪儿呢?项目中没有啊。难道让我新建?
新建.babelrc文件然后按照官网进行ctrlc+ctrlv。完美!
4.在 main.js 中引入你要用到的组件,例如Button

import { Button } from 'element-ui';
Vue.use(Button);

5.引入成功了,那么我们开始使用吧:在components下的HelloWorld.vue中添加代码测试

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

6.npm run serve报错了?
在这里插入图片描述
没有babel-preset-es2015 ?
你好,babel-preset-env,再见,babel-preset-2015
不安装babel-preset-es2015,安装babel-preset-env

npm install babel-preset-env@next --save

然后.babelrc 修改为

{
    "presets": [["env", { "modules": false }]],
    "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  }

重新npm run serve

结果发现,组件进来了,但是样式呢?被你吃了?
在这里插入图片描述
无奈,但是没有什么能难到我,山人自有妙计
在这里插入图片描述
点开第一个:
// css样式还是需要全部引入 ???
要不起,不过将按需引入的代码分割成单独文件的意见还是不错的,不过我的需求是不希望main.js太长。

接着下一个、下一个、下一个…
怎么都说需要单独引入全部css样式?Are you kindding me?
嗯,一定是我打开方式不对
在这里插入图片描述
说好的优雅呢?怎么还需要单独引入css样式?
思考:vuecli 3 我把相关配置写到babel.config.js行不行?
删除.babelrc,修改babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    // element官方教程
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

奈何本人没文化…竟然可以了!!!
我走过最远的路恐怕就是你的套路。

发布了46 篇原创文章 · 获赞 37 · 访问量 13万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览