Vue.js + Vuex + TypeScript 实战项目开发与项目优化

技术栈： Vue.js + Vuex + TypeScript

Todo List：

• 使用Vue CLI初始化项目
• 调整初始目录结构
  • 删除初始化的默认文件（对于我们项目是多余的组件components或者视图views）
  • 新增调整我们项目所需要的目录结构
• 使用TypeScript开发Vue项目
  • 直接使用vue CLI创建项目时选择使用TypeScript
  • 已有项目，使用@vue/cli添加Vue官方配置的TypeScript适配插件

  vue add @vue/typescript
  

• 编辑器选择 VS Code，对typescript提供较好的支持，开箱即用。如果开发了SFC单文件组件，可以选择安装Vetur插件。当然选择使用WebStorm等其他编辑器也可以的。
• typescript配置介绍
  • dependencies
    • “vue-class-component”: “^7.0.2”,
    • “vue-property-decorator”: “^8.1.0”,
  • devDependencies
    • “@vue/cli-plugin-eslint”: “^3.0.1”,
    • “@vue/cli-plugin-typescript”: “^3.0.1”,
    • “@vue/eslint-config-typescript”: “^4.0.0”,
    • “typescript”: “^3.4.3”,
  • typescript配置文件：tsconfig.json
• shims for Typescript： 对代码进行适配处理
  • src/shims-tsx.d.ts 作用是为JSX代码补充类型声明
  • src/shims-vue.d.ts 作用是识别*.vue文件返回值为Vue实例
• 使用TypeScript开发Vue项目
  • 使用OptionsAPI定义Vue组件

    <script lang="ts">
    import Vue from 'vue'
    export default Vue.extend({
           
    	data() {
           
    		return {
           
    			a: 1,
    			b: '2',
    			c: {
           },
    			d: []
    		}
    	},
    	methods:{
           
    		test() {
           
    			this.c() // error tips
    		}
    	}
    })
    </script>
    

    • 作用：1、编辑器给的类型提示； 2、TypeScript编译期间的类型验证。
  • 使用ClassAPIs定义组件vue-class-component

    import Vue from 'vue'
    import Component from 'vue-class-component'
    import home from "../views/home.vue";//导入组件
    
    @Component({
           
      components: {
            home },
      props: {
           
        propMessage: String
      }
    })
    export default class App extends Vue {
           
      // 初始 data
      msg = 123
    
      // use prop values for initial data
      helloMsg = 'Hello, ' + this.propMessage
    
      // 生命钩子lifecycle hook
      mounted () {
           
        this.greet()
      }
    
      // 计算属性computed
      get computedMsg () {
           
        return 'computed ' + this.msg
      }
    
      // 方法method5
      greet () {
           
        alert('greeting: ' + this.msg)
      }
    }
    

  • @component装饰器：用于扩展类class，扩展其属性或功能。
• 使用VuePropertyDecorator创建Vue组件
• 总结创建组件的三种方式：
  • OptionsAPI
  • Class APIs: @component({…}) `vue-class-component``
  • Class APIs + Property Decorator `vue-property-decorator``
  • 项目开发建议：No Class APIs, Just Use Options API。
    • 也就是不推荐在生产环境中使用Decorator语法。
    • Class Decorator 语法仅仅是一种写法而已，最终还是要转换为普通的组件数据结构的。
    • 使用 Options API最好是使用export default Vue.extend({...})，而不是export default {...}
• 约定使用对代码格式规范并遵循规范进行编码
  • 格式良好的代码更有利于：
    • 更好的多人协作
    • 更好的可阅读性
    • 更好的可维护性
  • 没有绝对的标准，大多采用大厂优秀的编码规范选择性采用对自己团队习惯写法：standard/airbnb/google等，仅供参考而已。
• 如何约束代码规范：采用工具来自动强制执行
  • JSLint
  • JSHint
  • ESLint
• Linter + Format： 项目中选择 ESList + Standard Config

  'extends': [
      'plugin:vue/essential',
      '@vue/standard',
      '@vue/typescript'
  ],
  

• 自定义代码格式规范

  rules: {
       
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production'