This is my first nuggets blog post, the beginning of nuggets writing.

Initialize the project

  • Node version: V16.13.1
  • NPM version: 8.1.2

Select a file directory and execute the following command to quickly create a Vue3 project named vue-three-admin

npm init vite@latest vue-three-admin -- --template vue
Copy the code

You may be prompted whether to install create-vite@latest. Enter y to go to the corresponding directory and run the install command to start the project

yarn
yarn dev
Copy the code

Wait for the console output ready in x m, visit http://127.0.0.1:3000 and Hello Vue 3 + Vite appears, indicating that the project initialization is successful, the effect is as follows

Set the project code specification

  1. Open the project with vscode, look for prettier-code formatter and Vue Language Features (Volar) in the plug-in market and install
  2. Add to the devDependencies configuration in the package.json file"Prettier" : "^ 2.5.1." "(All package.json will be posted here at the end)
  3. Add the. Prettierrc file under the root of the project
{
    "printWidth": 100,
    "tabWidth": 2,
    "useTabs": false,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none",
    "bracketSpacing": true
}
Copy the code

PrintWidth: More than this will wrap the line; TabWidth: number of indented bytes; UseTabs: Indent using Spaces instead of tabs; SingleQuote: use single quotes instead of double quotes; Semi: do not add a semicolon at the end of a sentence. TrailingComma: Placing no comma after the last element of an object or array; BracketSpacing: Spacing “{foo: bar}” between objects, array brackets and text can be set to personal preference. I use the default configuration for all other configuration items. Stop the project, perform yarn download dependency, select Prettier as the default formatting option in VsCode, run the automatic formatting shortcut, the format follows Prettier (it is recommended to format VsCode automatically when saving the file by default)

TS and SASS introduced

  • Ts: No more explanation, just use it
  • Sass: CSS pretreatment
  • sass-loader:sass load
  1. Add to the devDependencies configuration in the package.json file
"Sass" : "^ 1.45.0", "sass - loader" : "^ 8.0.2", "typescript" : "~ 4.5.4"Copy the code
  1. Add files in the root directorytsconfig.jsonThe following
{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "isolatedModules": false,
        "jsx": "preserve",
        "importHelpers": true,
        "strict": true,
        "skipLibCheck": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "noImplicitAny": false,
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "lib": [
            "esnext",
            "dom",
            "dom.iterable",
            "scripthost"
        ],
        "types": [
            "vite/client"
        ]
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "tests/**/*.ts",
        "tests/**/*.tsx",
        "src/main.ts"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}
Copy the code
  1. Change main.js to main.ts and change main.js in index.html to main.ts. This will cause an error in import App. To solve this problem, create a new shims.d.ts file under SRC
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare global {
  interface ImportMeta {
    env: Record<string, unknown>
  }
}
Copy the code
  1. Change vite. Config. js to vite. Config.ts
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default ({ mode }) => {
  return {
    plugins: [vue()]
  }
}
Copy the code
  1. Run yarn to download dependencies
  2. All of the<script setup></script>Add lang=”ts” to<script setup lang="ts"></script>

Multiple environment model

Now the basic framework of the project is almost built, in the front-end development, development, test, production call interface is often different, so here integrated multi-environment mode

  1. Create.env.dev and.env.prod files in the root directory, representing the development and test environments respectively. The contents of the files are as follows. Note that the variables in the side must start with VITE_
  • .env.dev
VITE_PROJECT_ENV = 'dev' VITE_BASE_API_URL = 'http://127.0.0.1:9999'Copy the code
  • .env.prod
VITE_PROJECT_ENV = 'prod' VITE_BASE_API_URL = 'http://127.0.0.1:8080'Copy the code
  1. Change the dev command in scripts to package.jsonvite --force --mode devTo create the prod command"prod": "vite --mode prod"
  2. Print the current request path in app.vue and add code to scriptconsole.log(import.meta.env.VITE_BASE_API_URL)
  3. After yarn dev is executed, the console displays the basic request path



Welcome to my Nuggets account:Juejin. Cn/user / 261290…

Welcome star my Git project:Gitee.com/liangminghu…

Next announcement: Integrating Element-Plus