目录

前言

环境

参考文档：

一.创建项目

二.创建过程

目录结构

总结

前言

准备开始学习ts，顺便学一下vite

记录一下过程

使用的环境：

+-- @vue/cli@5.0.4
+-- pnpm@7.2.1

node v16.15.0

参考文档：

ts v4.7 doc：

vite v2 doc：Vite

一.创建项目

pnpm create vite <project-name> -- --template vue

记得一定要使用 C M D

我使用的是win11，习惯性右键在终端中打开，默认是power shell

无论怎么搜怎么查配置是不是错了都没用

甚至一度怀疑是不是几家官方文档都错了

No package.json (or package.yaml, or package.json5) was found in

然后试了一下cmd，一遍过 [安详.jpg]

二.创建过程

E:\project\vue\vue3>pnpm create vite ts-vite -- --template vue

不知道是不是后面的-- --template vue无效，还是需要选择框架

查看pnpm官方文档没找到后面有配置项，也可能是自己没仔细翻吧

pnpm create | pnpm从 create- 或 @foo/create- 启动套件创建项目。https://pnpm.io/zh/cli/create

说起这个记个小本本↓

这里选择vue

? Select a framework: » - Use arrow-keys. Return to submit.vanilla
>   vuereactpreactlitsvelte

然后选择vue-ts

√ Select a framework: » vue
? Select a variant: » - Use arrow-keys. Return to submit.vue
>   vue-ts

好了结束

Done. Now run:cd ts-vitepnpm installpnpm run dev

目录结构

│  .gitignore                # git忽略
│  index.html                # 入口文件和webpack对比从public改到了根目录
│  package.json              # 项目信息、包信息
│  README.md
│  tsconfig.json             # ts配置，指定ts项目的根目录
│  tsconfig.node.json        # 不知道啥用，后面再补
│  vite.config.ts            # vite配置文件，类似vue.config.js
│
├─.vscode                    # 应该是vscode配置目录，我用的webstorm，等等删了[狗头]
│      extensions.json
│
├─public                     # 静态资源目录，打包的时候会不经过编译直接被丢进去
│      favicon.ico           # 页签图标
│
└─src                        │  App.vue               # vue的根实例│  env.d.ts              # 我的理解里面是向ts注册所有.vue文件│  main.ts               # main.js 的ts版本│├─assets                 # 也是静态资源目录，但是打包时会经过编译│      logo.png          # 一个图片│└─components             # 组件目录HelloWorld.vue   # HelloWorld示例组件

tsconfig.json参考：TypeScript: Documentation - tsconfig.json 是什么

vite.config.ts参考：Configuring Vite | Vite

.d.ts参考：一文读懂TS的(.d.ts)文件 - 掘金

安装依赖

pnpm install

启动项目

pnpm run dev
# 或
vite

启动成功！

总结

以上就是我用pnpm创建vite+ts+vue项目的过程

头一回写，有错误请大佬们指正

pnpm创建vite + vue + ts项目相关推荐

Vite ( Vue + TS ) 项目配置 @ 路径别名
1. 下载 @types/node 包 path 模块是 node.js 的内置模块,而 node.js 默认不支持 ts 文件的,所以需要安装 @type/node 依赖包 npm install ...
vite+vue3+TS项目引入antd-vue的问题记录
文章目录 1.vite创建的vue+TS项目引入antd-vue 2.antd-vue定制主题报错记录博,用于记录Vue3项目中遇到的问题 1.vite创建的vue+TS项目引入antd-vue 由 ...
Vue ts 项目实战
Vue ts 项目实战首先,没装vue-cli的,可以使用下列任一命令安装这个新的包: npm install -g @vue/cli # OR yarn global add @vue/cli 安 ...
vue+ts项目中import图片时报错Cannot find module ‘xxx‘ or its corresponding type declarations
TS项目中import图片时报错Cannot find module 'xxx' or its corresponding type declarations 在vue+ts项目中使用import的形 ...
vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...
vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
vue ts项目同时引入ant-design和element-ui，ts报错不能编译打包失败
错误信息: Subsequent property declarations must have the same type. Property '$confirm' must be of type ...
element如何动态切换主题(vite+vue+ts+elementPlus)
前言提示:动态切换主题使用的是css3的var函数现实示例:切换--main-bg-color的值,使用<div style="--main-bg-color:red"& ...
创建一个vue脚手架项目
首先 ,创建脚手架需要安装vue-cli 安装vue-cli就需要npm 所以第一步需要安装Node.js 安装好后,查看版本之后在想要放项目的地方cmd ,安装脚手架 npm install -g ...

pnpm创建vite + vue + ts项目

前言