Vue3.0小笔记

vue3项目搭建

1. npm init vite
   根据提示选择所需内容，生成项目，cd 进入项目目录，安装依赖，运行，得到一个vite+vue3的项目
2. 配置vite.config.ts
   vite—config

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
    resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [
    vue(),
  ],
  resolve: {
   
    alias: {
   // 设置文件./src路径为 @
      '@': resolve('./src')
    }
  },
  base: './', // 打包路径
  server: {
   
    port: 4000, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true // 允许跨域
  }
})

3. 配置ts.config.json

  // 添加baseUrl和paths，此注释需要删除否则报错
    "baseUrl": "./",
    "paths": {
   
      "@/*": ["./src/*"]
    }

4. 使用sass，npm i sass -D,相关loader vite已经集成，不需要安装。安装之后，使用lang=scss即可
5. 配置vue-routernpm i vue-router,创建router.ts

import {
    createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
    {
   
        path: '/home',
        name: 'Home',
        component: () => import(/* webpackChunkName: "Home" */ '@/components/HelloWorld.vue')
    },
    {
    path: '/', redirect: {
    name: 'Home' } }
]
const router = createRouter({
   
    history: createWebHistory(),
    routes
})
export default router

使用：在main.ts中导入并注册

import router from '@/router/index'
const app = createApp(App)
app.use(router)

6. vuex npm i vuex, 创建store.ts

import {
    createStore } from 'vuex'
const defaultState = {
   
    count: 0
}
// Create a new store instance.
export default createStore({
   
    state() {
   
        return {
   
            count: 0
        }
    },
    mutations: {
   
        increment(state) {
   
            state.count += 1
        }
    },
    actions: {
   
        increment(context) {
   
            context.commit('increment')
        }
    },
    getters: {
   
        double(state: typeof defaultState) {
   
            return 2 * state.count
        }
    }
})

使用先在main.ts中注册，同5
7. 配置axios npm i axios, 创建axios.ts

import axios from 'axios';
import {
    ElMessage } from 'element-plus'

// 创建axios实例
// 创建请求时可以用的配置选项
const request = axios.create({
   
    withCredentials: true,
    timeout: 1000,
    baseURL: ''
})
// axios的全局配置
request.defaults.headers.post = {
   
    'Content-Type': 'application/x-www-form-urlencoded'
}
request.defaults.headers.common = {
   
    'Auth-Type': 'company-web',
    'X-Requested-With': 'XMLHttpRequest',
    token: 'sdfjlsdfjlsdjflsjflsfjlskd'
}

// 添加请求拦截器（post只能接受字符串类型数据）
request.interceptors.request.use(
    // 统一设置用户身份 token
    (config) => {
   
        return config
    },
    (error) => {
   
        return Promise.reject(error)
    }
)

// 错误处理
const errorHandle = (status: any, other: any) => {
   
    switch(status) {
   
        case 400:
            ElMessage.error('信息校验失败');
            break;
        case 401:
            ElMessage.error('认证失败');
            break;
        case 403:
            ElMessage.error('token校验失败');
            break;
        case 404:
            ElMessage.error('请求资源不存在');
            break;
        default:
            ElMessage.error