Writing in the front

The project address

👉👉 Project preview address, which can be directly set as the browser home page or desktop shortcut for use

The source address

Fully open source, you can study, secondary development. Of course, we are very welcome to click Star⭐⭐⭐ 👉👉 source link (gitee).

1. Initialize the project using Vite

Use the command line tool to execute the following command in the target folder, or directly from the console in vscode, I am more comfortable with the former, then directly install the plug-in in vscode

yarn create @vitejs/app
Copy the code

Enter the name of the project, then select vue-ts, press enter ok, and soon a folder will be generated

Then go to the generated folder and run the yarn install command to install the initial dependency

Run the NPM run dev command to open the local server. The following page is displayed, indicating that the project is successfully initialized

2. Modify the configuration file

Start by installing typescript type declarations

yarn add @types/node -D
Copy the code

The initialized project generates a vite.config.ts file, which is equivalent to vue.config.js in the project created using vue-cli

// After importing the defineConfig plugin, modify this file to have code hints
import { defineConfig } from "vite"; 
import vue from "@vitejs/plugin-vue";
// Path processing module
import path from "path";

export default defineConfig({
  // Define the alias
  alias: {
    "@": path.resolve(__dirname, "src"),
    coms: path.resolve(__dirname, "src/components"),},// Mount vue as a plug-in
  plugins: [vue()],
});
Copy the code

We defined through configuration alias path alias, configuration after we open the App. The HelloWorld vue component references by. / components/HelloWorld. Instead of vue coms/HelloWorld vue

The page displays normally, and our path alias is configured successfully

But when we type in vsCode we don’t have a path prompt. At this point we will change the tsconfig.json file to add the following to compilerOptions

 "compilerOptions": {
    "baseUrl":"."."paths": {
      "@ / *": ["src/*"]."coms/*": ["src/components/*"]}},Copy the code

At this time, we can directly tap comS/in VScode to see the following path prompts, greatly improving the development efficiency

If you need another path alias, you just add it mindless

3. Code specification

It depends on yarn add…. when it is developed -D

  • “@typescript-eslint/eslint-plugin”
  • “@typescript-eslint/parser”
  • “@vue/eslint-config-prettier”
  • “@vue/eslint-config-typescript”
  • “babel-eslint”
  • “eslint”
  • “eslint-plugin-prettier”
  • “eslint-plugin-vue”
  • “prettier”

Then create.eslintrc.js and.prettierrc.json files in the root directory

//.prettierrc.json
{
  "singleQuote": true.// Use single quotes
  "seme": true.// Add a semicolon to the end of the sentence
  "tabWidth": 2./ / the indentation
  "TrailingCooma": "all".// Put a comma after the last element of an object or array
  "bracketSpacing": true.// Add "{foo: bar}" between the object, array parentheses and the literal.
  "printWidth": 100// Over the maximum line feed
  "arrowParens":"always" Arrow function arguments are always parentheses
}
Copy the code

This is just the shelf, and specific rules can be added in rules

module.exports = {
  root: true.env: {
    node: true,},extends: ['plugin:vue/vue3-essential'.'eslint:recommended'.'@vue/typescript/recommended'].parserOptions: {},rules: {}};Copy the code

Then configure the automatic saving of vscode, search and save in the Settings, and configure as shown in the following figure

After all the configuration, you can enjoy the efficiency of automatic code formatting and code specification

4. Start typing code

At this point, the development can be carried out normally, and the features and difficulties in the project will be recorded in a separate article later

Write in the last

Please feel free to comment below or send me a personal message. Thanks very much 🙏🙏🙏.

✅ thinks that some part of my design is too tedious, there is a simpler or more demanding way of packaging

✅ thinks some of my code is too old and can provide a new API or the latest syntax

✅ does not understand part of the article

✅ answers some of the questions in my article

✅ thinks certain interactions, features need to be optimized and bugs found

✅ wants to add new features and has better suggestions for the overall design, look and feel

Finally, thanks for your patience. Now that you’re here, click 👍 to like before you go

Links to integrate

🔊 Project preview address (GitHub Pages):👉👉alanhzw.github

🔊 Project preview alternate address (own server):👉👉warbler.duwanyu.com

🔊 source address (gitee):👉👉gitee.com/hzw_0174/Wa…

🔊 source address (github):👉👉github.com/alanhzw/War…

🔊 Overall project introduction :👉👉juejin.cn/post/696394…

🔊 streamer bookmark – Build a Vite+Vue3+Ts project from zero :👉👉juejin.cn/post/695130…

🔊 bookmark – Basic components (Form,Input):👉👉juejin.cn/post/696393…

🔊 streetwalkers bookmarks – based component (Button, Overlay, Dialog, Message) : 👉 👉 juejin. Cn/post / 696394…

🔊 Streamer bookmark – Service component introduction :👉👉 Currently unavailable

🔊 My blog :👉👉www.duwanyu.com