关于前端:搭建vue3vitets项目

https://cn.vitejs.dev/

1、应用vite初始化我的项目，进入我的项目装置依赖包

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

2、目录调整

指标：可能调整我的项目的目录构造，标准开发环境。

• 批改文件

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

<template>
  <div>app组件</div>
</template>

• 删除我的项目中不须要的文件

  • 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')