vite 搭建项目

yarn create vite
yarn create vite my-vue-app

  //选择框架
  Vanilla
  Vue
  React
  Preact
  Lit
  Svelte
  Others
  //选择jsOrTs
  JavaScript
  TypeScript

创建完成,yarn 下载项目依赖
yarn dev 启动项目
yarn add @vitejs/plugin-vue-jsx -D //安装配置jsx

//vite.config.ts
import vueJsx from '@vitejs/plugin-vue-jsx';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
})

yarn add npm install -D tailwindcss@latest postcss@latest autoprefixer@latest -D

//安装tailwindcss
//生成 tailwind.config.js 和 postcss.config.js 文件
npx tailwindcss init -p
//tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

index.css

css

@tailwind base;
@tailwind components;
@tailwind utilities;

安装navie-ui yarn add naive-ui -D

//配置按需引入 yarn add unplugin-auto-import unplugin-vue-components -D
//vite.config.ts
export default{
  plugins: [
    AutoImport({
      imports: [
        'vue',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar'
          ]
        }
      ]
    }), Components({
      resolvers: [NaiveUiResolver()]
    })
  ],
}

安装vue-router yarn add vue-router

import { createRouter, createWebHistory } from 'vue-router';
import { defaultRoute } from './routers';
const routerHistory = createWebHistory();
const router = createRouter({
  history: routerHistory,
  routes: defaultRoute,
});
export default router;

9.安装axios yarn add axios

//封装axios
import axios, {
  AxiosInstance,
  AxiosError,
  InternalAxiosRequestConfig,
  AxiosResponse,
  AxiosRequestConfig
} from 'axios'
import ls from '@src/utils/storage'
import errorHandle from './errorHandle'
export interface BaseRes<T> {
  code: number
  msg: string
  data: T
}
class HttpRequest {
  baseURL: string

  constructor(baseUrl: string) {
    this.baseURL = baseUrl
  }

  getInsideConfig() {
    const config = {
      baseURL: this.baseURL,
      headers: {}
    }
    const token = ls.get('token')
    if (token) {
      config.headers['Authorization'] = token
    }

    return config
  }

  interceptors(instance: AxiosInstance) {
    instance.interceptors.request.use(
      (config: InternalAxiosRequestConfig) => {
        return config
      },
      (error: AxiosError<BaseRes<null>, any>) => {
        errorHandle(error)
        return Promise.reject(error)
      }
    )
    instance.interceptors.response.use(
      (res: AxiosResponse) => {
        if (res.status === 200) {
          return Promise.resolve(res.data)
        } else {
          return Promise.reject(res)
        }
      },
      (error: AxiosError<BaseRes<null>, any>) => {
        errorHandle(error)
        return Promise.reject(error)
      }
    )
  }

  request<T>(options: AxiosRequestConfig): Promise<T> {
    const instance = axios.create()
    options = Object.assign(this.getInsideConfig(), options)
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    this.interceptors(instance)
    return instance(options)
  }

  get<T>(url: string, config?: AxiosRequestConfig) {
    const options = Object.assign(
      {
        url,
        method: 'GET'
      },
      config
    )
    return this.request<T>(options)
  }

  post<T>(url: string, data: any, config?: AxiosRequestConfig) {
    const options = Object.assign(
      {
        url,
        method: 'POST',
        data
      },
      config
    )
    return this.request<T>(options)
  }
}
export const CancelToken = axios.CancelToken
export default HttpRequest

//errorHandle 
const errorHandle = (err: any, url: string): void => {
  // 统一处理错误
};

export { errorHandle };

10.配置代理

//vite.config.ts
//yarn add @types/node -D   
import path from 'path'

server: {
    hmr: true,
    cors: true, // 默认启用并允许任何源
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    port: 4000,
    host: '0.0.0.0',

    proxy: {
      '/api/': {
        target: 'http://k9arsf.natappfree.cc', //代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/api/, ''),
      },
    },
  },
  resolve: {//路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
      pkg: path.resolve(__dirname, './package.json'),
    },
  },

11.安装Pinia(状态管理) yarn add pinia

//创建store文件夹
//根据模块创建文件夹
store
├──modules
--├──test
----├──index.ts
--├──模块名称
├──index.ts
//index.ts
export * from './modules'
//test--index.ts
import { defineStore } from "pinia";
import { reactive } from "vue";

export const useTestStore = defineStore("test", () => {
  const test = reactive({
    isTest: true
  })
  return {
    test,
  };
});

12.main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
const pinia = createPinia()

createApp(App).use(router).use(pinia).mount('#app')

13.配置scss/less全局变量

//vite.config.js
//less
css:{
    preprocessorOptions: {
      less:{
        charset:false,
        additionalData:`@import "${path.resolve(__dirname,'src/style/var.less')}";`
      }
    },
  },
//scss
 css: {
    preprocessorOptions: {
      scss: {
        charset: false,
        additionalData: `@use "@/assets/style/global.less" as *;`,
      },
    },
  },

vite 搭建项目 ​

vite 搭建项目