The first step is to initialize the project

npm init vite@latest
Copy the code

Then follow the prompts to enter the project Juejin, initialize and run, and you can view the effect in the browser

Network: use ‘–host’ to expose

Import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import {resolve} from 'path' // https://vitejs.dev/config/ export default defineConfig ({plugins: [vue ()], / / the following solution to expose local address and port: Network: Use '--host' to expose server: {host: '0.0.0.0', port: 8079, // Specify a new port to expose server: Resolve :{alias:[{find:'@', replacement:resolve(__dirname,' SRC ')}]}})Copy the code

Note: to disable Vetur in vscode and install Volar, vue-devtools requires a beta installation. Mine is currently 6.0.0 beta 20

Step 2 Add a route

The installation

npm install vue-router@next --save
Copy the code

In the SRC directory, create router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; // createWebHashHistory Hash route // createWebHistory History route // createMemoryHistory Import Login from the route with cache history '.. /views/login/index.vue' import Main from '.. /views/main/index.vue' const routes: RouteRecordRaw[] = [ { path: "/login", // component: () => import("../views/login/index.vue") component: Login }, { path: '/', component: Main } ] const router=createRouter({ history:createWebHistory(), routes }) export default routerCopy the code

Mount the route in main.ts

Import {createApp} from 'vue' import App from './ app. vue' import router from './router' // Imports routes CreateApp (App).use(router).mount('# App ') // Route mountCopy the code

Add it on the app.vue page

<router-view />
Copy the code

Visit http://localhost:8079/login can reach the login page

Step 3 Add element-plus

The installation

 npm install element-plus --save
Copy the code

Configuration import on demand requires additional installation of unplugin-vue-components instead of importing in main.ts

npm install unplugin-vue-components
Copy the code

Open the vite configuration file vite.config.ts

Import Components from 'unplugin-vue-components/vite' import {ElementPlusResolver} from Export default defineConfig({plugins: [vue(), components ({resolvers: [ElementPlusResolver()], }), ] })Copy the code

Use the Plus component directly on the vue page, such as the button in app.vue:

<template> <img alt="Vue logo" src="./assets/logo.png" /> <el-button>ElButton</el-button> <HelloWorld msg="Hello Vue 3 +  TypeScript + Vite" /> </template>Copy the code

Step 4 Add Axios

The installation

NPM install axios --save NPM install QS --save // QS module for serializing dataCopy the code

In the SRC folder, create axios/request.ts

import axios,{AxiosRequestConfig,AxiosResponse,AxiosError} from "axios";
Copy the code

Reference:

  • Juejin. Cn/post / 699249…