前言
准备开始学习ts,顺便学一下vite
记录一下过程
使用的环境:
+-- @vue/cli@5.0.4
+-- pnpm@7.2.1node 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
说起这个记个小本本↓
<!-- !!pnpm中文网配置项不全,没找到create,无法使用search功能=.=!! -->
这里选择vue
? Select a framework: » - Use arrow-keys. Return to submit.
vanilla
> vue
react
preact
lit
svelte
然后选择vue-ts
√ Select a framework: » vue
? Select a variant: » - Use arrow-keys. Return to submit.
vue
> vue-ts
好了结束
Done. Now run:
cd ts-vite
pnpm install
pnpm 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项目的过程
头一回写,有错误请大佬们指正