使用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. Android Studio的xml文件无法代码提示

    之前试了省电模式.清理缓存.重新勾选sdk都没有任何用 于是我开始乱搞,总结了以下方法: 找到Gradle Script中的build.gradle(Module:XXXX) 修改compileSdk ...

  2. abap screen表格控件后续增加栏位

    当我们通过screen的表控件(含向导)创建完表格之后,后续想再增加栏位,要先把输入控件拖入表格控件内,再按钮控控件拖进去即可. 注:输入控件的名称和格式要和程序中的一致,否则会显示不出数据 效果图如 ...

  3. dart extends 覆盖规则

    1,不覆写super的变量,child会自动继承super的变量.即使是在child里给super赋值,child里也是可以访问到的,可能是因为引用的关系. 2,只要覆写了super的变量,只给sup ...

  4. Installation requirements for DB2 UDB 8.1 Enterprise Servers

    UDB 8 Install HomeUppre-UDB 8 InstallUDB 8 Install Addendum   Steps to do before/after applying a DB ...

  5. tfidf与bm25

    https://www.cnblogs.com/johnnyzen/p/11298273.html 前言 本文主要是对TF-IDF和BM25在公式推演.发展沿革方面的演述,全文思路.图片基本来源于此篇 ...

  6. encodeURI和encodeURIComponent

    encodeURI和encodeURIComponent的作用对象都是URL,唯一的区别就是编码的字符范围: encodeURI不会对ascii字母.数字.~!@#$&*()=:/,;?+' ...

  7. 信息安全day1

    课程目标:中小型网络建立.操作和故障排除,连接到WAN和实施网络安全 路由器三层协议功能 多层交换机具备三层协议的功能 终端服务器:特殊的路由器 网云:1.未知网络区域 2.不受自己管理的网络区域 A ...

  8. PostScript语言教程（六、图形变换）

    6.1.坐标系变换 POSTSCRIPT图形操作是在一个坐标系中,这个坐标系被称为用户坐标系或用户空间,该坐标系独立于任何物理设备.POSTSCRIPT在用户空间中进行绘制,并将结果传输到特定的打印机 ...

  9. 解决appium-doctor报各种 cannot be found问题

    解决appium-doctor报各种 cannot be found问题 1.opencv4nodejs cannot be found.cmake --version 查看cmake是否安装已安装执 ...

  10. API 细节及二级联动

    图片上传   T是占位符    where是条件,T是泛型,class是类,类是引用类型,就是给T设置了一个约束 一个表一个dal文件(在工作的时候就是这样)      [RoutePrefix(&q ...