Upgrade to Vue 3 and Ant Design Vue 3

[bunnyxt]

referece:

• Vue 3 Migration Guide
• V1 to V2
• V2 to V3

[bunnyxt]

Nov 9

Updates

• start work on branch refactor/vue3
• upgrade node version to v16.13.2
• use vite instead of vue-cli
• change project folder structure in align with vite
• upgrade vue from 2.6.11 to 3.2.41
• upgrade all the dependencies to the latest version, except vue-wechat-title
• create AppNew as the temp root app for test

Next

• migrate vue-router first
• use Pinia instead of Vuex
• use composition api instead of option api in each vue component
• check vue-wechat-title works or not, find substitutes if not works any more

[bunnyxt]

Nov 24

Updates

• ESLint extends plugin:vue/essential -> plugin:vue/vue3-recommended
• set :key property on template of v-for (vue3 new rule)
• upgrade vuex to v4
• Vue.prototype.$util -> app.config.globalProperties.$util (vue3 new syntax)
• Vue.prototype.$config -> app.config.globalProperties.$config (vue3 new syntax)
• upgrade vue-i18n to v9, add @intlify/vite-plugin-vue-i18n to use i18n block
• a.hasOwnProperty(b)-> Object.prototype.hasOwnProperty(a, b)
• upgrade vue-router to v4

Next

• router.js -> router/index.js
• user system check in main.js
• config load from .env
• util refactor to utils, do not mount it to app.config.globalProperties.$util, import from utils directly

[bunnyxt]

Dec 21

Updates

• router.js -> router/index.js
• use ant design components
• change locale via this.$i18n.locale
• change i18n tag to i18n-t and change property path to keypath
• slot="xx" slot-scope="yy" -> #xx="yy"
• import icon directly instead of use a-icon

Next

• auto use ant design components (tree shaking), ref: https://antdv.com/docs/vue/introduce-cn#示例
• fix bug when locale changed, width of header menu item will change
• remove unnecessary this. in the template
• <img /> -> <img >

[bunnyxt]

Dec 23

Updates

• <img /> -> <img >

[bunnyxt]

Dec 24

Updates

• use VueRecaptcha instead of VueGrecaptcha
• remove manually import recaptcha script
• refactor(a-menu): v-model -> v-model:selectedKeys
• refactor(a-modal): v-model -> v-model:visible
• refactor(a-radio-group): v-model -> v-model:value
• refactor(a-checkbox-group): v-model -> v-model:value
• refactor(a-select): v-model -> v-model:value
• refactor(a-input): v-model -> v-model:value
• specify other v-model: (a-range-picker, a-textarea, a-auto-complete, a-pagination)
• a-week-picker -> a-date-picker picker="week"
• remove vue-wechat-title, custom naive wechat-title directive

[bunnyxt]

Jan 6

Updates

• refactor TddVideoAbidAutoComplete using vue3 custom v-model and antdv3 auto complete
• a-list <template #renderItem="item"> -> <template #renderItem="{ item }">

Next

• avoid let that = this, using () => {} in callback functions
• use PascalCase naming of custom components in SPF template instead of kebab-case

[bunnyxt]

Jan 7

Updates

• a-table use #bodyCell to custom table cell render
  • TddDonateLogList
  • TddMemberLogTable

[bunnyxt]

Jan 27

Updates

• refactor: extract statistics display into TddStatistics component
• refactor: include data fetching logic into TddDonateLogList

[bunnyxt]

Jan 28

Updates

• home page clean up
  • extract carousel blocks into components
    • TddUpdateLogList
    • TddIntro
  • clean up styles