[JavaScript知识库]用 vite 构建 vue3 + TS 项目

1、项目初始化
（1） 全局安装 create-vite

npm install create-vite@2.9.0 -g 

（2）创建仓库并第一次提交

git init 
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin https://gitee.com/mengxianwei1231/vue3_ts_vite.git
git push -u origin "master"

（3）初始化项目 （vue3_ts_vite项目名称）

npm init @vitejs/app vue3_ts_vite

选择vue ->vue-ts


此时已经创建完成
（4）依赖并启动就ok

  cd vue3_ts_vite
  npm install
  npm run dev

2、基础配置
.eslintrc.js配置全局变量：

// .eslintrc.js
 
module.exports = {
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
  },
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-strongly-recommended',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
  }
}

3、安装使用路由
（1）安装 vue-router

npm install vue-router@4

（2）初始化路由实例

// src\router\index.ts
 
import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        component: () => import('../view/index.vue')
    },
]

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

export default router;

app.vue中修改router-view

main.ts中引入路由

4、配置vite.confing.ts
(1)配置模块路径别名
首先安装类型声明文件，否则会报错找不到path

npm install --save-dev @types/node

// 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(__dirname, 'src')
    }
  }
})

5、CSS 样式管理
（1）由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。

（2）但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：

# .scss and .sass
npm install -D sass
 
# .less
npm install -D less
 
# .stylus
npm install -D stylus

注意事项：

Vite 为 Sass 和 Less 改进了 @import 解析，以保证 Vite 别名也能被使用。
另外，url() 中的相对路径引用的，与根文件不同目录中的 Sass/Less 文件会自动变基以保证正确性。
由于 Stylus API 限制，@import 别名和 URL 变基不支持 Stylus。
你还可以通过在文件扩展名前加上 .module 来结合使用 CSS modules 和预处理器，例如 style.module.scss

6、安装并初始化Vuex
(1)安装

npm install vuex@next --save

(2)初始化

//src/store/index.ts
import { createStore } from 'vuex'

const store = createStore({
    state: {},
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})

export default store

//mian.ts
import { createApp } from 'vue'

import router from './router'
import store from './store'
// import '@/assets/css/index.scss'
import App from './App.vue'

// console.log('进入')
const app = createApp(App)
// console.log('进入')

app.use(router)
app.use(store)
app.mount('#app')

7、安装必要插件并配置
（1）安装unplugin-vue-components
按需引入自定义组件,自动引入插件，可以省去比如 UI 库的大量 import 语句

npm i unplugin-vue-components -D

在vite中使用

import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig {
  // ...
  plugins: [
    // 按需引入
    Components({
      dts: true,
      dirs: ['src/components'], // 按需加载的文件夹
      resolvers: [ElementPlusResolver()] // ElementPlus按需加载
    })
  ],
  // ...
}

（2）安装unplugin-auto-import
自动导入composition api 和 生成全局typescript说明

npm i -D unplugin-auto-import

import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
  plugins: [
    ...
     AutoImport({
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
          /\.md$/, // .md
        ],
        dts: false,
        imports: ['vue', 'vue-router', {
          './src/utils/env': ['apiBase'],
        }],
      }),
  ]
})

声明全局后会自动生成全局变量文件

（3）现在vue组件中可以直接使用composition api

//before
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
</script>

//after
<script lang="ts" setup>
const count = ref(0)
const router = useRouter()
</script>

8、和服务端交互
（1）基于 axios 封装请求模块
（1）安装 axios：

npm i axios

（2）基本配置
前提在 env中配置了不同环境下的apiBase变量

import axios from 'axios'

import { AxiosReqTy, AxiosConfigTy } from '../../types/common'

const service: any = axios.create()

// 请求拦截
service.interceptors.request.use(
    (request: AxiosReqTy) => {
        request.headers['AUTHORIZE_TOKEN'] = 'token' //设置token
        request.headers['X-GW-AccessKey'] = "XGWAccessKey"; //配置网关
        /* download file*/
        if (request.isDownLoadFile) {
            request.responseType = 'blob'
        }
        /* upload file*/
        if (request.isUploadFile) {
            request.headers['Content-Type'] = 'multipart/form-data'
        }
    },
    (err: any) => {
        Promise.reject(err)
    }
)

// 响应拦截
service.interceptors.response.use(
    (res: any) => {
        // debugger
        const { data, status } = res
        //更新token保持登录状态
        if (status == '200') {
            return data
        } else {
            // ElMessage({
            //     message: data.msg,
            //     type: 'error',
            //     duration: 2 * 1000
            // })
        }
    },
    (err: any) => {
        return Promise.reject(err)
    }
)

export function axiosReq({
    url,
    data,
    method,
    isParams,
    bfLoading,
    afHLoading,
    isUploadFile,
    isDownLoadFile,
    baseURL,
    timeout,
    isAlertErrorMsg = true
}: AxiosConfigTy): any {
    return service({
        url: url,
        method: method ?? 'get',
        data: data ?? {},
        isParams: isParams ?? false,
        bfLoading: bfLoading ?? false,
        afHLoading: afHLoading ?? true,
        isUploadFile: isUploadFile ?? false,
        isDownLoadFile: isDownLoadFile ?? false,
        isAlertErrorMsg: isAlertErrorMsg,
        baseURL: baseURL ?? apiBase.baseURL,
        timeout: timeout ?? 15000
    })
}

（3）封装api

import { request } from '@/utils/request'
import { ObjTy } from '../../types/common'

export function loginReq(data?: ObjTy) {
    return request({
        url: '/permission/user',
        data,
        method: 'get',
        bfLoading: false,
        isParams: true,
        isAlertErrorMsg: false
    })
}

9、安装element-plus
官方地址：参考地址
（1）安装

npm install element-plus --save

（2）完整引入
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Volar 支持#
如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

（3）按需导入

之前vite配置参考
安装 unplugin-vue-components和 unplugin-auto-import

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