一、构建工具

1、查看安装pnpm

npm ls -g --depth 0

截屏2022-08-27 18.47.00.png

2、安装pnpm

npm i -g pnpm

截屏2022-08-27 18.48.08.png

二、创建项目

1、构建项目

a、创建命令

pnpm create vite

截屏2022-08-27 18.50.12.png

b、输入项目名

? Project name: » vite-project

截屏2022-08-27 18.50.32.png

c、选择框架

// ? 选择一个框架： » - 使用箭头键。 返回提交。
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla	
    vue
    react
    preact
    lit
    svelte

截屏2022-08-27 18.50.43.png

b、选择变体

// ? 选择一个变体： » - 使用箭头键。 返回提交。
? Select a variant: » - Use arrow-keys. Return to submit.
    vue
    vue-ts

截屏2022-08-27 18.50.56.png

2、运行项目

a、进入项目

cd vite-project

截屏2022-08-27 18.54.57.png

b、安装依赖

pnpm i

截屏2022-08-27 18.55.35.png

c、运行项目

pnpm dev

截屏2022-09-03 23.49.22.png

b、浏览器打开

截屏2022-09-03 15.54.59.png 截屏2022-09-03 15.55.10.png

三、项目目录

1、目录结构

a、文件目录

截屏2022-08-27 23.39.59.png

b、其他目录

node_modules 项目依赖目录
pnpm-lock.yaml 依赖安装/更新记录文件

Vue