创建一个Vue3+TS+vite项目

1、首先使用npm init vite@latest安装
2、安装vue-router，npm install vue-router --save，src目录下创建router文件夹router文件夹内创建index.ts，配置如下

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

const routes = [{
  path: '/',
  name: 'Home',
  component: () => import('../views/home/index.vue'),
  meta: {title: '首页'}
}];

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

export default router

3、安装vuex，npm install vuex --save，src目录下创建store文件夹router文件夹内创建index.ts，配置如下

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

4、main.ts中引入router如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入router
import store from './store' // 引入vuex

createApp(App).use(router).use(store).mount('#app') // 链式引入router和vuex

5、其他配置

一、如需使用scss
1、npm i sass-loader
2、npm i node-sass
二、如需使用安装postcss-px-to-viewport，将px单位转换为视口单位的 (vw, vh, vmin, vmax) 插件.
1、npm install postcss-px-to-viewport --save-dev
2、相应配置参数如下
{
  unitToConvert: "px", // 默认值`px`，需要转换的单位
  viewportWidth: 375, // 视窗的宽度,对应设计稿宽度
  viewportHeight: 667, // 视窗的高度, 根据375设备的宽度来指定，一般是667，也可不配置
  unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
  propList: ["*"], // 转化为vw的属性列表
  viewportUnit: "vw", // 指定需要转换成视窗单位
  fontViewportUnit: "vw", // 字体使用的视窗单位
  selectorBlaskList: [".ignore-"], // 指定不需要转换为视窗单位的类
  mediaQuery: false, // 允许在媒体查询中转换`px`
  minPixelValue: 1, // 小于或等于`1px`时不转换为视窗单位
  replace: true, // 是否直接更换属性值而不添加备用属性
  exclude: [], // 忽略某些文件夹下的文件或特定文件
  landscape: false, // 是否添加根据landscapeWidth生成的媒体查询条件 @media (orientation: landscape)
  landscapeUnit: "vw", // 横屏时使用的单位
  landscapeWidth: 1134 // 横屏时使用的视窗宽度
}

三、安装element-plus及引入配置
npm i elem

main.ts追加以下配置
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/theme-chalk/index.css'

createApp(App).use(store).use(router).use(ElementPlus, {
  locale: zhCn
}).mount('#app')

6、注意事项

一、vite引入scss报错
[vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?
使用npm安装sass
npm install sass --save-dev

二、element-plus的汉化问题
如果main.js引入的汉化无效的情况下，需要去往app.vue配置汉化，如下配置
<template>
    <test-vue />
    <!-- 设置汉化 -->
    <el-config-provider :locale="locale">
      <router-view/>
    </el-config-provider>
</template>

<script lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
export default {
  components: {
    [ElConfigProvider.name]: ElConfigProvider
  },
  setup () {
    return {
      locale: zhCn
    }
  }
}
</script>