使用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. ubuntu - 程序运行的一些基础知识

    1.指定编码格式 -finput-charset=GB2312 指定 C 程序的编码方式为 GB2312,不指定时默认编码方式为 UTF-8 -fexec-charset=GB2312 指定 可执行程 ...

  2. python调用C库的方法

    主要介绍两种,一种是python的标准库内置的ctype,另一种是第三方的pybind11. 除此之外,还有其他的方案,例如,CFFI.Cython等等. 一.python的标准库ctype

  3. laravel常用集合的使用

    创建集合: //数组1 $connection = collect([ ['name'=>'jack','age'=>'18','email'=>'ceshi@qq.com'], [ ...

  4. wsl 的 tail -f 不好使

    windows 上的sub linux ubuntu 的tail -f 不好使 在/etc/profile 中加入alias alias tailf='tail -f ---disable-inoti ...

  5. Paddiing 组件

    一.Flutter Paddiing 组件 在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属性.这个时候我们可以用 Pa ...

  6. 全国分乡镇第六次人口普查数据shp数据库省市区县街道

    全国分乡镇第六次人口普查数据shp数据库省市区县街道 ==名称:全国第六次人口普查任意十个乡镇的乡镇界地图==数据说明:精确到乡镇级别.==数据:面数据,属性列表(乡镇名.乡镇代码,第六次人口普查分乡 ...

  7. 根据XML生成实体类

    因为对接系统的XML所需映射的实体类有几十个,自己来处理不太现实,于是一直找寻找这样的工具,终于让我发现了jaxb2-maven-plugin: http://www.mojohaus.org/jax ...

  8. CORE8051-APB总线

    1 APB总线 core8051s内核支持APB3总线,APB writebuffer 为{XWB3, XWB2, XWB1, ACC}; 写访问 对FC00以上地址写值,即表示APB写操作,值为(X ...

  9. 创建SFTP用户并指定访问目录 Linux

    1.创建登录用户及用户组   --可以根据自身磁盘挂载情况制定用户home目录 -d 选项 groupadd test1mkdir -p /data/test1 useradd test1 -g te ...

  10. 洛谷P4802 [CCO 2015]路短最

    题目 https://www.luogu.com.cn/problem/P4802 思路 数据范围 \(n\leq 18\),义眼丁真,鉴定为状压. 好,那我们来思考一下状态的构建.其实是很套路的东西 ...