记录下搭建vite + vue3 + ts + elementPlus项目的过程及遇到的问题，以下整理了两种方法，推荐使用方法二，方法二是vite官网提供的，vite支持多种模板预设，使用起来更加方便，并且方法二生成了vite.config.ts方便配置，方法一中按照vite官网配置了css没有起作用，所以才放弃了：

方法一：

1. 运行环境如下

C:\Users\86151>node --version
v14.18.0

C:\Users\86151>npm --version
6.14.15

C:\Users\86151>yarn --version
1.22.11

C:\Users\86151>vue --version
@vue/cli 4.5.13

2. 命令行安装依赖

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

或

yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

3. 安装typescript、sass、eslint、router、vuex、axios、element-plus插件

自行按需安装即可：

yarn add typescript --dev
yarn add sass --dev
yarn add eslint --dev
yarn add vue-router@4
yarn add vuex@next --save
yarn add axios

或
npm install typescript -D
npm i sass -D
npm i eslint -D
npm i vue-router@4
npm i vuex@next -S
npm i axios
npm i element-plus -S

npm install xxx --save == npm install xxx -S 生产环境的所需依赖也就是咱们的线上环境。
npm install xxx --save-dev == npm install xxx -D 开发和测试所需的依赖也就是咱们本地环境

4. 配置路由

在src目录下新建router文件夹，并在router下新建index.ts进行路由配置。在src目录下创建views/Home.vue

import * as VueRouter from "vue-router";

const routes = [
  {
    path: "/",
    component: () => import("../views/Home.vue"),
  },
];

export default VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
});

此时报错，找不到模块“***.vue”或去相应的类型声明，如图：

解决方案： src文件夹下创建shims-vue.d.ts,使ts文件能够识别.vue类型的文件

declare module "*.vue" {
  import { App, defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent> & {
    install(app: App): void;
  };
  export default component;
}

Home.vue内容如下：

<template>
  <h5>{{ msg }}</h5>
</template>

<script lang="ts">//注意此处lang="ts"标识
import { defineComponent, reactive, toRefs } from "vue";

interface State {
  msg: string;
}

//defineComponent在TypeScript下，给予了组件正确的参数类型推断
export default defineComponent({
  setup() {
    const state = reactive<State>({
      msg: "我是Home.vue",
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

5. main.js引入并注入element-plus,router

import { createApp } from "vue";
import router from "./router";//引入路由
import ElementPlus from "element-plus";//引入element-plus
//引入element-plus样式，不同版本路径可能不同，根据实际node_modules里路径或官网查找 
import "element-plus/dist/index.css";
import App from "./App.vue";

createApp(App).use(ElementPlus).use(router).mount("#app");

6. App.vue添加渲染视图组件

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App",
};
</script>

7. 启动项目

yarn dev

访问效果如下：

方法二：

附加官网地址：vitejs.cn/guide/#%E6%…

1.搭建vite项目，

兼容性注意，Vite 需要 Node.js 版本 >= 12.0.0。使用 NPM:

npm init @vitejs/app

使用 Yarn:

yarn create @vitejs/app

然后按照提示操作即可！

1637628930(1).jpg

按照红框的命令运行完成之后，出现熟悉的画面

1637629058(1).jpg

打开package.json,可以看到typescript依赖已经安装好了，也无需再添加多余的对于ts的支持。

1637629190(1).jpg

2.按需安装依赖,配置路由，挂载依赖,如方法1-3

以下是我安装的：

yarn add sass --dev

yarn add element-plus

yarn add vue-router@4

yarn add vuex@next --save

3.添加全局的颜色变量

创建var.scss,目录为src\assets\scss\var.scss,内容如下，

$primary-color: #2f69eb;

直接在.vue文件中使用会报错的，

[plugin:vite:css] Undefined variable.
  ╷
3 │   background-color: $primary-color;
  │                     ^^^^^^^^^^^^^^
  ╵
  src\components\Layout.vue 3:21  root stylesheet

解决方法： vite.config.ts中添加css预处理器的指向,重新启动即可

import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue';


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/scss/var.scss";`,
      },
    },
  },
});

vite+vue3+ts+elementPlus项目搭建