vite+vue3+ts框架搭建问题记录

404

按官网提示执行npm init vite@latest报错

node版本太低，更新node版本即可，window不能使用命令行更新，重新下载node安装包。

下载地址用下载 | Node.js 中文网更快
vite创建的vue项目没有内置依赖，自己安装依赖
npm install axios vue-router vuex element-plus
npm install eslint eslint-plugin-vue sass unplugin-auto-import unplugin-vue-components -D

配合别名报错找不到模块 “path“ 或其相对应的类型声明

解决方式：npm install @types/node -D

使用时找不到模块“@/store”或其相应的类型声明配置两个地方

// vite.config.js
resolve: {alias: {'@': resolve(__dirname, './src')}},

// tsconfig.json
"paths": {"@/*": [ "src/*" ],
},

最关键的在于如果还报错，重启vscode。
使用vue3后 vetur的支持不太好，没有注册组件都会有提示报错，官网上有介绍应该使用volar插件，禁用vetur。

注册全局svg时，require.context('./ts', false, /\.ts$/);因为require为webpack的语法所有不能用了，import.meta.globEager()代替。最新的会报 “globEager”已弃用。根据importMeta.d.ts

interface ImportMeta {url: stringreadonly hot?: import('./hot').ViteHotContextreadonly env: ImportMetaEnvglob: import('./importGlob').ImportGlobFunction/*** @deprecated Use `import.meta.glob('*', { eager: true })` instead*/globEager: import('./importGlob').ImportGlobEagerFunction
}

用import.meta.glob('./svg/*.svg', { eager: true })代替。

因为之前是安装的最新版本的node 16.16.0。导致之前老项目启动报错，node-sass切为sass也是不行，会报sass-loader没有安装。附node-sass对应node版本查看。

经同事了解到可以用nvm做node版本控制，下面是nvm安装过程：
1. 首先要卸载电脑中已存在的node-不卸载会很麻烦配置，建议卸载
2. 下载nvm安装有说在C盘好，不用配置环境变量，有说在D盘好的，防止找不到nvm。目前安装在了C盘，环境变量省的配置了。
3. 按照官网命令安装node之前可以先配置settings.txt 文件增加

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

否则可能下载失败导致npm不能下载。不过手动下载放到node_module目录下也是可以的。

附nvm下载地址https://github.com/coreybutler/nvm-windows/releases：Releases · coreybutler/nvm-windows · GitHub

附node官网nvm示例http://nodejs.cn/download/package-manager/#nvm

安装之后又遇到一些问题

npm 不能安装，网上查找修改路径nvm/node版本号/npm.cmd与npm为

但是还不好使，后查找有说升级版本相关博客链接

升级之后安装么得问题了。npm node明明安装了但是使用npm命令还是会报错，一般都是版本不对应的问题，来回切一下版本就可以了

ps:刚安装完使用nvm命令可能找不到，重启就好了。刚配置setting.txt可能不生效，重启就好了，解决问题的最快方式就是重启。

关于引入svg：
1. 安装插件 npm install vite-plugin-svg-icons -D
2. 配置svg缓存，配置完成的效果是审查元素可以看到页面引入了很多icon文件，vite.config.ts下

plugins: [vue(),createSvgIconsPlugin({//  指定需要缓存的图标文件夹iconDirs: [resolve(process.cwd(), "src/icons")],// 指定symbolId格式symbolId: "icon-[name]",}),],

3. 编写svg组件 Svg/Icon/index.vue

<template><svg class="svg-icon" aria-hidden="true"><use :xlink:href="symbolId"/></svg>
</template><script lang="ts" setup>
import { computed } from 'vue';interface IProps {/** svg 的图标的名称 */iconClass: String
}
const props = defineProps<IProps>();
const symbolId = computed(() => `#icon-svg/${props.iconClass}`); // 缓存的svg Id就是这个格式的
</script>
<style scoped lang="scss">
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor; // currentColor为变量overflow: hidden;
}
</style>

ps: 遇到手动下载有填充颜色的svg，currentColor不生效，看来是源码里的fill属性优先级更高，删除源码内fill即可

4. main.ts 引入svg和注册全局组件

import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue'// svg组件const app = createApp(App)
app.component('svg-icon', SvgIcon)

5. 就可以开始使用了，比如文件下有一个名称为user的svg则页面中这么使用

<svg-icon icon-class="user" />

附vite-plugin-svg-icons文档地址

404页面配置
带参数的动态路由匹配 | Vue Router

关于无法全局scss文件重置element-plus样式问题

element-plus 编写全局样式重置时发现权重总是没有element-plus自己的高，虽然自定义样式文件引入已经是在import "element-plus/dist/index.css"引入之后了。

解决办法：

增加一个父级选择器 #app{} 重置样式写入其中，治标办法。

vue报错： JSX 元素类型“ElButton”不具有任何构造签名或调用签名

原因是defineEmits的不规范使用，找了好久没想到这个会影响上面的dom语法报错

5. 关于引用postcss-pxtorem 具体安装方法网上都有很多也没有遇到什么问题、在搭配sass一起使用时会如果使用之前的语法::v-deep :deep {} sass运行还是能识别，但是postcss-pxtorem这玩意不识别，所以会出现使用不规范sass的文件无法转换rem的问题

关于实现动态路由页面404问题

在实现后端权限菜单时发现页面会跳转404页面、排查addRoutes已弃用使用addRoute添加路由，排查路由格式与component组件引入是否报错、采用es6的import不支持变量只能使用常量、排查后都没问题仍然跳转404，最后发现在router.js里还有静态添加的404 *捕获，导致页面还未访问动态路由就被404捕获，解决办法：删除静态404路由文件、在动态路由添加最后增加404路由。

vite+vue3+ts框架搭建问题记录相关推荐

vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...
Uni-APP+Vite+Vue3+TS+Vant 搭建项目
一.创建工程下载官方的cli代码 https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip 解压缩后执行下面命令即 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
vite+vue3+ts+element-plus项目搭建--超详细
vite+vue3+ts+element-plus项目搭建–超详细 vite 作用快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待 ...
vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium 安装cesium:npm i cesium vite-plugin-cesium vite -D 在vite.config.ts中进行相应的cesiu ...
用 Vite+Vue3+Ts 搭建通用后台管理系统
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cl ...
用vite+Vue3+ts搭建通用后台管理系统
点击上方关注前端技术江湖,一起学习,天天进步通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可 ...
一套通用的VUE后台管理系统方案（vite+Vue3+ts）
通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可配置性也非常高,几乎能够满足前端工程化的所有要求 ...
vite+vue3+ts使用i18n
vue3使用i18n必须使用9.*版本 "vue-i18n": "^9.2.2" 目录 1.下载使用 1.1.创建配置 1.2.基本使用 1.3.这时会有一个警 ...

vite+vue3+ts框架搭建问题记录

vite+vue3+ts框架搭建问题记录相关推荐

最新文章

热门文章