使用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. Zookeeper ZAB协议-Leader&Followe 对象创建和启动源码解析

    这篇博客主要是解析了Leader,Follower 对象的创建,相对来说比较简单,主要是了解一下在实例化的时候创建了哪些对象,这些对象会在数据传输的过程中发挥比较打的作用,如果有了解过的,可以直接跳过 ...

  2. 常用软件版本记录 lisoaring

    操作系统 windows XP(2014年4月8日) windows 7(2020年1月14日终止支持) wiindows 10 Internet Explorer 1995-20220507 Fla ...

  3. React中store、action和reducer之间的关系

    redux的三剑客store ----->物流仓库中心store,把它想象成一个物流仓库中心,数据(state)就是一个个包裹 action ---->包裹的包装 store.dispat ...

  4. vuex记录

    vuex就是vue中管理状态的地方,控制着组件之间的数据: 5大核心,通常只要有state和mutation就能满足vuex最基本的需求 1.state 项目存放各种状态的地方 2.mutation ...

  5. WC2023 游记

    不是很会写游记,随便写写吧. 一些附件 讲课资料合集(压缩后 \(\rm 31MB\))太大了,可以去 U 群下载. 由于后面很多乐子,我把相关内容打包成 zip 上传上来了. 乐子合集下载链接.(这 ...

  6. JMeter压测基础（二）——Mysql数据库

    JMeter压测基础(二)Mysql数据库 环境准备 mysql驱动 JMeter jdbc配置 JMeter jdbc请求 1.下载mysql驱动:mysql-connector-java.jar ...

  7. Vue全局方法配置

    在Vue项目开发中,肯定会有这样一个场景:在不同的组件页面用到同样的方法,比如格式化时间,文件下载,对象深拷贝,返回数据类型,复制文本等等.这时候我们就需要把常用函数抽离出来,提供给全局使用.那如何才 ...

  8. M1 安装homebrew详解

    1.打开终端创建安装目录 sudo mkdir -p /opt/homebrew 2.修改目录权限 sudo chown -R $(whoami) /opt/homebrew 3.进入opt文件夹 c ...

  9. springboot-mybatis集成pagehelper分页插件

    1.引入jar包(示例) implementation group: 'com.github.pagehelper', name: 'pagehelper-spring-boot-starter', ...

  10. redis统计用户活跃数量

    1.说明,redis 位图存储节省内存,用户id:156,1333; 如果用户登录,根据日期存储为1 setbit 20209001 156 1 ;//id为156的用户在1月1号登录了 setbit ...