1. Basic use of Vite

Vite relies on ESBuild to build very fast

Install vite locally

npm i vite -D

The project to run the Vite build tool

npx vite

2. Vite processing of CSS

Vite supports CSS by default. Do not use a loader

Vite’s handling of less requires the installation of LESS, but the internal configuration is set up

npm i less

Vite postCSS Settings have been configured

npm i postcss postcss-preset-env -D

3. Vite support for TS

You can use MU.ts directly

export default function mul(num1: number, num2: number) :number {
  return num1 * num2
}
Copy the code

Vite’s support for TS and LESS converts the code to the corresponding ES6 code and passes it directly to the browser.

4. Vite support for Vue

npm install vue@next

npm install @vue/compiler-sfc -D

npm install @vitejs/plugin-vue

5. Vite packaging

npx vite build

Preview the packaged file

npx vite preview

6. The script configuration

"scripts": {
    "serve": "vite"."build": "vite build"."previre": "vite preview"
},
Copy the code

7. Vite’s scaffolding

Global scaffold installation:

npm install @vitejs/create-app -g

Create a project:

Create Project name

Website recommendations:

npm init @vitejs/app
Copy the code

You can also directly specify the project name and the template you want to use with additional command-line options. For example, to build a Vite + Vue project, run:

# NPM 6.x NPM init@vitejs /app my-vue-app --template vue # NPM 7+  npm init @vitejs/app my-vue-app -- --template vue # yarn yarn create @vitejs/app my-vue-app --template vueCopy the code