Vue3 + Vite + Ts + Router搭建项目

1、新建文件夹

        从新建的文件夹cmd进入终端

        

2、安装vite—依据vite创建vue3项目
        2.1、运行
npm init vite@latest
        2.2.1、输入项目名称

        2.2.2、选择vue

2.2.3、选择TypeScript语言

3、安装依赖项
        3.1、进入刚才创建的文件夹
cd vite-project
        3.2、查看镜像
#查看当前源
npm config get registry

#更换为国内镜像
npm config set registry=http://registry.npm.taobao.org/
        3.3、启动项目
npm run dev

注意:启动项目时候报错:No package.json (or package.yaml, or package.json5) was found in "E:\Miss D\mars3dMy".

原因:启动项目的根目录没找到,检查下终端打开是否错误

4、配置基础
        4.1、pnpm下载东西会更快一些
npm in pnpm
        4.2、配置typeScript依赖项
npm install @types/node --save-dev
        4.3、修改vite.config.ts配置文件代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  //解决“vite use `--host` to expose”
  base: './',	//不加打包后白屏
  server: {             
    host: '0.0.0.0',	
    // port: 8080,      
    open: true
  },
  resolve:{   
    //别名配置,引用src路径下的东西可以通过@如:import Layout from '@/layout/index.vue'
    alias:[   
      {
        find:'@',
        replacement:resolve(__dirname,'src') 
      }
    ]
  }
})

注意:出现以下红色波浪线

解决:在tsconfig.node.json中修改配置

        4.4、安装路由
npm install vue-router@4
         4.4.1、在src目录下新建router文件夹,在router里创建index.ts文件

         4.4.2、index.ts中配置路由
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
  //路由初始指向
    path: '/',
    name: 'HelloWorld',
    component:()=>import('../components/HelloWorld.vue'),
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router
        4.4.3、main.ts中挂载路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App);
app.use(router).mount('#app')

注意:会出现红色波浪

原因:1、volar 插件没开takeover模式
               去看volar插件介绍,开takeover模式
            2、volar未选择tyscript最新版本

解决:1、在插件搜索框内输入 typescript (不要删除 @builtin 前缀)

          

         2、点击第一个的右下角的小齿轮,然后选择禁用

          

         3、点击需要重新加载,即可解决问题

         

参考源文连接:vue3 报错解决:找不到模块或其相应的类型声明。(Vue 3 can not find module)-CSDN博客

        4.4.4、修改App.vue
<script setup lang="ts">
</script>
<template>
  <router-view></router-view>
</template>

<style>

</style>
         4.4.5、保存后,运行看是否报错。如图打开了路由指向的HelloWorld.vue页面的内容就对了

注意:打开App.vue红色波浪线报错

解决:是因为vue3不支持vetur插件,将她禁用,使用Vue Language Features插件

源文连接:vue3+ts+vite中 import报错:Moudle ... has no default export_poguanba的博客-CSDN博客

5、配置ts文件采用@方式导入
{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true, 
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,

    //添加---
    "suppressImplicitAnyIndexErrors": true,		//允许字符串用作下标
    "ignoreDeprecations":"5.0",		//高版本上句报错,此句解决。如此句报错可注释掉
     "baseUrl": ".",			
     "paths": {					
      "@/*":[					
        "src/*"					
      ]							
     }							
     //---------
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  
  //添加
  "exclude":["node_modules"]		// // ts排除的文件

}
 源文链接:详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/121511.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【uniapp+vue3/vue2】ksp-cropper高性能图片裁剪工具,详解

效果图&#xff1a; 1、ksp-cropper是hbuilder插件市场中的一款插件&#xff0c;兼容vue2和vue3 ksp-cropper插件安装地址&#xff0c;直接点击跳转 2、插件用法相对简单 &#xff08;1&#xff09;只要url有值就会显示插件&#xff0c;为空就会隐藏插件 &#xff08;2&#…

自动化测试框架 —— pytest框架入门篇

今天就给大家说一说pytest框架。 今天这篇文章呢&#xff0c;会从以下几个方面来介绍&#xff1a; 1、首先介绍一下pytest框架 2、带大家安装Pytest框架 3、使用pytest框架时需要注意的点 4、pytest的运行方式 5、pytest框架中常用的插件 01、pytest框架介绍 pytest 是 pytho…

国产猫罐头可以长期作为主食吗?我家的优质TOP的猫罐头分享

我最近一直在调查国产猫罐头可以长期作为主食吗&#xff1f;看看我的购物订单&#xff0c;我已经尝试了几十款了。今天&#xff0c;我想和大家分享一些关于国产猫罐头的经验和见解。 近年来&#xff0c;国产宠粮市场取得了突破性的进展&#xff0c;各个猫粮商在配方、营养数据…

win10添加回环网卡步骤

打开命令行输入hdwwiz 添加新硬件向导 结果

Visual Studio 2022 + OpenCV 4.5.2 安装与配置教程

目录 OpenCV的下载与配置Visual Studio 2022的配置新建工程新建文件新建项目属性表环境配置测试先写一个输出将OpenCV的动态链接库添加到项目的 x64 | Debug下测试配置效果 Other OpenCV的下载与配置 参考这个OpenCV的下载与环境变量的配置&#xff1a; Windows10CLionOpenCV4…

CUDA学习笔记7——CUDA内存组织

CUDA内存组织 CUDA设备内存的分类与特征 内存类型物理位置访问权限可见范围生命周期1全局内存芯片外可读写所有线程和主机端由主机分配与释放2常量内存芯片外只读所有线程和主机端由主机分配与释放3纹理和表面内存芯片外一般只读所有线程和主机端由主机分配与释放4寄存器内存…

OpenSSL生成自签名证书

生成之前首先需要明白以下内容&#xff1a; 第三点的验证数字签名解释下&#xff1a;客户端将使用颁发机构的公钥解密得到的原始数据&#xff0c;再将原始数据通过哈希算法计算得到的哈希值&#xff08;此处应该是使用CA证书提供的哈希算法&#xff09;进行比对。如果两者一致&…

2022最新版-李宏毅机器学习深度学习课程-P46 自监督学习Self-supervised Learning(BERT)

一、概述&#xff1a;自监督学习模型与芝麻街 参数量 ELMO&#xff1a;94MBERT&#xff1a;340MGPT-2&#xff1a;1542MMegatron&#xff1a;8BT5&#xff1a;11BTuring NLG&#xff1a;17BGPT-3&#xff1a;175BSwitch Transformer&#xff1a;1.6T 二、Self-supervised Lear…

云计算:无所不能的超级英雄

引言 在这个奇妙的时代&#xff0c;云计算如同一位无所不能的超级英雄&#xff0c;无处不在。从智能家居到无人驾驶&#xff0c;从虚拟现实到人工智能&#xff0c;云计算为我们的生活带来了智能、便捷和有趣。它以其强大的能力和灵活性&#xff0c;令我们的生活变得更加智能化…

库存预占架构升级方案设计-交易库存中心

背景介绍 &#xfeff; 伴随物流行业的迅猛发展&#xff0c;一体化供应链模式的落地&#xff0c;对系统吞吐、系统稳定发出巨大挑战&#xff0c;库存作为供应链的重中之重表现更为明显。近三年数据可以看出&#xff1a; &#xfeff;&#xfeff; 接入商家同比增长37.64%、货…

rviz添加qt插件

一、增加rviz plugin插件 资料&#xff1a;http://admin.guyuehome.com/42336 https://blog.51cto.com/u_13625033/6126970 这部分代码只是将上面两个链接中的代码整合在了一起&#xff0c;整合在一起后可以更好的理解其中的关系 1、创建软件包 catkin_create_pkg rviz_tel…

css呼吸效果实现

实现一个图片有规律的大小变化&#xff0c;呈现呼吸效果&#xff0c;怎么用CSS实现这个呼吸效果呢 一.实现 CSS实现动态效果可以使用动画( animation)来属性实现&#xff0c;放大缩小效果可以用transform: scale来实现&#xff0c;在这基础上有了动画&#xff0c;就可以设置一个…

每日汇评:黄金将测试1935美元的200日移动均线

金价在美联储主席鲍威尔发表讲话之前仍然脆弱&#xff1b; 在市场情绪喜忧参半的情况下&#xff0c;美元与美债收益率走势艰难&#xff1b; 在上升的三角形破裂和看跌的相对强弱指数中&#xff0c;黄金价格看向200日移动均线&#xff1b; 黄金周四早时在略低于1950美元的三周…

访问者模式

详情可参考&#xff1a;https://zhuanlan.zhihu.com/p/380161731 意图&#xff1a;主要将数据结构与数据操作分离。 适用于&#xff1a;系统中有稳定的数据结构&#xff0c;且数据结构的功能经常发生变化。 双分派&#xff1a;我的理解是两次多态操作&#xff0c;动态获取对象…

mysql的备份和恢复

备份&#xff1a;完全备份 增量备份 完全备份&#xff1a;将整个数据库完整的进行备份 增量备份&#xff1a;在完全备份的基础之上&#xff0c;对后续新增的内容进行备份 备份的需求 1、在生产环境中&#xff0c;数据的安全至关重要&#xff0c;任何数据的都可能产生非常严重…

PHP保存时自动删除末尾的空格,phpstorm自动删除空白字符串

最近有个活儿&#xff0c;修改一个财务软件。 修改后给客户验收的过程中&#xff0c;客户反应有一个txt表格导出功能不能用了。之前是好的。 这次是新增&#xff0c;老的这个功能碰都没碰过&#xff0c;怎么能有问题呢&#xff1f;我心里OS 下班后我立马用系统导出TXT&#…

如何实现Debian工控电脑USB接口安全管控

Debian 作为工控电脑操作系统具有稳定性、安全性、自定义性和丰富的软件包等优势&#xff0c;适用于要求高度可靠性和安全性的工控应用。 Debian 作为工控电脑操作系统在工业控制领域有很大优势&#xff0c;包括&#xff1a; 稳定性&#xff1a;Debian 的发布版以其稳定性而闻…

ThinkPHP框架 开源 虚拟资源分享付费下载PHP网站源码

源码测评&#xff1a;非常不错的资源分享网站&#xff0c;仿的是之前的码农网&#xff0c;这个网站也是在码农网的源码基础上修改而来&#xff0c;这个是用ThinkPHP仿的&#xff0c;还不错&#xff0c;测试的时候发现后台上传图片报错&#xff0c;其他暂时没有发现。 转载自…

Leetcode刷题【hot100】盛最多水的容器

给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾斜容器。 示例…

OpenAI 工程师平均薪酬 92.5 万美元;SpaceX 明年将每两天发射一次丨 RTE 开发者日报 Vol.81

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…