使用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. 滚动 Scroller OverScroller

    原文:https://www.baidu.com/link?url=26iKhqGV7w87fqTiCTCwQc3VPcCbedUpAlddWm3uHsEXAGaeH47xY8QCZNGcORGBAU ...

  2. 如何手动安装python模块包package

    我们不用Cd C:\Users\xxx.xx\AppData\Local\Programs\Python\Python311 Python -m pip install openpyxl的方法. 解答 ...

  3. 蓝桥杯训练赛二-问题 B

    字符串的输入输出处理. 输入 第一行是一个正整数N,最大为100.之后是多行字符串(行数大于N), 每一行字符串可能含有空格,字符数不超过1000. 输出 先将输入中的前N行字符串(可能含有空格)原样 ...

  4. python 根据二维数组画出彩色图像

    方法:采用seaborn中的heatmap import seabornimport numpy as npimport pandas as pdimport matplotlib.pyplot as ...

  5. No.1.7

    网页制作流程 创建根目录(网站的第一级文件夹) 1.图片文件夹:images 2.样式文件夹:CSS 3.首页:index.html <!-- 网站的首页 所有网站的首页都叫index.html ...

  6. 2022.11.15 NOIP2022 模拟赛十

    炸弹威力 Source:洛谷 P6036. 记 \(f_{i,0/1}\) 表示第 \(i\) 个位置为 \(0/1\) 的答案个数,有 DP 转移: \[\begin{aligned} (1-p_i ...

  7. Redis-shake工具 [ 自建redis集群->云redis主从 ]

    redis-shake工具是阿里用go写的开源工具 开始前准备 1. 确保ECS实例与Redis实例属于同一专有网络(即实例基本信息中的专有网络ID一致) 2. 获取ECS实例的内网IP地址,即执行操 ...

  8. Python中变量和对象的关系

    变量和对象 Python中一切皆为对象,数字是对象,列表是对象,函数也是对象,任何东西都是对象.而变量是对象的一个引用(也可以称为标签或者名字),对象的操作都是通过引用来完成的. 例如,[]是一个空列 ...

  9. docker打包nginx

    nginx镜像  localtime为/etc/localtime文件 给容器限定日志打印时间为北京时间 FROM nginx:stable-alpine MAINTAINER geyanan gey ...

  10. 三种将list转换为map的方法

    1) 传统方法假设有某个类如下 Java代码 class Movie { private Integer rank; private String description; public Movie( ...