使用yarn

yarn create vite

使用pnpm

pnpx create-vite（pnpm create vite + 项目名）

根据提示输入项目名称,选择vue框架,选择vue-ts,然后根据提示,进入项目中目录，yarn install/pnpm install,后yarn dev/pnpm run dev就可以了；

解决：在vite.config.ts中添加如下图：

添加vue全家桶的vuex:yarn add vuex@next -save;

添加vue全家桶的vue-router:yarn add vue-router@next --save;

在src目录下添加vuex文件和router文件;vuex文件：

router路由文件：

vue3.0+vite+ts项目搭建--初始化项目的更多相关文章

  1. vue3.0+vite+ts项目搭建--初始化项目(一)

    vite 初始化项目 使用npm npm init vite@latest 使用yarn yarn create vite 使用pnpm pnpx create-vite 根据提示输入项目名称,选择v ...

  2. vue3.0+vite+ts项目搭建--基础配置(二)

    集成vue-router 使用yarn yarn add vue-router@next --save 安装完成之后在src目录下创建文件夹router/index.ts,创建完成之后需要在Vue-R ...

  3. vue3.0+vite+ts项目搭建--vite.config.ts配置(三)

    vite.config.ts配置 配置路径处理模块 安装ts的类型声明文件 yarn add @types/node -D 通过配置alias来定义路径的别名 resolve: { alias: { ...

  4. vue3.0+vite+ts项目搭建-axios封装(六)

    封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from ' ...

  5. vue3.0+vite+ts项目搭建-postcss-pxtorem 实现移动自适应(五)

    这里不考虑大屏,所以不做amfe-flexible的配置 首先是安装依赖 yarn add postcss-loader postcss-pxtorem -D yarn add autoprefixe ...

  6. vue3.0+vite+ts项目搭建-分环境打包(四)

    分环境打包配置 新建.env.dev(或者.env) VITE_NODE_ENV = 'dev' VITE_HOST = 'http://local.host.com' 执行yarn dev ,控制台 ...

  7. vue3.0+vite+ts项目搭建(报错处理)

    报错一 warning package.json: No license field$ vue-tsc --noEmit && vite build 解决方案,添加这两行,只添加一个是 ...

  8. Spring MVC 项目搭建 -1- 创建项目

    Spring MVC 项目搭建 -1- 创建项目 1.创建 Dynamic Web project (SpringDemo),添加相关jar包 2.创建一个简单的controller类 package ...

  9. vite + ts 快速搭建 vue3 项目 以及介绍相关特性

    博客地址:https://ainyi.com/98 Vue3.0,One Piece 接下来得抽空好好学习了 vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vu ...

  10. 基于 Vue3.0 Composition Api 快速构建实战项目

    Quick Start 项目源码:https://github.com/Wscats/vue-cli 本项目综合运用了 Vue3.0 的新特性,适合新手学习

随机推荐

  1. css 特殊性 权重排列

    首先类似于二进制的理解. 0010大于0001. id = 0,1,0,0; class, [属性值],:伪类 = 0,0,1,0: <元素>,伪元素 = 0,0,0,1: 伪元素:  : ...

  2. 解决ubuntu18环境matplotlib无法正常显示中文

    首先看看系统装了中文字体没?命令: fc-list :lang=zh 如果没安装,需要去下载或者从win复制一份到ubuntu, 在/usr/share/fonts文件夹下创建一个chinese文件夹 ...

  3. 解决Ubuntu下的的“system program problem detected”问题

    解决Ubuntu下的的"system program problem detected"问题 1.删除crash文件 sudo rm /var/crash/*2.关闭pop up功 ...

  4. JDBC之Connection

    Connection 目录 Connection Java连接MySQL Connection必备知识点 利用JDBC使用Connection 问题一:为什么Java操作数据库的连接不是越多越好 问题 ...

  5. 单个表空间文件个数达到上限 ORA-01686

    # 问题概述因在oracle数据库表空间管理中的时候 报 ORA-01686: max # files (1023) reached for the tablespace GPRS SQL> a ...

  6. spring-boot 引入redis

    1.引入redis <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  7. Entity Framework Core 的 SQL 日志记录

    日志配置通常由 appsettings {Environment} .json 文件的 Logging 部分提供 . 若要记录 SQL 语句,请将 "Microsoft.EntityFram ...

  8. PostgreSQL Win10 安装、创建表并添加数据（安装细节+常见错误避坑）

    1.下载:postgresql-14.5-1-windows-x64.exe 地址:Download PostgreSQL 2.安装: 下一步即可,注意记住期间设置的超级管理员密码和设置的端口号 安装 ...

  9. 【剑指Offer】【链表】反转链表

    题目:输入一个链表,反转链表后,输出新链表的表头. A:定义3个结点,pNode作移动指针,pRet作输出指针,pPrev作前驱指针    在pNode没有到达链尾之前,循环里创建pNext指针记录p ...

  10. Java流程控制之for循环

    for循环[重点] 虽然所有的循环结构都可以用while或者do...while表示,但Java提供了另一种语句--for循环,使一些循环结构变得更加简单. for循环语句是支持迭代的一种通用结构,是 ...