This series will create a project from scratch and articles will continue to be updated

Project code: https://github.com/no-pear/edu-fed.git

Build the project structure

Create a project

1) Create a project using the Vue CLI

  • Install the Vue CLI
npm i @vue/cli -g
Copy the code
  • Create a project
CD XXX // go to your project directory 4. NPM run serve // Start the development serviceCopy the code

2) Add Git version management

  • Creating a remote repository
  • Push local warehouses online
Git commit -m 'XXX' // commit history. 4. Git remote add origin // Add the remote repository address 5. Git branch -m main // Change the branch name 6Copy the code

3) Initial directory structure description

We made some minor adjustments to the default generated directory structure:

  • Delete the initialized default file
    • src/views/About.vue
    • src/views/Home.vue
    • src/components/HelloWorld.vue
    • src/assets/logo.png
  • Added tweaks to the directory structure we need
    • SRC /services directory, interface module
    • The SRC /utils directory, which stores some utility modules
    • The SRC /styles directory, which stores some style resources
  • Modify theApp.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>Copy the code
  • Modify therouter/index.ts
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'

Vue.use(VueRouter)

// Route configuration rule
const routes: Array<RouteConfig> = []

const router = new VueRouter({
  routes
})

export default router

Copy the code
  • Final directory structure:
Copy the code

4) TypeScript configuration introduction

  • dependency
dependencies instructions
vue-class-component Provide useClassSyntax to write Vue components
vue-property-decorator Some auxiliary decorators are provided on top of the Class syntax
DevDependencies instructions
@typescript-eslint/eslint-plugin useESLintValidates TypeScript code
@typescript-eslint/parser Convert TypeScript to AST for ESLint validation
@vue/cli-plugin-typescript Use TypeScript + TS-loader + fork-ts-checker-webpack-plugin for faster type checking
@vue/eslint-config-typescript TypeScript validation rules compatible with ESLint
typescript TypeScript editor that provides type validation and JavaScript conversion capabilities
  • TypeScript configuration filestsconfig.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"]}Copy the code
  • shims-vue.d.ts
// Primarily used for TypeScript recognizing.vue file modules
// TypeScript doesn't support importing.vue modules by default. This file tells TypeScript to import.vue modules as VueConstructor< vue > types
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

Copy the code
  • shims-tsx.d.ts
// Add a type declaration for the JSX component template
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; }}}Copy the code

Second, code format specification

1) What are the criteria

There is no absolute standard, the following to provide you with some large factory code specification:

  • JavaScript Standard Style
  • Airbnb JavaScript Style Guide
  • Google JavaScript Style Guide

2) Code specifications in the project

.eslintrc.js

module.exports = {
  root: true.env: {
    node: true
  },
  // Use the code validation rules for the plug-in
  extends: [
    'plugin:vue/essential'.// eslint-plugin-vue
    '@vue/standard'.// @vue/eslint-config-standard
    '@vue/typescript/recommended' // @vue/eslint-config-typescript].parserOptions: {
    ecmaVersion: 2020
  },
  // Custom code verification rules
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'}}Copy the code

  • eslint-plugin-vue

    • GitHub Repository: github.com/vuejs/eslin…
    • Official document: eslint.vuejs.org/
    • This plugin allows us to use ESLint to check.vue files