使用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. mysql问题汇总含解决方案

    MySQL,插入数据提示"The table `xxx` is full" 背景:MEMORY引擎,hash索引 解决方法 1. 查看当前设置的table_size show va ...

  2. laravel service provider 1

    可以理解成分两步: 配置.register, 因为只有配置了才有被调用去register, 也许不配置直接在appserviceProvider里面可以直接生效.... service: 具体工作的类 ...

  3. BIP弹框内容显示的隐藏

    viewModel.on("customInit", function (data) {         // 关闭或取消关原因详情--页面初始化         viewMode ...

  4. （K8s学习笔记七）Pod的升级和回滚

    1.Deployment的升级 示例:滚动升级busybox-deployment容器 apiVersion: apps/v1 kind: Deployment metadata: name: bus ...

  5. jupyter notebook相关笔记

    导出pdf时隐藏代码 参考:https://segmentfault.com/q/1010000043309446

  6. 大数据算法与分析_pdf

    链接:https://pan.baidu.com/s/1ksU_Zt1pVZzQ0MmURgoi_w 提取码:r92u

  7. 不安全的权限 0644，建议使用 0600 虚拟机无法分配内存 virtual memory exhausted: Cannot allocate memory

    我都不知道我写了啥,自己都很混乱 aoteman@aoteman-virtual-machine:/tmp$ sudo -s #进入root用户模式 [sudo] aoteman 的密码: 12对不起 ...

  8. LeetCode 29. 两数相除 时间击败【100.00%】 内存击败【76.25%】

    不禁让我想起了计算机是怎样进行除法运算的,单独考虑溢出以及边界情况,单独考虑符号,其他过程和我们小学除法是一模一样的:左移除数(十进制就是扩大十倍,二进制扩大两倍),直到正好比被除数小,一边累加商(在 ...

  9. DDD（一）微服务、领域驱动设计、领域模型

    DDD(一)微服务.领域驱动设计.领域模型 如果觉得样式不好:跳转即可 http://www.lifengying.site/(md文件复制过来有些样式会不一样) 什么是微服务 单体结构项目 优点:结 ...

  10. html让容器居中,css让容器水平垂直居中的7种方式

    这篇文章主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总 ...