vue3.0+vite2.0+ts Frame building

Written in the beginning

To better understand the front end vue3.0+vite2.0+ts Project development , This is to sort out the steps of the whole project framework construction , In order to learn

1、 Use vite establish Vue project

# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, Need extra double horizontal lines ：
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue
 Copy code 

Supported template presets include ：

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts
• lit-element
• lit-element-ts

2、 Modify the project directory 、 The significance of unified project fixed directory

The resulting directory is as follows ：

|-- .vscode vscode Workspace configuration
| |-- settings.json Detailed configuration json Unified vscode style
|-- dist The directory generated by project packaging
|-- node_modules Installed dependency packages
|-- public public Static resources in are copied to the output directory (dist) in
|-- src Main documents of the project
| |-- api Interact with the back end using related methods and configurations
| | |-- services The corresponding component uses api Methods and data processing methods
| | | |-- instance.js Encapsulation uses axios Request methods and interceptors
| | | |-- xxx.js Each component or module page api
| | |-- config.js Project configuration production , Development , Test interface configuration
| | |-- index.js services Of documents api Unified export , Convenient for module use
| | |-- resource.js Constants used globally
| |-- assets Put some static resources , For example, pictures , Icon , typeface
| |-- conponents Some common components
| |-- config
| |-- layout Project public lauout Templates
| |-- lib
| |-- plugins
| |-- router vue-router Related configuration
| | |-- index.js Export routing configuration
| | |-- modules All project modules are routed
| | |-- error.js Wrong page routing
| | |-- router.js Collection module route and error page route export all routes
| |-- store vuex Related configuration
| | |-- global overall situation vuex Configuration used
| | | |-- actions.js overall situation vuex actions Method
| | | |-- index.js Export Global vuex To configure
| | | |-- mutations.js overall situation vuex mutations Method
| | | |-- state.js overall situation vuex state Method
| | |-- modules Modular vuex
| | | |-- index.js take modules All module exports under
| | | |-- xxx.js Component corresponding vuex modular
| | |-- index.js export vuex All configurations
| |-- util Encapsulated utility functions
| |-- views All the routing components
| |-- |-- xxx/xxx Route the corresponding file
| | | |-- Child/xxx Routing corresponding sub routing file
| |-- App.vue Top level routing of routing components
| |-- main.js vue Entrance file
| |-- shims-vue.d.ts For resolution VScode Can't find vue Module problem
|-- env.xxx Multi environment running configuration environment variable file
|-- .gitignore Configuration is not submitted to git Warehouse documents
|-- .eslintrc.js Eslint The configuration file
|-- .eslintignore To configure Eslint Files that don't verify
|-- prettier.config.js Configuration code format plug-in unified code style
|-- .prettierignore The configuration code does not format the checked file
|-- babel.config.js To configure babel file
|-- commitlint.config.js To configure git Submit a document of judgment
|-- tsconfig.json To configure ts The file of
|-- jsconfig.json To configure js The file of
|-- vue.config.js || vite.config.ts vue-cli Generated profile ||vite Generated profile
|-- package.json vue Project information and plug-in library information files
 Copy code 

3、 Initialization completed project introduction ts

1. install ts

# npm
npm install typescript
# yarn
yarn add typescript
 Copy code 

2. Create a file at the root of the project ：tsconfig.json, The specific code is as follows :

{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"resolveJsonModule": true,
"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 code 

3. modify src/main.js by src/main.ts;
4. Modify the root directory index.html Introduced in main.js by main.ts

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<!--<script type="module" src="/src/main.js"></script>-->
<script type="module" src="/src/main.ts"></script>
</body>
</html>
 Copy code 

5. stay src New under the directory shims-vue.d.ts file :

// When you don't use the content that needs to be defined , You can just state '*.vue' Can
// src/main.d.ts
declare module '*.vue' {
/*
import {ComponentOptions} from 'vue';
const componentOptions: ComponentOptions;
export default componentOptions; */
}
 Copy code 

4、 Add to project eslint

1、 install eslint

# npm
npm install eslint elsint-plugin-vue -D
# yarn
yarn add eslint elsint-plugin-vue
 Copy code 

2、 After installation, add .eslintrc.js file ：

module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/vue3-essential",
"@vue/airbnb",
"@vue/typescript/recommended",
],
parserOptions: {
ecmaVersion: 2020,
},
// "off" or 0 - Close Rules
// "warn" or 1 - Open rules , Use warning Program will not exit
// "error" or 2 - Open rules , Wrong use Program exit
rules: {
"@typescript-eslint/no-explicit-any": 0,
"class-methods-use-this": 0,
"import/prefer-default-export": 0, // When there is only one export in the module , It's better to use the default export than the specified export
"import/no-extraneous-dependencies": [2, { devDependencies: true }],
"import/no-unresolved": [2, { ignore: ["ant-design-vue"] }],
"no-restricted-syntax": [
"error",
"WithStatement",
"BinaryExpression[operator='in']",
],
"no-alert": 0, // No use alert confirm prompt
"no-array-constructor": 2, // Array constructors are prohibited
"no-bitwise": 0, // Bitwise operators... Are prohibited
"no-caller": 1, // No use arguments.caller or arguments.callee
"no-catch-shadow": 2, // prohibit catch The clause parameter has the same name as the external scope variable
"no-class-assign": 2, // It is forbidden to assign a value to a class
"no-cond-assign": 2, // Prohibit the use of assignment statements in conditional expressions
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off", // No use console
"no-const-assign": 2, // No modification const Declared variables
"no-constant-condition": 2, // Prohibit constant expressions in conditions if(true) if(1)
"no-continue": 0, // No use continue
"no-control-regex": 2, // Prohibit the use of control characters in regular expressions
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", // No use debugger
"no-delete-var": 2, // Not right var Declared variables use delete The operator
"no-div-regex": 1, // Regular expressions that look like division cannot be used /=foo/
"no-dupe-keys": 2, // Duplicate keys are not allowed when creating object literals {a:1,a:1}
"no-dupe-args": 2, // Function arguments cannot be repeated
"no-duplicate-case": 2, //switch Medium case The label cannot be repeated
"no-else-return": 2, // If if In the statement return, Can't follow else sentence
"no-empty": 2, // The contents of a block statement cannot be empty
"no-empty-character-class": 2, // In regular expressions [] The content cannot be empty
"no-eq-null": 2, // No right null Use == or != Operator
"no-eval": 1, // No use eval
"no-ex-assign": 2, // No giving catch Exception parameter assignment in statement
"no-extend-native": 2, // No extension native object
"no-extra-bind": 2, // Disable unnecessary function binding
"no-extra-boolean-cast": 2, // Prohibit unnecessary bool transformation
"no-extra-parens": 2, // No unnecessary brackets
"no-extra-semi": 2, // No extra colons
"no-fallthrough": 1, // prohibit switch through
"no-floating-decimal": 2, // Do not omit... From floating-point numbers 0 .5 3.
"no-func-assign": 2, // Prohibit duplicate function declarations
"no-implicit-coercion": 1, // Disable implicit conversion
"no-implied-eval": 2, // The use of implicit eval
"no-inline-comments": 0, // It's forbidden to remark in the line
"no-inner-declarations": [2, "functions"], // Prohibit the use of declarations... In block statements （ Variables or functions ）
"no-invalid-regexp": 2, // Disable invalid regular expressions
"no-invalid-this": 2, // Prohibition is invalid this, It can only be used in constructors , class , Object literal
"no-irregular-whitespace": 2, // Can't have irregular spaces
"no-iterator": 2, // No use __iterator__ attribute
"no-label-var": 2, //label A name cannot be associated with var Declared variable names are the same
"no-labels": 2, // No label statement
"no-lone-blocks": 2, // No unnecessary nesting of blocks
"no-lonely-if": 2, // prohibit else Only in statement if sentence
"no-loop-func": 1, // Prohibit the use of functions in loops （ If no reference to external variables does not form a closure, you can ）
"no-mixed-requires": [0, false], // Declaration type cannot be mixed in declaration
"no-mixed-spaces-and-tabs": [2, false], // Do not mix tab And Spaces
"linebreak-style": [0, "windows"], // New line style
"no-multi-spaces": 0, // Do not use extra Spaces
"no-multi-str": 2, // String cannot be used \ Line break
"no-multiple-empty-lines": [1, { max: 3 }], // No more than 2 That's ok
"no-native-reassign": 2, // Can not rewrite native object
"no-negated-in-lhs": 2, //in The left side of the operator cannot have !
"no-nested-ternary": 0, // Do not use nested binomial operations
"no-new": 1, // No use new No assignment after constructing an instance
"no-new-func": 1, // No use new Function
"no-new-object": 2, // No use new Object()
"no-new-require": 2, // No use new require
"no-new-wrappers": 2, // No use new Create a packaging instance ,new String new Boolean new Number
"no-obj-calls": 2, // Cannot call built-in global object , such as Math() JSON()
"no-octal": 2, // Octal numbers are not allowed
"no-octal-escape": 2, // Octal escape sequences are prohibited
"no-param-reassign": 2, // Do not reassign parameters
"no-path-concat": 0, //node Cannot be used in __dirname or __filename Do path splicing
"no-plusplus": 0, // No use ++,--
"no-process-env": 0, // No use process.env
"no-process-exit": 0, // No use process.exit()
"no-proto": 2, // No use __proto__ attribute
"no-redeclare": 2, // Do not declare variables repeatedly
"no-regex-spaces": 2, // Prohibit using multiple spaces in regular expression literals /foo bar/
"no-restricted-modules": 0, // If the specified module is disabled , If you use it, you will report an error
"no-return-assign": 1, //return There cannot be an assignment expression in a statement
"no-script-url": 0, // No use javascript:void(0)
"no-self-compare": 2, // You can't compare yourself
"no-sequences": 0, // The comma operator... Is prohibited
"no-shadow": 2, // A variable in an external scope cannot have the same name as a variable or parameter in the scope it contains
"no-shadow-restricted-names": 2, // The restriction identifier specified in strict mode cannot be used as the variable name when declaring
"no-spaced-func": 2, // When a function is called The function name and () There must be no space between them
"no-sparse-arrays": 2, // Disallow sparse arrays , [1,,2]
"no-sync": 0, //nodejs Disable synchronization method
"no-ternary": 0, // The use of the binocular operator... Is prohibited
"no-trailing-spaces": 1, // There should be no spaces at the end of a line
"no-this-before-super": 0, // Calling super() You can't use this or super
"no-throw-literal": 2, // Don't throw literal errors throw "error";
"no-undef": 2, // Can't have undefined variables
"no-undef-init": 2, // Variable initialization cannot be assigned directly to undefined
"no-undefined": 2, // Out of commission undefined
"no-unexpected-multiline": 2, // Avoid multiline expressions
"no-underscore-dangle": 0, // Identifier cannot be used with _ Beginning or end
"no-unneeded-ternary": 2, // No unnecessary nesting var isYes = answer === 1 ? true : false;
"no-unreachable": 2, // There can't be code that can't be executed
"no-unused-expressions": ["error", { allowTernary: true }], // Forbid useless expressions
"no-unused-vars": [2, { vars: "all", args: "after-used" }], // Cannot have variables or parameters that are not used after declaration
"no-use-before-define": 2, // Can't use... Without definition
"no-useless-call": 2, // Prohibit unnecessary call and apply
"no-void": 2, // Ban void The operator
"no-var": 0, // Ban var, use let and const Instead of
"no-warning-comments": [
1,
{ terms: ["todo", "fixme", "xxx"], location: "start" },
], // No warning notes
"no-with": 2, // Ban with
"array-bracket-spacing": [2, "never"], // Whether to allow extra space in non empty array
"arrow-parens": 0, // Arrow functions are enclosed in parentheses
"arrow-spacing": 0, //=> Before / Back brackets
"accessor-pairs": 0, // Use in objects getter/setter
"block-scoped-var": 0, // Use... In block statements var
"brace-style": [1, "1tbs"], // Curly brace style
"callback-return": 1, // Avoid calling callbacks more than once
camelcase: 2, // Name the hump by force
"comma-dangle": [2, "never"], // Object literal items cannot have commas at the end
"comma-spacing": 0, // Space before and after comma
"comma-style": [2, "last"], // The comma style , At the beginning or the end of a new line
complexity: [0, 11], // Cycle complexity
"computed-property-spacing": [0, "never"], // Whether to allow the calculated key name or not
"consistent-return": 0, //return Is it allowed to omit
"consistent-this": [2, "that"], //this Alias
"constructor-super": 0, // A non derived class cannot call super, Derived classes must call super
curly: [2, "all"], // You have to use if(){} Medium {}
"default-case": 2, //switch At the end of the sentence, there must be default
"dot-location": 0, // Location of object accessors , At the beginning or the end of the line
"dot-notation": [0, { allowKeywords: true }], // Avoid unnecessary square brackets
"eol-last": 0, // The file ends with a single line break
eqeqeq: 0, // Must use full grade
"func-names": 0, // Function expressions must have names
"func-style": [0, "declaration"], // Function style , Specifies that only function declarations can be used / Function expression
"generator-star-spacing": 0, // Generator function * Before and after the space
"guard-for-in": 0, //for in Circulation needs to use if Sentence filtering
"handle-callback-err": 0, //nodejs Handling errors
"id-length": 0, // Variable name length
indent: 0, // Indent style
"init-declarations": 0, // Initial value must be assigned when declaring
"key-spacing": [0, { beforeColon: false, afterColon: true }], // Before and after the colon in the object literal
"lines-around-comment": 0, // before / Note after line
"max-depth": [0, 4], // Nesting block depth
"max-len": [0, 80, 4], // Maximum string length
"max-nested-callbacks": [0, 2], // Callback nesting depth
"max-params": [0, 3], // Functions can only have at most 3 Parameters
"max-statements": [0, 10], // There are at most a few declarations in the function
"new-cap": 2, // Function names must be capitalized with new Way to call , The first line must be lowercase without new Way to call
"new-parens": 2, //new You have to use parentheses
"newline-after-var": 2, // Need a blank line after variable declaration
"object-curly-spacing": [0, "never"], // Whether unnecessary spaces are allowed in braces
"object-shorthand": 0, // Force object literal abbreviation Syntax
"one-var": 1, // A continuous statement
"operator-assignment": [0, "always"], // Assignment operator += -= What?
"operator-linebreak": [2, "after"], // Is the operator at the end of the line or at the beginning of the line
"padded-blocks": 0, // Whether the first and last line of a block statement should be empty
"prefer-const": 0, // The preferred const
"prefer-spread": 0, // Expansion operation is preferred
"prefer-reflect": 0, // The preferred Reflect Methods
quotes: [1, "single"], // Quote type `` "" ''
"quote-props": ["error", "as-needed"], // Whether the attribute name in the literal of the object forces double quotation marks
"id-match": 0, // Name detection
"require-yield": 0, // Generator functions must have yield
semi: [2, "always"], // Statement forces the semicolon to end
"semi-spacing": [0, { before: false, after: true }], // Space before and after semicolon
"sort-vars": 0, // Sort when variables are declared
"space-after-keywords": [0, "always"], // Do you want a space after the keyword
"space-before-blocks": [0, "always"], // A block that doesn't start with a new line { Do you want a space in front of me
"space-before-function-paren": [0, "always"], // Do you want spaces before parentheses when defining functions
"space-in-parens": [0, "never"], // Do you want spaces in parentheses
"space-infix-ops": 0, // Do you want spaces around infix operators
"space-unary-ops": [0, { words: true, nonwords: false }], // Before unary operator / Would you like to add a space after
"spaced-comment": 0, // Do you want to have spaces or something in the annotation style
strict: 2, // Using strict mode
"use-isnan": 2, // Do not use... When comparing NaN, Only use isNaN()
"valid-typeof": 2, // Must use legal typeof Value
"vars-on-top": 2, //var Must be at the top of the scope
"wrap-iife": [2, "inside"], // Execute the curly bracket style of the function expression immediately
"wrap-regex": 0, // Regular expression literals are enclosed in parentheses
},
};
 Copy code