使用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. c#笔记（四）——switch

    ---恢复内容开始--- using UnityEngine; using System.Collections;   public class Script1 : MonoBehaviour {   ...

  2. Android Studio: how to remove/update the “Created by” comment added to all new classes?

    By default Android Studio automatically adds a header comment to all new classes, e.g. /** * Created ...

  3. <<运算？&=、|=、 ^=、<<=、>>=的意思？ 十六进制前缀是 0x。

    <<运算? a<<b 表示把a转为二进制后左移b位(在后面添加 b个0).例如100的二进制表示为1100100,100左移2位后(后面加2个零):1100100<< ...

  4. gin web 2

    routers/router.go package routers import ( "github.com/gin-gonic/gin" "gin-blog/pkg/s ...

  5. 实现分页数据请求的思路/Element UI(Plus)的分页模板（Vue3.x写法），（直接使用<script>引入vue.js）

    实现分页数据请求的思路/Element UI(Plus)的分页模板(Vue3.x写法),(直接使用<script>引入vue.js) 1. 效果图: 2.实现分页数据请求的思路:   分页 ...

  6. SignalR基本认识以及使用

    SignalR基本认识以及使用 什么是WebSocket.SignalR WebSocket 1.WebSocket基于TCP协议,支持二进制通信,双工通信. 2.性能和并发能力更强. 3.WebSo ...

  7. python菜鸟学习： 4.购物车演练

    # -*- coding: utf-8 -*-'''1.启动程序后让用户输入消费额,然后打印商品列表'2.允许用户根据商品编码购买商品3.用户选择商品后,检测余额是否够,够则直接扣款,不够就提醒4.可 ...

  8. com.alibaba.fastjson.JSONObject cannot be cast to xxx

    今天在使用json格式的数据进行转化的时候遇到了这个问题,故此记录下来. 通常我们使用JSON把数据转成实体的方法是这样的 List<DataModel> dataModels= (Lis ...

  9. API+MVC强类型添加

    mvc强类型用HttpClient方法不需要跨域 API添加方法于之前一样,不同的地方在MVC的操作中,而且不需要添加跨域请求 [HttpPost] public ActionResult Add(I ...

  10. 3Com-OfficeConnect-Wireless-11宽带路由器默认口令

    网络空间资产搜索: app="3Com-OfficeConnect-Wireless-11g-Cable/DSL-Router" 找到环境 账户密码 admin/a***n End ...