搭建vue3+vite+ts项目

https://cn.vitejs.dev/

1、使用vite初始化项目，进入项目安装依赖包

npm create vite rabbit-vue3-ts --template vue-ts

2、目录调整

目标：能够调整项目的目录结构，规范开发环境。

• 修改文件

  • main.ts 不需要修改
  • App.vue 删除无用的内容

• 删除项目中不需要的文件

  • src/components/HelloWorld.vue HelloWorld 组件
  • src/assets/logo.png vue 默认的 logo

• 新增文件夹

  • utils 用于存放工具相关
  • assets/images 用于存放图片相关
  • assets/styles 用于存放样式相关
  • router 用于存放路由相关
  • store 用于存放数据相关
  • views 用于存放页面级别的组件
  • types 用于存放 ts 的公共类型

3、axios封装

• 安装：npm add axios
• 新建 src/utils/request.ts 模块，代码如下

• import axios from 'axios'
  
  const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front.itheima.net/',
  timeout: 5000
  })
  
  // 添加请求拦截器
  instance.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
  )
  
  // 添加响应拦截器
  instance.interceptors.response.use(
  function (response) {
    return response
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
  )
  
  export default instance

  4、配置路径别名

  目标：能够配置@路径别名，方便导入模块

• 在vite.config.ts中增加配置

• import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  const path = require('path')
  export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
  })

• 需要安装node的类型声明文件：npm add @types/node -D
• 修改tsconfig.json,增加如下配置

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

注意：修改完 vite.config.ts 文件需要重启

5、样式处理-- less变量 与 mixins

目标： 能够使用 less 变量定义项目中常用的颜色，使用 mixins 定义项目中常用的样式

• 变量 src/assets/styles/variables.less（按照自己项目设置）

// 主题
@xtxColor: #27ba9b;
// 辅助
@helpColor: #e26237;
// 成功
@sucColor: #1dc779;
// 警告
@warnColor: #ffb302;
// 价格
@priceColor: #cf4444;

• 混入 src/assets/styles/mixins.less（按照自己项目设置）

// 鼠标经过上移阴影动画
.hoverShadow () {
  transition: all 0.5s;
  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  }
}

• 自动导入样式

  能够使用style-resoures-loader自动导入项目中的less变量和mixins

  • 修改vite.config.ts文件，增加内容

  export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        additionalData:
         `
          @import "@/assets/styles/variables.less";
          @import "@/assets/styles/mixins.less";
         `
      }
    }
  }
  })

  • 重启服务，查看效果

• 重置样式

  目标：能够使用功能normalize.css重置项目中的样式，normalize.css 是 CSS 重置的现代替代方法

  • 安装 normalize.css：npm add normalize.css

  • 使用：main.js 导入 normalize.css 即可。

    import { createApp } from 'vue'
    import App from './App.vue'
    
    +import 'normalize.css'
    
    createApp(App).mount('#app')