使用vue单页面开发按需加载使用UI库

程序员文章站 2024-02-01 08:20:22

...

在日常开发中，为了优化性能，较少前端代码量，一般在使用其他框架时会采用按需加载的方式引入使用，以下以vue-cli3为例如何使用element-UI：

step1 安装element-ui

npm i element-ui -S

step2 安装按需引入的babel-plugin-component

npm install babel-plugin-component -D

step3 配置.babelrc 文件

在根目录新建.babelrc 的文件配置如下

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

step4 重启服务遇到报错解决方案

使用vue单页面开发按需加载使用UI库
解决

将配置里面的es2015改成 babel-preset-env即可

step5 在入口文件main.js配置

需要注意的是，在使用向message这种js插件时，需要把这个message的方法通过Vue.prototype方法挂载到vue实例中去，每个页面就可以通过this.$message（）的方法直接使用啦;
再就是要区别像Button这种是属于ui组件，使用就直接使用Vue.use(Button)的方法注册标签组件，其他页面就可以直接使用<el-button></el-button>标签直接使用了。

//按需引入element-UI 的Button, Select组件，
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */
// 按需引入element-ui的message的js插件
import {Message } from 'element-ui'
//全局配置js插件
Vue.prototype.$message = Message;
//使用Massage
Vue.use(Message)

使用vue单页面开发按需加载使用UI库