折腾了两天后,发现elementPlus的代码都是ts的,本来不想现在用ts,因为非常不熟悉,但长痛不如短痛,重开项目!直接vue3+vite+ts+sass!让暴风雨来得更猛烈一下吧!我差那几个bug吗?
1、执行命令如下:
npm create vite@latest
npm install
npm install sass -D
npm i vue-router
2、在src下创建文件夹和文件,过程很丝滑,没有bug,说明这肯定是一条正确的道路啊。
3、刚说完过程丝滑,bug这不就来了?安装pinia后,在main.ts中引入,就报错了。
修改vite.config.ts文件如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{
find: '@', // 别名
replacement: resolve(__dirname, 'src'), // 别名对应地址
},
{
find: 'components',
replacement: resolve(__dirname, 'src/components'),
}
]
}
})
又出问题:找不到模块“path”或其相应的类型声明。
好的,继续安装path吧!(保持微笑)。
4、安装 @types/node 模块,解决 path 模块报错的问题。
npm i @types/node -D
5、path不报错了,可是pinia报错的问题还是没有解决啊!继续排查……
好好好……排查半天,原来是import App from './App.vue’这句话的问题,是因为App.vue这个文件中报错了,最后把文件报错修改完,pinia的问题也就没有了。
开心不到两分钟,又提示:找不到模块“pinia”或其相应的类型声明。百度不出原因,已疯……
平静下来,继续操作。
npm uninstall pinia
npm i pinia -D
好,目前为止不报错了。
在package.json文件中发生了点变化。pinia版本由2.0改成了2.2,从dependencies对象里转移到了devDependencies对象里。devDependencies是用于在开发环境下依赖的模块,而dependencies就是无论开发环境还是生产环境都需要的依赖模块。
6、开始安装elementplus。
npm install element-plus --save
在main.ts文件里写入:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
好,完成!
就让今天的bug结束在这里吧!接下来的时间,一切顺利!
但并不顺利,那个pinia又开始提示找不到模块了。它也是太随心所欲了。什么时候我解决了再总结吧,现在我毫无办法。
PS:补充俩知识点。
npm命令中,-D是开发依赖,会把包添加到package.json的devDependencies下,这些包只在做项目的时候会使用到,在项目打包上线后不依赖于这些包项目依然可以正常运行。比如:gulp/webpack、eslint、sass等等。
-S是生产依赖,会把包添加到package.json的dependencies下,这些包在项目打包上线后依然需要使用项目才能正常运行,比如:axios、element-ui、vue-router等等。
标签:npm,vue,sass,ts,报错,pinia,vue3,import From: https://blog.csdn.net/qq_42812154/article/details/142095950