What is vite

Vite is a Web development and construction tool based on ESModule, a native module system for modern browsers. Package based on Rollup in production environment.

Advantages:

  • Quick cold start of the server
  • Instant Hot Module Replacement (HMR)
  • True on-demand compilation

Second, vite create project

npm init vite-app <project-name>	// Create the project
cd <project-name>	// Enter the newly created project
npm install		// Install project dependencies
npm i -S typescript	vue-router@next axios	// Integrate TypeScript vue-Router AXIos
npm i -D eslint eslint-plugin-vue	// Integrate ESLint sass
npm i sass --save-dev	// Integrate CSS precompiled Sass
npm run dev		// Run the current project
Copy the code

Iii. Project configuration

3.1. Configure vite. Config.js

The function of viet.config.js is similar to that of vue.config.js in the previous @vue-cli project

import path from 'path'
module.exports = {
  // Import the alias
  alias: {
    '/ @ /': path.resolve(__dirname, './src'),
    '/ @ /': path.resolve(__dirname, './src/views'),
    '/@components/': path.resolve(__dirname, './src/components'),
    '/@utils/': path.resolve(__dirname, './src/utils'),},// Configure the Dep optimization behavior
  optimizeDeps: {
    include: ["lodash"]},// Configure custom proxy rules for the development server.
  proxy: {
    '/api': {
      target: 'http://rap2.taobao.org:38080/app/mock/237355'.changeOrigin: true.rewrite: (path: string) = > path.replace(/^\/api/.' ')}}// ... 
}
Copy the code

Refer to the lot

3.2 integrate Ant Design of Vue 2.0 UI framework

Install Ant Design of Vue (this UI library supports Vite & TypeScript)

npm install ant-design-vue --save ( yarn add ant-design-vue )

Load the required UI components as needed

npm install -D babel-plugin-import
Copy the code
{ "plugins": [ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: True 'will load less file]}Copy the code

Ant Design of Vue

3.3. Configure the Router

In the SRC directory, create a router folder and create index.js in the folder

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/'.name: 'Home'.component: import('/@views/Home'),}, {path: '/user'.name: 'User'.component: () = > import('/@views/User'),},];const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
Copy the code

The use of reference

3.4. Create a JSX page

In the SRC directory, create the views folder and create home.jsx user.jsx in the folder

** HomePage **

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home'.setup() {
    const msg='hello Home'
    return () = > (
      <>
        <h1>Home</h1>
        <h1>{msg}</h1>
      </>); }});Copy the code

** UserPage **

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'User'.setup() {
    const msg='Hello User Center'
    return () = > (
      <>
        <h1>User</h1>
        <h1>{msg}</h1>
      </>); }});Copy the code

JSX is used in Vue 3.0

3.5, the main ts

Introduce router and Ant-design-vue in Main

import { createApp } from 'vue'
import App from './App'
import router from './router/index'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(router).use(Antd).mount('#app')
Copy the code