Hi, I’m big brother from front End Lab

You Yuxi answered such a question on Zhihu, with the release of Vite2.0, directly detonated the front end circle.

So what’s so great about Vite and how to use it?

Next, elder brother will take you into the vite world.

Introduction to Vite

Vite is a new front-end build tool that dramatically improves the front-end development experience.

In daily development, Webpack is used to build and compile projects, and then packaged into bundles.

When the development server is cold started, the packager-based startup must be limited to fetching and building the entire application before it can be served. As the project grows larger, the Webpack startup server becomes slower.

Vite improves development server startup time by initially separating application modules into dependent and source modules.

Vite provides the source code in native ESM mode. This essentially lets the browser take over part of the packaging :Vite simply transforms the source code when the browser requests it and makes it available on demand. Code is dynamically imported according to the situation, which is only processed if it is actually used on the current screen.

Browser support

Development environment :Vite needs to be used in browsers that support dynamic import of native ES modules.

In production: Default supported browsers need to support the introduction of native ES modules via script tags. Older browsers can be supported via the official plugin @vitejs/ plugin-Legacy.

Ii. Project construction

1. Environment preparation

Vite requires node.js version >=12.0.0 to view the Node version. If the Node version is earlier than 12.0.0, upgrade it

➜ node -v
➜ v16.1.0
Copy the code
2. Create projects
➜ NPM init @vitejs/a # install dependent ➜ NPM install # start project ➜ NPM run devCopy the code

After the browser enters the address, we can see that the service has started

3. Modify the Vite configuration file

Comparing the project created through vue-CLI, we can see that index.html is in the outermost layer of the project instead of in the public folder. This is intentional: Vite is a server during development, and index.html is the entry file for that Vite project.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, Initial =1.0" /> <title>Vite App</title> </head> <body> <div id=" App "></div> <script type="module" src="/src/main.ts"></script> </body> </html>Copy the code

Vite treats index.html as part of the source code and module diagram. 

/ / more related vite configuration document reference website: https://cn.vitejs.dev/config/ import {defineConfig} from 'vite import vue the from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], // Project root directory (where the index.html file is located) root: './ SRC ', // Common base path for development or production services base: Default: 'development', 'production' mode: 'development', server: {}})Copy the code
4. Integrate the Vue Router

Vue Router is the official route manager of vue.js. Its deep integration with vue.js core makes building single-page applications a breeze.

Vue Router4 ➜ NPM install vue-router@4Copy the code

New file: SRC /arouter/index.ts

import { createRouter, createWebHashHistory } from 'vue-router' import Home from '.. /views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default routerCopy the code

Introduced under main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')
Copy the code
5. Integrate Vuex for status management

Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.

Vuex NPM install vuex@next --saveCopy the code

Create a new file SRC /strore/index.ts

import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, modules: {}})Copy the code

Introduced under main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')
Copy the code
6. Integrate network request tool Axios
Install Axios NPM install AxiosCopy the code
7. Integration code specification tool Eslint

ESLint is an open source JavaScript code checking tool created by Nicholas C. Zakas in June 2013. Code review is a static analysis that is often used to find problematic patterns or code and is not dependent on specific coding styles.

NPM install ESLint --save-dev # create configuration file # Here it is recommended to use terminal prompt w to complete configuration operation NPX ESLint --initCopy the code

The picture above roughly means:

  1. How would you like to use ESLint? (How would you like to use ESLint?) Select To check syntax, find problems, and Enforce code style
  2. What type of modules does your project use? (What type of modules do you use for your project?) Select JavaScript Modules (import/export)
  3. Which framework does your project use? (Which framework do you use for your project?) Select the Vue. Js
  4. Does your project use TypeScript? (Does your project use TypeScript?) yes
  5. Where does your code run? (Where does your code run?) Select Browser and Node
  6. How would you like to define a style for your project? (How would you like to define style for your project?) Use a popular Style guide
  7. Which style guide do you want to follow? (Which style guide would you like to follow?) ESLint lists three community-popular JavaScript style guides for us: Airbnb, Standard, and Google.
  8. What format do you want your config file to be in? (What format do you use for configuration files?) Choose JavaScript
  9. Would you like to install them now with npm? (Would you like to install them with NPM now?) yes

The.eslintrc.js file will be generated in the root directory.

Depending on project requirements, we can also append custom ESLint rules

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'plugin:vue/essential',
    'airbnb-base',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
  },
};
Copy the code

(Demo running effect)

The above tools are not necessary, but access to mature tools can more effectively improve our development efficiency and code quality, mutual encourage.

Original is not easy, if the article is helpful to you, your praise, message, share is big brother to write down the power!