从0到1搭建一个vue3+ts+vite项目，集成axios、router、sass、ant design vue组件库等。

• 可能文章会有点长，我每个测试都带有截图，耐心看完，一定会有所收获的！

1. npm创建项目

创建

npm create vite news-html --template vue-ts 

• 之后会让你选择，选择vue，ts即可。

• 好了之后会有提示的，进入项目主目录，然后npm安装一下依赖，安装成功npm run dev把项目跑起来即可

测试

到这个时候，基本的项目架子已经是好了，那肯定还没有完，我们再添加点东西，让它变得更加健壮、完美。

集成sass

• 说到sass，肯定有很多小伙伴头疼，因为安装node-sass过程中经常报错，我们现在直接用drat-sass，就不会有些这问题了，这也是sass现在主推的

就是想要安装node-sass的小伙伴也不要慌，我之前文章好像有写。注意：报错基本都是出在node版本 不对应上。再说一句：还是建议用drat-sass，方便快捷

安装

npm install --save-dev sass

测试

集成vue-router

安装

• npm install vue-router@4

安装成功，来看一下 package.json

使用

1. 在src下面建立一个router目录，里面存放有关路由的文件，同时建立两个目录写两个文件，方便后面测试路由是否挂载成功。(我这里页面统一放在view目录下)

router/index.ts

view/home/index.vue

• 注意：App.vue页面我们需要放置一个 路由占位符，路由会被渲染在此位置。

• 最后，我们在main.ts挂载一下。不幸的是 碰见问题了，克服困难。解决了就有成长。

导致这个问题的原因就是使用了ts，没有配置 导致找不到对应的声明，我们在配置一下tsconfig.json(创建出来的ts项目根目录下有这个文件的)

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "skipLibCheck": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    /* Bundler mode */
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

• 以上配置主要是paths那一块配置解决这个问题，这样ts就可以找到识别到文件了
• 配置成功，不爆红线了，但是控制台又报错了。。确实搞人心态了，继续排查

• 又是找不到文件，我鼠标左键其实都可以点过去的，我们在vite.config.ts里面配置一下别名

成功，也不报错了。

测试

注意：有些小伙伴跟着我vite.config.ts里面path肯定会找不到的，这是因为path是node里面的东西，我们需要安装@types/node，才可以识别到path

• npm install -D @types/node

集成Ant Design Vue组件库

• 我也是第一次用哈哈(之前都是用的element，想尝试一下这个框架，听说也很不错)

安装

• npm install ant-design-vue@4.x --save 先安装这个组件库
• npm install unplugin-vue-components -D 自动按需引入组件

vite.config.ts配置

• 加入我框住的代码

测试

集成axios

安装

• npm install axios

二次封装axios

• 创建utils目录，在utils目录下创建request.ts文件
• 其余的根据自己公司业务在这基础上添加逻辑代码即可。

import axios from 'axios'
import type {AxiosError, AxiosInstance, AxiosResponse, InternalAxiosRequestConfig} from "axios"
import {message as Message} from 'ant-design-vue';
// 自定义axios示例
const instance: AxiosInstance = axios.create({
  baseURL: 'http://localhost:8080/news_server', // 接口前缀地址
  timeout: 1000 * 10, // 接口超时时间  10秒
});
// 添加请求拦截器
instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  return config;
}, (error: AxiosError) => {
  return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {
  const {code, data, message} = response.data;
  if (code === 200) {
    return data;
  }
  Message.error(message)
  return Promise.reject(new Error(message))
}, (error: AxiosError) => {
  let message = ""
  const status = error.response?.status;
  switch (status) {
    case 401:
      message = "token失效，请重新登录"
      // 这里写退出登录逻辑
      break
    case 404:
      message = "请求地址错误"
      break
    case 500:
      message = "服务器繁忙"
      break
    default:
      message = "网络链接故障"
  }
  Message.error(message)
  return Promise.reject(error);
});
export default instance;

• 我们在创建一个api目录，管理我们的api，不同的api放到对应的目录下，再通过一个index.ts统一管理。

可以看到我这边也写了一个test 测试的方法调用接口获取数据，我们来看看封装的axios到底有没有成功呢

测试

引入unplugin-auto-import

• 每个文件都存在import {onMounted} from "vue" 等代码，想想也挺繁琐的，用这个插件，解放双手，自动引入。

安装

• npm install unplugin-auto-import -D

vite配置

• 配置完 重新运行会在根目录下生成auto-imports.d.ts文件，没有出来的 关掉编译器再打开就有了。

测试

• 我靠，竟然不行，原因是ts没有识别到这个文件，我们再tsConfig.json配置一下

完美

引入Pinia

• 这个我明天加上
• 基础版本就先到这吧，之后封装再更新新文章，太长了也不愿意看不是 哈哈哈。