乐趣区

关于前端:搭建vue3vitets项目

jiezi

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')
退出移动版