Front end project framework building-day01

Lst 'smile 2021-02-23 16:09:30
end project framework building-day01 building


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 
  1. 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 
  1. modify src/main.js by src/main.ts;
  2. 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 
  1. 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 
版权声明
本文为[Lst 'smile]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223155148583k.html

  1. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  2. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  3. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  4. 前端面试常考题:JS垃圾回收机制
  5. Frequently asked questions in front end interview: JS garbage collection mechanism
  6. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  7. Java之HTTP网络编程(一):TCP/SSL网页下载
  8. HTTP network programming in Java (1): TCP / SSL web page download
  9. Java之HTTP网络编程(一):TCP/SSL网页下载
  10. HTTP network programming in Java (1): TCP / SSL web page download
  11. 使用vite搭建vue项目
  12. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  13. 在 vue 中通过 express 连接数据库
  14. Using vite to build Vue project
  15. Display PDF file in component: Vue pdf
  16. Connecting database through express in Vue
  17. 2021届秋招哈啰出行前端面经(一面)
  18. vue使用sdk进行七牛云上传
  19. Javascript性能优化【内联缓存】 V8引擎特性
  20. Small true wireless smart headset evaluation: put intelligence into the ear
  21. The front end experience of the 2021 autumn recruitment
  22. Vue uses SDK to upload Qi Niu cloud
  23. 深入理解 Web 协议 (三):HTTP 2
  24. dhtmlxGantt如何重新排序任务
  25. JavaScript performance optimization [inline cache] V8 engine features
  26. 深入理解 Web 协议 (三):HTTP 2
  27. Deep understanding of Web protocol (3): http 2
  28. 深入理解 Web 协议 (三):HTTP 2
  29. How dhtmlxgantt reorders tasks
  30. 深入理解 Web 协议 (三):HTTP 2
  31. JavaScriptBOM操作
  32. JavaScriptBOM操作
  33. Deep understanding of Web protocol (3): http 2
  34. Deep understanding of Web protocol (3): http 2
  35. dhtmlxGantt甘特图重新排序任视频教程
  36. vue实现七牛云上传图片功能
  37. vue.js环境配置步骤及npm run dev报错解决方案
  38. Deep understanding of Web protocol (3): http 2
  39. JavaScript BOM operation
  40. JavaScript BOM operation
  41. Dhtmlxgantt reordering video tutorial
  42. Vue to achieve seven cattle cloud upload image function
  43. vue.js Environment configuration steps and NPM run dev error reporting solution
  44. 什么是HTTPS以及如何实施HTTPS?
  45. vue使用sdk进行七牛上传
  46. JavaScript 邮箱验证 - 正则验证
  47. Codeless development platform cloud watch sets off a "new revolution" in enterprise Digitalization
  48. Codeless development of cloud watch for enterprise digital solution
  49. What is HTTPS and how to implement it?
  50. Vue uses SDK to upload seven cows
  51. JavaScript mailbox verification - regular verification
  52. JavaScriptBOM操作
  53. JavaScript BOM operation
  54. How to create a new NPM package and publish it to the NPM community
  55. vue --tinymce 解决上传图片的方法
  56. Vue development
  57. A simple solution for vite to batch introduce SVG symbol
  58. Building 3D rendering engine from scratch with JS (2)
  59. Vue -- tinymece solution to upload pictures
  60. Common configuration of nginx