使用vite创建vue3+Ts+Naive项目

使用vite搭建项目时不会像vue-cli那样手动选择要用的依赖，所以要一步步安装并挂载到原型上

1.搭建一个vite项目

npm init vite@latest
或者
yarn create vite

2.确定项目名

选择vue
选择vue-ts

3.下载依赖

cd vue3_ts_demo
npm install
npm run dev

4.修改vite配置文件（vite.config.ts）

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: {
      '@': resolve('./src')
    }
  },
  base: './', // 打包路径
  server: {
    port: 4000, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true // 允许跨域
  },
})

如果使用 ​​TS​​ ，则需要先安装类型声明文件

npm install --save-dev @types/node

5.安装并使用router

npm i vue-router@4

创建router/index.ts文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
    //这个地方需要自己创建一个views/Home.vue文件
  },
  { path: '/', redirect: { name: 'Home' } }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

在main.ts文件中挂载

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入router
import router from './router/index'
//链式编程使用use(router)
const vueApp = createApp(App)
vueApp.use(router).mount('#app')

6.安装并使用vuex

​npm i vuex@next​​

创建store/index.ts文件

import { createStore } from 'vuex'
export default createStore({
  state: {
    token: "test", 
    SetPage: false
  }, mutations: {}, actions: {}, modules: {}
})

在main.ts中挂载

//引入vuex文件
import store from "./store/index";
//全局挂载
const vueApp = createApp(App)
vueApp.use(store).mount('#app')

7.安装并使用naive ui

npm i -D naive-ui

自动引入
先下载按需引入的插件,插件会自动解析

npm install -D unplugin-vue-components unplugin-auto-import

在vite.config.ts中配置

// // https://vitejs.dev/config/
// export default defineConfig({
//   plugins: [vue()]
// })
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  AutoImport({
    imports: [
      'vue',
      {
        'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
      },
    ],
  }),
  Components({
    resolvers: [NaiveUiResolver()]
  })
  ],
  resolve: {
    alias: {
      '@': resolve('./src')
    }
  },
  base: './', // 打包路径
  server: {
    port: 4000, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true // 允许跨域
  },
})

8.安装axios并使用

npm i axios​​

创建src/api/axios.ts文件

import axios from 'axios'
import qs from "qs";
import store from "../store/index";
import router from '../router';
//'http://129.204.92.64:8081/' 腾讯服务器
// axios.defaults.baseURL = 'https://localhost:44367/',
// axios.defaults.baseURL = process.env.VUE_APP_API_URL,
axios.defaults.baseURL = 'http://129.204.92.64:8081/'
axios.defaults.timeout = 12000;
// axios.defaults.headers.common['token'] =  AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*"; // 允许跨域

axios.interceptors.request.use(function (config: any) {

  // 在发送请求之前做某件事
  if (
    config.method === "post" ||
    config.method === "put" ||
    config.method === "delete"
  ) {
    // 序列化
    config.data = qs.parse(config.data);
    // console.log("qs:" + config.data);
  }
  // 若是有做鉴权token , 就给头部带上token
  if (store.state.token) {
    config.headers.Authorization = store.state.token;
    // console.log("token:" + store.state.token);
  }
  return config;
}, (error: { data: { error: { message: any; }; }; }) => {
  // Message({
  //   //  饿了么的消息弹窗组件,类似toast
  //   showClose: true,
  //   message: error,
  //   type: "error.data.error.message"
  // });
  return Promise.reject(error.data.error.message);
})

axios.interceptors.response.use(function (config: any) {

  if (config.status === 200 || config.status === 204) {
    return Promise.resolve(config);
  } else {
    return Promise.reject(config);
  }

  // return config;
},
  function (error: { response: { status: any; }; }) {
    // return Promise.reject(error)
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。                
        case 401:
          router.replace({
            path: '/login',
            query: {
              // redirect: router.currentRoute.fullPath
            }
          });
          break;
        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页面                
        case 403:
          // Toast({
          //   message: '登录过期，请重新登录',
          //   duration: 1000,
          //   forbidClick: true
          // });
          // 清除token
          store.dispatch('FedLogOut').then(() => {
            // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
            router.replace({
              path: '/login',
              query: {
                // redirect: router.currentRoute.fullPath
              }
            })
          })
          break;

        // 404请求不存在
        case 404:
          // Toast({
          //   message: '网络请求不存在',
          //   duration: 1500,
          //   forbidClick: true
          // });
          break;
        // 其他错误，直接抛出错误提示
        default:
        // Toast({
        //   message: error.response.data.message,
        //   duration: 1500,
        //   forbidClick: true
        // });
      }
      return Promise.reject(error.response);
    } else {
      // 处理断网的情况
      // eg:请求超时或断网时，更新state的network状态
      // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
      // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
      store.commit('changeNetwork', false);
    }
  }
)

export default axios

这个地方的qs需要下载一下，然后配置ts
下载qs

npm i qs

npm i --save-dev @types/qs

挂载在main.ts上

import axios from './api/axios'
// 全局挂载axios
const vueApp = createApp(App)
vueApp.config.globalProperties.$api = axios

参考另外一篇很有料的文章
https://www.cnblogs.com/amujoe/p/16092820.html