Vite quick start

know Vite

Vite ( French means " fast ", pronunciation /vit/) It's a new front-end building tool , Can significantly improve the front-end development experience .

It's made up of two parts

• A development server , It's based on the original ES The module provides rich built-in functions ,HMR The speed is very fast ;
• A set of build instructions , It USES rollup Open our code , And it's pre configured , The optimized static resources of the generation environment can be output

install

Vite need Node.js edition >= 12.0.0

$ npm install vite

Start project npx vite

function

Hot module loading

Vite Provides a set of native ESM Of HMR API, Framework utilization API Sure To provide in time 、 Accurate update 、 No need to load the page or clear the file status ,

Pay attention ： These are built in Vite in , No need to configure

Yes Css Support for

Vite It can be dealt with directly .css file Also have HMR

Yes css The preprocessor

No specific plug-ins need to be installed , However, you need to install related dependencies

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

Using a single component file requires <style lang="less"> It will turn on automatically

Postcss

vite Direct support for postcss, Direct installation postcss And configuration postcss.config.js File can

//  install  postcss
npm install postcss-preset-env -d

//  To configure postcss
module.exports = {
  plugins: [
    require("postcss-preset-env")
  ]
}

st

about .ts It is also natively supported

vue

There are three plug-ins that you can choose to rely on

• Vue 3 Single file component support ： @vitejs/plugin-vue
• Vue 3 JSX Support ： @vitejs/plugin-vue-jsx
• Vue 2 Support ： underfin/vite-plugin-vue2

After installation Yes vite.config.js To configure

import vue from "@vitejs/plugin-vue";

module.exports = {
  plugins: [
    vue()
  ]
}

vite Run pack

Proceed with the following command

npx vite #  Local startup service 
# or
npx vite build  #  Project package 
# or
npx vite preview  #  Preview packaged content locally 

configurable pakcage.json Make instruction changes

"scripts": {
  "serve": "vite",  //  Local boot 
  "build": "vite build",  //  Project package 
  "preview": "vite preview" //  Package preview 
}

view To configure vue/cli Use

This can be done by the following command

npm init @vite/latest
# or
yarn create vite

Later, if you do not install the corresponding dependencies , You will be prompted to install the corresponding dependencies , After the next step, you will be asked to select the frame cli There are options for you to choose