vue2.0 篇

主要依赖

  -  vue-router
  -  vuex 

• typescript
  • vue-property-decorator 实现2.0 vue+ ts 开发主要的库 依赖 vue-class-component
  • vuex-class 实现2.0 ts 使用vuex

• axios 请求工具
• moment 处理日期格式 日期计算等使用的库
• element-ui pc 端 ui组件库
• vant 移动端 ui组件库
• sass-loader

• scp2 自动部署的库 自动将打包好的文件上传到服务器指定路径 （后续考虑废弃 搭建持续集成）

  基础示例 正常使用

<template>
    <div>
        <span>{{model}}</span>
        <button @click="computedCount(2)"></button>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Prop, PropSync} from 'vue-property-decorator';

    import {Action, namespace} from "vuex-class";
    @Component
    export default class test extends Vue{
        // 引入Prop
        @Prop(Number)  searchWarp!: number;

        // 引入vuex - userModule 中的 action 方法 示例
        @Action('Login', {
            namespace: 'userModule'
        }) SET_LOGIN : any;


       // 生命周期
        public mounted () {

        }

        // 路由跳转
        public goNextUrl () {
            this.$router.push('/xxx')
        }

        public model:number = 1;
        public computedCount (model: number) {
            this.model = model
        }
    }
</script>

混入mixin

<template>
    <div>
        <span>{{model}}</span>
        <button @click="computedCount(2)"></button>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Prop, PropSync, Mixins} from 'vue-property-decorator';
    import roleMixins from '@/assets/util/roleMixin';
    import roleMixins1 from '@/assets/util/roleMixin1';

    import {Action, namespace} from "vuex-class";
    @Component
    export default class test extends Mixins(roleMixins, roleMixins1){
        // 引入Prop
        @Prop(Number)  searchWarp!: number;

        // 引入vuex - userModule 中的 action 方法 示例
        @Action('Login', {
            namespace: 'userModule'
        }) SET_LOGIN : any;


       // 生命周期
        public mounted () {

        }

        // 路由跳转
        public goNextUrl () {
            this.$router.push('/xxx')
        }

        public model:number = 1;
        public computedCount (model: number) {
            this.model = model
        }
    }
</script>

vue 3.0篇

• typescript

• vue-router (next)版本 注意是适用于vue3.0的版本

• vuex (next版本) 注意是适用于vue3.0的版本

• axios 请求工具

• vant (next)版本 注意是适用于vue3.0的版本

• element-ui vue3.0版本

• sass-loader

• scp2 自动部署的库 自动将打包好的文件上传到服务器指定路径 （后续考虑废弃 搭建持续集成）

  由于vue3.0 全部使用ts 重写 所以使用ts开发无需再引入外部库支持

基础使用

<template>
    <div @click="addCount">{{count}}</div>
    <div @click="useGroup.addCount">{{useGroup.count}}</div>
</template>


<script lang="ts">
    import {onMounted, defineComponent, reactive, toRefs, ref} from 'vue';
    import {useRouter, useRoute} from 'vue-router';
    import {useStore} from 'vuex';
    import {subuserInfo} from '@/type/typs';

    export interface groupType {
      addCount:() => void,
      count: number,
    }

    export default defineComponent({
      // mixin 正常使用
      mixins: [],
      name: 'test',
      setup () {
        // 生命周期钩子
        onMounted(() => {
            // do something
        })

        // vue-router 使用路由跳转 获取参数等
        // 路由跳转
        const router = useRouter()
        router.push('/xxx')
        // 获取路由参数
        const route = useRoute();
        const params = route.params.id;

        // 使用vuex

        const store = useStore();

        // 提交mutation
        store.commit('xxx')
        // 触发action
        store.dispatch('xxx')
        // 获取state
        let userId = store.state.userInfo.userId;

        // 双向绑定的方式 其一 ref
        const count = ref<number>(0);

        const addCount = () => {
            count.value = count.value + 1; // 这里必须使用value 但再模板中不用 因为会被自动解析
        };


        const group:groupType = reactive({
            count: 1,
            addCount: () => {
              group.count = group.count + 1;
            }
        });

       // 使用reactive 必须 配合toRefs 进行 传出 reactive 再 js中 不会像ref存在value 但是模板中会使用到value 进行显示 所以 需要toRefs 进行封装提供给模板调用
        const useGroup = toRefs(group)

        return {
          count,
          addCount,
          useGroup
        }
      }

    })
</script>

开发注意事项

• 后续项目中代码要配合注释

   /**
      * @author 作者
      * @method 方法名 
      * @param 参数 无参 void 即可
      * @type 类型
      * @return 传出
      * @description 详细描述
      * 
      * */
  

• 开发中文件夹设计根据模块区分 图片与公用的资源放到静态资源文件夹image 和 css 文件中

  每个页面都有自己的sass/ css ts 文件 ts中 类型和用到的请求方法

  例如
     login
         - login.vue
      - login.scss
      - login.ts
  

• 根据env 文件 区分当前运行环境 进行不同的打包配置以及接口地址

  .env.test
  
  NODE_ENV = 'test'
  VUE_APP_NODE_ENV = 'test'
  VUE_APP_LOGIN_URL = 'http://xxxx'
  VUE_APP_MAIN_URL = 'http://xxxxx/'
  

在页面中使用 process.env.VUE_APP_NODE_ENV 获取当前环境变量 等等..

• 相同业务逻辑使用同一类型组件 目前已有的组件会在组件目路介绍

• 只使用 tslint来检查与约束代码 不做过多的代码约束 避免影响开发效率

• css 命名系列规范暂未想好 后续更新

• 注意方法的复用 与业务逻辑的抽离