1. Vite build tool

Is a new front-end build tool that significantly improves the front-end development experience. It mainly consists of two parts:

  • A development server that provides rich built-in features based on native ES modules, such as surprisingly fast module hot update (HMR)
  • A set of build instructions that use Rollup to package your code and that are pre-configured to output highly optimized static resources for production
1.1 Why choose Rollup as build tool for Vite production Environment
Rollup is an ES6-based JavaScript packaging tool. It packs small files into a larger file or more complex libraries and applications, which can be used by both browsers and Node.js. The most significant aspect of Rollup is its ability to make packaged files very small. Rollup always produces smaller, faster packages than other JavaScript packaging tools. Because Rollup is based on ES6 modules, it is more efficient than the CommonJS module mechanism used by Webpack and Browserify.Copy the code
1.2 the advantages
  • Server cold start is very fast because there is no packaging to do.
  • The code is compiled on demand, so only the code actually imported on the current page is compiled, rather than waiting for the entire application to be packaged, which makes a big difference for an application with dozens of pages.
  • Hot module update (HMR) performance is decoupled from the total number of modules, which allows HMR to remain fast regardless of the size of the application.

2. Download vite

    yarn create -g vite   / / download vite
    yarn    // Install dependencies
    yarn dev    // Start the project
Copy the code



The finished project structure looks like this:



vite.config.js



package.age

2.1 Dependencies required for Installation
  • Install the vue – the routeryarn add vue-router
  • Introduce the Element-Plus component libraryyarn add element-plus
  • Download vuexyarn add vuex
  • Install axiosyarn add axios
  • Install the js – cookiesyarn add js-cookie
  • Install sass

  • Install style-resources-loader [import some common style file variables for CSS preprocessors to configure global styles]yarn add style-resources-loader
  • Install vue-cli-plugin-style-resources-loaderyarn add vue-cli-plugin-style-resources-loader
2.2 Setting the Theme Color
/ / in [`packages/theme-chalk/src/common/var.scss`](https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/ src/common/var.scss). Find SCSS variables in the file
// Import as needed, overwrite the original style (using SCSS)
// element-variable. SCSS file name
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #F37021,
    ),
    "success": (
      "base":  #67c23a,
    ),
    "warning": (
      "base":  #e6a23c,
    ),
    "danger": (
      "base":  #f56c6c,
    ),
    "info": (
      "base":  #909399,
    ), 
  ),
  $text-color: (
    'primary': red,
    'regular': #606266.'secondary': #909399.'placeholder': #c0c4cc,
  ),
  $border-radius: (
    'base': 4px,
    'small': 2px,
    'round': 20px,
    'circle': 100%,),);// If you are using Vite and you want to customize themes when importing on demand.
// Use 'SCSS. AdditionalData' to compile all components that apply SCSS variables.
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: "@import './src/styles/element-variables.scss';"}},},Copy the code
2.3 Code Analysis

Vite was a server during development,index.htmlIs the entry file for the Vite project

The key change is the way files are imported in index.html

This allows you to organize your code in main.js using ES6 Modules



The browser loads these imports automatically, and Vite starts a local server to handle different load requests. For relative address imports, the file content is processed according to the suffix and returned, and for bare module imports, its path is changed to relative address and processed again.

Then get the file to load according to the entry file option in the module package.json.



Reference: zhuanlan.zhihu.com/p/162072130 juejin. Cn/post / 691001…