Vue + TypeScript 实战项目（一）

不梨
701 阅读5分钟

本系列将从零开始创建一个项目，文章将持续更新

项目代码： https://github.com/no-pear/edu-fed.git

搭建项目结构

一、创建项目

1）使用 Vue CLI 创建项目

  • 安装 Vue CLI
npm i @vue/cli -g
  • 创建项目
1. vue create xxx

2. 选择相应的配置

3. cd xxx // 进入你的项目目录

4. npm run serve // 启动开发服务

2）加入 Git 版本管理

  • 创建远程仓库
  • 将本地仓库推到线上
1. git init // 创建本地仓库

2. git add . // 将文件添加到暂存区

3. git commit -m 'xxx' // 提交历史记录

4. git remote add origin 远程仓库地址 // 添加远端仓库地址

5. git branch -M main // 更改分支名

6. git push -u origin main // 推送提交

3）初始目录结构说明

默认生成的目录结构我们进行一些小的调整：

  • 删除初始化的默认文件
    • src/views/About.vue
    • src/views/Home.vue
    • src/components/HelloWorld.vue
    • src/assets/logo.png
  • 新增调整我们需要的目录结构
    • src/services ⽬录，接⼝模块
    • src/utils ⽬录，存储⼀些⼯具模块
    • src/styles ⽬录，存储⼀些样式资源
  • 修改 App.vue
<template>
  <div id="app">
    <h1>hello world</h1>
    <!-- 跟路由出口 -->
    <router-view/>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  
})
</script>

<style lang="scss" scoped>

</style>
  • 修改 router/index.ts
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'

Vue.use(VueRouter)

// 路由配置规则
const routes: Array<RouteConfig> = []

const router = new VueRouter({
  routes
})

export default router
  • 最终目录结构：

4）TypeScript 相关配置介绍

  • 依赖项
dependencies说明
vue-class-component提供使用 Class 语法写 Vue 组件
vue-property-decorator在 Class 语法基础之上提供了一些辅助装饰器
DevDependencies说明
@typescript-eslint/eslint-plugin使用 ESLint 校验 TypeScript 代码
@typescript-eslint/parser将 TypeScript 转为 AST 供 ESLint 校验使用
@vue/cli-plugin-typescript使用 TypeScript + ts-loader + fork-ts-checker-webpack-plugin 进行更快的类型检查
@vue/eslint-config-typescript兼容 ESLint 的 TypeScript 校验规则
typescriptTypeScript 编辑器，提供类型校验和转换 JavaScript 功能
  • TypeScript 配置文件 tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
  • shims-vue.d.ts
// 主要用于 TypeScript 识别 .vue 文件模块
// TypeScript 默认不支持导入 .vue 模块，这个文件告诉 TypeScript 导入 .vue 文件模块都按 VueConstructor<Vue> 类型识别出来
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}
  • shims-tsx.d.ts
// 为 jsx 组件模板补充类型声明
import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element extends VNode {}
    // tslint:disable no-empty-interface
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

二、代码格式规范

1）标准是什么

没有绝对的标准，下面给大家提供一些大厂制定的编码规范：

2）项目中的代码规范

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  // 使用插件的编码校验规则
  extends: [
    'plugin:vue/essential', // eslint-plugin-vue
    '@vue/standard', // @vue/eslint-config-standard
    '@vue/typescript/recommended' // @vue/eslint-config-typescript
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  // 自定义编码校验规则
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}
avatar
文章
阅读
粉丝