Introduction to vite
Vite is a non-packaging development server based on Vue3 single-file components. It has a fast cold start and does not need to wait for packaging operations; and the official website says it is the next generation of front-end construction tools.
Initialize the project
npm init vite@latest
1. Enter the project name
2. Select Vue
3. Select TS
4. Start the project
5. The project starts successfully
Notice
When developing with vscode, it is recommended to use volar and disable the plugin Vetur, which was often used by vue2 before.
Modify vite.config.ts
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
resolve } from 'path'
export default defineConfig({
plugins: [vue()],
//解决“vite use `--host` to expose”
base: './', //不加打包后白屏
server: {
host: 'localhost',
port: 9527,
open: true
},
resolve:{
//别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})
Install ts dependencies and ESLint
This dependency allows TS to recognize the @ root directory symbol
1. TS dependency
npm install @types/node --save-dev
The configuration ts file is imported using the @ method.
Add the configuration in the tsconfig.json file (the annotations in the figure below are all added, and you can also enrich them yourself. Among them, only // is the @ configuration, and the rest are other configurations)
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noImplicitAny": false, //any报错
"lib": ["esnext", "dom"],
"suppressImplicitAnyIndexErrors": true,//允许字符串用作下标
"skipLibCheck": true,
"baseUrl": ".", //
"paths": {
//
"@/*":[ //
"src/*" //
] //
} //
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{
"path": "./tsconfig.node.json" }],
"exclude":["node_modules"] // // ts排除的文件
}
2. ESLint
npm install --save-dev eslint eslint-plugin-vue
Create a .eslintrc.js file in the root directory
and add your own validation rules in rules
module.exports = {
root: true,
parserOptions: {
sourceType: 'module'
},
parser: 'vue-eslint-parser',
extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended', 'plugin:vue/vue3-recommended'],
env: {
browser: true,
node: true,
es6: true
},
rules: {
'no-console': 'off',
'comma-dangle': [2, 'never'] //禁止使用拖尾逗号
}
}
install router
npm install vue-router@4
1. Create a router folder under src and create a new index.ts
import {
createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'HelloWorld',
component:()=>import('@/components/HelloWorld.vue'),
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
2. Import the mount route in main.ts
import {
createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
3. Modify App.vue route export
<script setup lang="ts">
</script>
<template>
<router-view></router-view>
</template>
<style>
</style>
Install Axios
npm install axios
1. Create a new utils-request.ts
// 首先先引入aixos
import axios from 'axios'
// 创建一个axios 实例
const service = axios.create({
baseURL: "/api", // 基准地址
timeout: 5000 // 超时时间
})
// 添加请求拦截器
service .interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
service .interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 最后导出
export default service
2. Create a new api folder, xxx.ts
import service from "@/utils/request"
//写对应的接口
export let getList=(params)=>{
return service({
url:"/getlist",
method:"get",
params
})
}
//然后在对应的页面引入使用即可。
Configure cross-domain
vite.config.ts
server: {
proxy: {
'/api': {
target: 'https://baidu.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
Install Less
npm install -D less less-loader
use:
<style scoped lang="scss">
.read-the-docs {
color: #888;
}
</style>
other
We can also install ElementUI-plus and state management Pinia , which we only need to go to the corresponding official website to guide the installation.