vue3

基于Vue3+vite框架，采用GitHub Action 实现自动构建、部署

Vue2 VS Vue3

生命周期

• 

语法差异总结：

1. 组件封装：.sync标识

           ❌ <Dgl :visible.sync="isShowDgl" :title="title"> </Dgl>
           error: '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead.
           ✅ <Dgl v-model:visible="isShowDgl" :title="title" @confirm="confirmFn"></Dgl>
         

2. 组件定义

           v2: export default {}
           v3: export default defineComponent({})
         

   在 Vue 3 的 Composition API 中，采用了 setup() 作为组件的入口函数。 在结合了 TypeScript 的情况下，传统的 Vue.extend 等定义方法无法对此类组件给出正确的参数类型推断，这就需要引入 defineComponent() 组件包装函数，其在 rfc 文档中的说明为：文档说明

3. 组件封装：emit方法使用前需要先注册
4. 组件封装：导入动态组件

         import { defineAsyncComponent } from 'vue'
         components: {
           RoleConfig: defineAsyncComponent(() => import('./roleConfig.vue'))
         },
         

5. html元素ref对象

           html:
           <el-form ref="formRef" :model="formData" inline label-width="0px" size="small"></el-form>
           js: 定义和调用
           const formRef: Ref = ref(null)
           formRef.value.resetFields()
         

6. 动态定义的ref: getCurrentInstance

           html:
           <TabTable v-if="activeTab === item.platform" :ref="item.platform+'Ref'" :permissionTreeData="item.permissionTreeData" :platformType="item.platform" :disabled="false"></TabTable>
           js:
           import { getCurrentInstance } from 'vue'
           const currentInstance: any = getCurrentInstance()
           fn (oldPlatformType) {
             currentInstance.refs[oldPlatformType + 'Ref'].getCurrentCheckedData()
           }
         

7. html元素ref对象

           html:
           <el-form ref="formRef" :model="formData" inline label-width="0px" size="small"></el-form>
           js: 定义和调用
           const formRef: Ref = ref(null)
           formRef.value.resetFields()
         

8. 路由：官方文档

           import { useRoute, useRouter } from 'vue-router'
           const route = useRoute()
           const router = useRouter()
           router.push(path)
           route.query.roleId
         

9. 导航守卫

           import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
           // 与 beforeRouteLeave 相同，无法访问 `this`
           onBeforeRouteLeave((to, from) => {
             const answer = window.confirm(
               'Do you really want to leave? you have unsaved changes!'
             )
             // 取消导航并停留在同一页面上
             if (!answer) return false
           })
           const userData = ref()
           // 与 beforeRouteLeave 相同，无法访问 `this`
           onBeforeRouteUpdate(async (to, from) => {
             //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
             if (to.params.id !== from.params.id) {
               userData.value = await fetchUser(to.params.id)
             }
           })
         

启动、部署

how to start

 #创建项目
 npm init vite-app <project-name>
 cd <project-name>
 npm install
 npm run dev

 #本地启动
 npm run dev

 #打包
 npm run build

GitHub pages站点

• 使用 Jekyll 创建 GitHub Pages 站点

github Action

• GitHub Actions 入门教程

• 什么是 GitHub Action 么？React项目实配

• 官方服务：https://github.com/actions