插件 es-vue

es-vue 主要集成了 VUE 的实现,使用类组件的开发方式来统一WEB组件的语法,默认集成了Element UI, 开箱即用不需要单独配置或者引用。如果使用的是VUE3则引用的是element-plus否则为element-ui。

选项配置

在初始化工程时会根据选择的插件自动生成选项配置。

es.config.js

module.exports = {
plugins:[{
    name:"es-vue",
    options:{
        //webpck 打包时需要用的样式加载器,默认会加上 css-loader, style-loader
        styleLoader:[],
        //vue 版本
        version:"3.0.0",
        //是否需要自动加上key属性
        fillKey:['for','each','if','else'],
        //是否需要使用优化
        optimize:true,
        //热更新
        hot:false,
        //热更新接口
        hmrHandler:'module.hot',
        //导入element-plus ems 的文件
        importModuleFlag:true,
        
        //引用ui的样式
        //可用的值为: none 不引用, sass 预处理样式, css 已构建好的样式 
        css:'sass', //none sass css
        resolve:{
            imports:{
                '#es-vue-web-application-style':'element-plus/theme-chalk/base.css'
            },
            folders:{}
        },
        //编译宏配置,继承es-javascript
        metadata:{
            version:"3.0.0"
        },
        //是否构建为服务端
        ssr:false,
        //是否引用ui全包,不按需加载
        uiFully:false,
        //指定vue-loader
        vueLoader:null,
        //构建vue格式, 仅支持 vue-template 和 default
        format:'default', //vue-raw vue-jsx vue-template
        //在使用 vue-template 格式时需要在vue全局暴露的属性
        exposes:{
            globals:['Math','Date'],
            exposeFilter:(name)=>!['window','document'].includes(name)
        },
        //vue 编译的选项
        vueOptions:{
            __file:false,
            __ssrContext:true,
            __vccOpts:false,
            __asyncSetup:{
                mode:'none', //ssr nossr all none,
                filter:null,
            }
        },
        //是否在导入资源时加上查询条件
        importSourceQuery:{
            //是否启用
            enabled:false,
            //一个正则表达式,判断导入资源
            test:null,
            //判断是否为vue组件。如果指定了test会以test为准
            types:['component', 'styles'],
            query:{
                vue:''
            }
        },
        //样式作用域ID前缀
        scopeIdPrefix:'data-v-',
        //页面目录,默认会把此目录下的文件当作路由页面并自动生成路由配置。如果不需要设置为false
        pageDir:'pages',
        //语言目录,默认会把此目录下的文件生成为语言配置
        localeDir:'locales',
        //一个正则表达式,根据文件路径排除页面路由
        pageExcludeRegular:null,
        //项目的配置文件名,如果有配置默认可以通过组件的 getConfig 方法获取到
        projectConfigFile:'.env',
    }
}]}