pnpm创建vite + vue + ts项目

Nine狮

已于 2022-06-30 13:28:58 修改

阅读量2.2k

点赞数

文章标签： vue.js 前端 javascript

于 2022-06-30 13:22:22 首次发布

本文链接：https://blog.csdn.net/m0_62362977/article/details/125535497

版权

目录

前言

环境

参考文档：

一.创建项目

二.创建过程

目录结构

总结

前言

准备开始学习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
>   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示例组件