vue + ts + pinia项目搭建

创建项目

1. 先创建个空目录，如webOA
2. 进入该目录打开终端
   Windows：快捷键win + r ,输入cmd打开终端，通过cd进入该目录，或者在该目录下右键打开终端
   Mac：command + 空格输入terminal打开终端，通过cd进入该目录
3. 使用命令npm create vite@atest⇒ 选择y ⇒ 选择vue ⇒ 选择typescript，这样最基础的框架已经完成，接下来安装相关依赖。

启动项目

1. 首先npm install安装所需依赖，vite不会自动为我们安装相关依赖，然后npm run serve项目就可以启动了

处理一些配置问题

1. 引入vue文件红线报错问题
   原因：找不到 vue模块
   解决方法： 需要将tsconfig.json文件中 moduleResolution设置成node
   
   2. main.ts红线报错问题
   原因：找不到 vue模块
   解决方法： 找到 vite-env.d.ts 文件，在里面追加如下代码，保存即可

declare module "*.vue" {
   
    import type {
    DefineComponent } from "vue";
    const vueComponent: DefineComponent<{
   }, {
   }, any>;
    export default vueComponent;
}

3. 写ts语法变量名未饮用也会报错
解决方法： 在 tsconfig.json 中将noUnusedLocals改为false，不去校验未使用的变量。

4. 设置路径别名，将相对路径改为绝对路径
@types/node 模块 在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。
（1）安装 @types/node
npm i @types/node -D
（2）在 tsconfig.json 中设置 path

"baseUrl": ".",
    "paths": {
   
      "@/*": ["src/*"]
    }

（2）在 vite.config.ts 中配置

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

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [vue()],
  resolve: {
   
    alias: [
      {
   
        find: "@", replacement: path.resolve(__dirname, "src")
      }
    ]
  }
})

这样就可以使用@代替src目录了

安装相关依赖

1. 安装路由
   npm i vue-router
   (1) 在src下创建目录views，在此目录下存放页面。