The VUe2 project uses Vite for the basic development process

  1. Introduction of vite

The Vite development environment supports browser-based Dynamic import, which makes startup surprisingly fast, and supports parsing of any type of file (just provide parsing Loder). The build environment is packaged using Rollup. So what’s new on the front end in 2021, says Yoda, is that “a lot of people are ditching WebPack and moving to Vite.”

Let’s talk about how to use Vite in our VUe2 project.

  1. Vue2 uses vite

2.1 Vite Vue Installation yarn add vite vue 1 2.2 Start command “scripts”: {“dev”: “vite”, “build”: “Vite build”}, 1 2 3 4 Vite command will find the “vite. Config. js” in the root directory, same process as webpack.

2.3 Viet.config. js In vue2.x, you need to add plug-ins that support vue2.x

yarn add vite-plugin-vue2 –dev

// vite.config.js

import { createVuePlugin } from “vite-plugin-vue2”;

export default { plugins: [createVuePlugin(/options/)] }

VueTemplateOptions, JSX // see github.com/underfin/vi… 1, 2, 3, 4, 5, 6, 7, 8 There are a number of options that can be configured, similar to webpack, such as root, the default is process.cwd(), so vite gets the root directory and looks for index.html. More configurations are available at vitejs.dev/config/#con… Look at it.

2.4 the index. HTML

2.5 Install SASS directly using SCSS in the project

Yarn add sass -d 1 2.6 To use abbreviations, add the following configuration to viet.config. js

import { createVuePlugin } from “vite-plugin-vue2”;

export default { plugins: [createVuePlugin()], resolve: { alias: [ { find: ‘UTIL’, replacement: ‘/ SRC /utils’}]}} 1 2 3 4 5 6 7 8 9 10 import logger from “UTIL/logger.js”

Vue2: install vue-class-component (@), install vue-class-component (@), install vue-class-Component (@) But vite doesn’t recognize this @ during parsing. My current solution is to add lang= “ts” to script.

1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 solutions can solve the problem, but the root cause needs to be found.

In order to use the class-component syntax, we sometimes use vue-property-decorator. However, when using vue-property-decorator, we must install vue-class-component. Otherwise, a createDecorator error occurs

2.8 Use of TS note that in Vite TS only does file transfer, not type checking. Type checking is left to the IDE and packaging process.

Ts naturally needs to add ts.config.json. The use of abbreviations is also required here because of inference

{ “include”: [ “src//*”, “src/index.ts”, “src/vue-shim.d.ts” ], “exclude”: [“node_modules”, “src/app/assets//”], “compilerOptions”: { “allowSyntheticDefaultImports”: true, “experimentalDecorators”: true, “allowJs”: true, “module”: “esnext”, “target”: “es5”, “moduleResolution”: “node”, “isolatedModules”: true, “lib”: [“dom”, “es5”, “es2015.promise”], “sourceMap”: true, “pretty”: true, “paths”: {“UTIL/”: [” SRC/UTIL/ *”]},}} ———————————————— Original link: blog.csdn.net/qq_41800366…