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