diff --git a/projects/vue-2-base/emp-config.js b/projects/vue-2-base/emp-config.js index bd6e5a80..9af7911f 100644 --- a/projects/vue-2-base/emp-config.js +++ b/projects/vue-2-base/emp-config.js @@ -3,8 +3,8 @@ const {defineConfig, empStore} = require('@efox/emp') const esm = (name, mode, version) => `https://esm.sh/${name}${version ? '@' + version : ''}${mode === 'development' ? '?dev' : ''}` module.exports = defineConfig(({mode, env}) => { - const target = 'es2018' - // const target = 'es5' + // const target = 'es2018' + const target = 'es5' const isESM = !['es3', 'es5'].includes(target) return { plugins: [vue2], @@ -21,25 +21,28 @@ module.exports = defineConfig(({mode, env}) => { './Content': './src/components/Content', './Table': './src/components/table', './CompositionApi': './src/components/CompositionApi', + './store': './src/store/index', }, // shared: ['vue', 'element-ui', 'vue-router'], - shared: { - vue: {requiredVersion: '^2.0.0'}, - 'element-ui': {requiredVersion: '^2.0.0'}, - 'vue-router': {requiredVersion: '^3.0.0'}, - }, - // shareLib: !isESM - // ? { - // vue: 'Vue@https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js', - // 'element-ui': [ - // 'ELEMENT@https://unpkg.com/element-ui/lib/index.js', - // `https://unpkg.com/element-ui/lib/theme-chalk/index.css`, - // ], - // } - // : { - // vue: esm('vue'), - // 'element-ui': esm('element-ui'), - // }, + // shared: { + // vue: {requiredVersion: '^2.0.0'}, + // 'element-ui': {requiredVersion: '^2.0.0'}, + // 'vue-router': {requiredVersion: '^3.0.0'}, + // }, + shareLib: !isESM + ? { + vue: 'Vue@https://unpkg.com/vue@2.6.14/dist/vue.min.js', + vuex: `Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js`, + 'element-ui': [ + 'ELEMENT@https://unpkg.com/element-ui/lib/index.js', + `https://unpkg.com/element-ui/lib/theme-chalk/index.css`, + ], + } + : { + vue: esm('vue'), + vuex: esm('vuex'), + 'element-ui': esm('element-ui'), + }, }, } }) diff --git a/projects/vue-2-base/src/bootstrap.js b/projects/vue-2-base/src/bootstrap.js index 1e7af701..3581de5e 100644 --- a/projects/vue-2-base/src/bootstrap.js +++ b/projects/vue-2-base/src/bootstrap.js @@ -1,5 +1,9 @@ import Vue from 'vue' +import Vuex from 'vuex' +Vue.use(Vuex) +import store from '@/store' import App from '@/App' + // composition-api shareLib 可以不操作 import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI) @@ -18,5 +22,6 @@ Vue.config.productionTip = false new Vue({ router, + store, render: h => h(App), }).$mount('#emp-root') diff --git a/projects/vue-2-base/src/components/Content.vue b/projects/vue-2-base/src/components/Content.vue index 62984417..6c80be2c 100644 --- a/projects/vue-2-base/src/components/Content.vue +++ b/projects/vue-2-base/src/components/Content.vue @@ -1,12 +1,23 @@ - {{ title }} - Vue2 Add Button - Prop: {{ dataProps }} - ============ button component start ============= - - - ============ button component end ============= + Vuex Store : {{ $store.state.count }} + More... + + + + Vuex Store : {{ $store.state.count }} + + + {{ title }} + Vue2 Add Button + + + prop: {{ dataProps }} + + + + + @@ -23,6 +34,7 @@ export default { }, data() { return { + isMore: false, title: 'EMP Vue2 Component From BASE!', } }, @@ -33,6 +45,13 @@ export default { // console.log(this.$listeners) }, methods: { + showMore() { + this.isMore = !this.isMore + }, + increment() { + this.$store.commit('increment') + // console.log(this.$store.state.count) + }, add() { console.log('click event') // Vue2 使用 Vue3 传过来的自定义事件需要把函数名 kebab-case 改为 camelCase 再加前缀 on @@ -43,7 +62,25 @@ export default { } -
============ button component start =============
============ button component end =============
More...