首页 > 其他分享 >工作日志:从零搭建vue3+ts+sass项目(3)

工作日志:从零搭建vue3+ts+sass项目(3)

时间:2024-09-10 18:51:56浏览次数:10  
标签:npm vue sass ts 报错 pinia vue3 import

折腾了两天后,发现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

相关文章

  • 论文笔记--See through Gradients. Image Batch Recovery via GradInversion
    SeethroughGradients.ImageBatchRecoveryviaGradInversion\(W^{FC}\in\mathbb{R}^{M\timesN}\),其输入为一个M维向量\(v\in\mathbb{R}^M\),\(\DeltaW^{FC}_{m,n,k}\)是损失函数对全连接层\(W\)的导数。对于一个特定的类别\(n\),(\(z\)为全连接层输出的logits),其......
  • 来自Hootsuite专家的17个不那么秘密的社交媒体视频小贴士
    如何为X(Twitter)、Facebook、LinkedIn、Instagram和TikTok安排社交视频有关创建社交媒体视频内容的常见问题解答为什么社交媒体营销人员要带头灯上班?因为他们即将为17条社交媒体视频技巧照亮方向!(不,不是因为他们忘了带家的自拍环灯。)这篇博客分享了一些聪明点子和社交视频最佳......
  • Ts+正则表达式格式化时间
     1.padStart:padStart(targetLength,padString):用另一个字符串填充当前字符串(如果需要会重复填充),直到达到给定的长度。填充是从当前字符串的开头开始的。最后返回一个新的字符串。targetLength:当前str填充后的长度。如果该值小于或等于str.length,则会直接返回当前str。pa......
  • Vue3项目开发——新闻发布管理系统(六)
    文章目录八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染4、退出功能实现①注册点击事件②添加退出功能③数据清理5、代码下载......
  • vue3 什么是Composition API 我为什么要使用它?
    CompositionAPI(组合式API)是Vue3中引入的一组全新的API,旨在提供一种更加灵活和可组合的方式来组织和复用组件逻辑。这一改变是Vue.js向函数式编程和更现代的开发方式迈出的重要一步。以下是CompositionAPI的详细解析:一、基本概念定义:CompositionAPI是一组允许开发者以函......
  • vue3常见的bug 修复bug
    Vue3作为Vue.js的最新版本,在性能、开发体验以及代码可维护性等方面带来了显著的提升。然而,就像任何软件框架一样,Vue3在使用过程中也可能遇到一些典型的bug或问题。以下是一些可能遇到的典型问题:响应式系统相关的问题:状态或数据更新不及时:由于Vue3使用Proxy来实......
  • VUE框架Vue3使用自定义的ref实现延迟加载效果的实现解决setTimeout过多导致的抖动问题
    import{customRef}from"vue";exportdefaultfunction(){//自己定义一个reffunctionuseDebouncedRef(value){//自定义的ref函数体需要符合ref规范//通过调用customRef来获取一个ref实例//调用customRef必须要给出一个回调函数作为形......
  • RL6577/RTS5765DL量产工具,RTS5765DL+B47R扩容开卡修复,金士顿NV2 2TB假固态硬盘抢救记
    之前因为很长时间不买固态硬盘,没注意到NVME的固态盘也有了假货和扩容盘,花200多块买了个2TB的金士顿NV2固态硬盘,我原本以为NV1的假货最多是用黑片冒充正片,结果没想到NV2居然有扩容的。后来发现是扩容盘的时候,已经过了自动收货期限了。最后只能尝试重新开卡,尽量降低损失。首先......
  • C++ 如何检查两个给定的线段是否相交(How to check if two given line segments inters
    给定两条线段(p1,q1)和(p2,q2),判断给定的线段是否相交。在讨论解决方案之前,让我们先定义方向的概念。平面中有序点三元组的方向可以是 –逆时针 –顺时针 –共线 下图显示了(a,b,c)的不同可能方向 方向在这里有什么用处? 两条线段(p1,q1)和(p2,q2)相交,当且仅当以下......
  • C# 在给定斜率的线上找到给定距离处的点(Find points at a given distance on a line o
     给定二维点p(x0,y0)的坐标。找到距离该点L的点,使得连接这些点所形成的线的斜率为M。例子: 输入:p=(2,1)    L=sqrt(2)    M=1输出:3,2    1,0解释:与源的距离为sqrt(2),并具有所需的斜率m=1。输入:p=(1,0)   ......