新建一个项目
2025-01-15 10:24 WEB前端小菜鸟 阅读(48) 评论(0) 收藏 举报
参考：https://www.cnblogs.com/liandudu/p/17559780.html
第一步：
vite官网搭建项目 pnpm create vite或者 yarn create vite--自己选vue 然后js 我不想用ts---然后pnpm install 安依赖 然后pnpm run dev启动搞定
第二步：
pnpm install vue-router --save
新建router文件夹下新建index.ts 书写路由（自己写2个页面） 然后main.ts导入路由并挂载路由
router-view输出
<router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.
网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和<router-view>处于同一个等级.
在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变
import.meta.env.BASE_URL 这个变量，它是由 Vite 提供的环境变量，详见 Vite 官网
使用其他构建工具请自行替换为对应构建工具提供的环境变量，
如使用 @vue/cli 创建的项目因为是基于 Webpack ，所以使用的是 process.env.BASE_URL
但是实际中 vite项目中两者都能打印出来
console.log(process.env.NODE_ENV,'看了看')
console.log(import.meta.env.BASE_URL,'看了看')
更改app.vue 添加路由出口
router/index.js 添加路由信息，然后就可以浏览器上跳转路由了
草塔大爷的，哈希模式不是这个api 是这个 createWebHashHistory，fuck改这个就行了
第3步：清除所有默认的css
先删除这个css
pnpm install normalize.css 然后main.js引入，不好用
虽然它清除了body的默认样式，但是H1的margin它并没有清除，so我还是自己写一个reset.css （喊豆包写一个）搞定这些不光body没得默认margin， h1也没得了
第4步:安装less
pnpm install less-loader less --save-dev
第5步:安装element-plus，且按需引入，且按需引入图标【看官网】
@1全部引入,打包1.21M--如图
@2按需引入：pnpm install -D unplugin-vue-components unplugin-auto-import ,打包176 KB ,我操尼玛 比1.21M小太多了，按需引入还是香啊
main.js注释掉这2个，按需引入不需要这3个
按需引入 vite.config.js配置（copy官网）
AutoImport 插件【这里有个问题，我定义变量的时候认不到ref】
解决方案：
vite.config.js中加上这句话
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
// 确保导入 Vue 3 的组合式 API,如ref等
imports: ['vue'],
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
实测OK，如图
pnpm install @element-plus/icons-vue
如果要使用中文（虽然它默认中文），就要引入element-plus，亲测打包后跟完全引入打包后大小差不多了，但是页面上不用一个个引入了，因为配置了按需引入，只是打包大小差不多而已，就这样把，万一以后它要国际版呢，到时候替换一波就行了（把zhCn替换成引文）
第6步:配置路径别名（延伸一下：多别名配置）
vite.config.js配置 搞定
延伸一下：多别名配置，还是挺不错的
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@components': path.resolve(__dirname, 'src/components'),
'@views': path.resolve(__dirname, 'src/views'),
'@assets': path.resolve(__dirname, 'src/assets'),
}
}
第7步:配置px转化为vw的（保证浏览器放大缩小样式错乱的问题）
pnpm install postcss-px-to-viewport postcss-loader autoprefixer --save-dev
然后配置vite.config.js---搞定
但是本插件无法转化style内联样式：尽量避免使用内联样式，因为 postcss-px-to-viewport 主要针对 CSS 文件或 <style> 标签中的样式。例如，将内联样式改为 <style> 标签：
第8步:配置pinia
第9步:配置axios
pnpm install axios
pnpm install qs 序列化--针对不同的Content-Type类型 -处理数据（
）
如何动态配置
Content-Type
# API 基础地址 VITE_APP_BASE_URL=http://localhost:3000/api # API 超时时间（毫秒） VITE_APP_API_TIMEOUT=5000
ReferenceError: process is not defined 报错时，通常是因为 Vite 默认使用 ES 模块标准，而 process 是 Node.js 环境中的全局对象，在浏览器环境中不存在。// 正确使用 Vite 的环境变量
import.meta.env.VITE_API_URL 搞定 【】
解决方案是使用proviede inject替代globalProperties
在使用的组件里面接收这个实例
// 接收axios实例
const fetchData = async () => {
try {
// 发送 Post 请求
let params = {
dateId: "",
typeId: null,
};
const resData = await $api.post(userModels.loginUrl, params);
console.log(resData, "打印一下呢");
} catch (err) {
console.log("error");
} finally {
console.log("最终");
}
};
就可以调用接口了，然后报错跨域的问题。
明明我已经改了跨域设置：它还是报跨域，原来
原来这个也要改成本地地址才能代理到目标地址，搞定
为啥本地打印出来是生产没搞明白
npm run build 时，Vite 会加载 .env.production 文件中的环境变量.env.test），可以在 package.json 中添加自定义脚本 "build:test": "vite build --mode test"
第10步:配置eslint
浙公网安备 33010602011771号