【Vue工程】001-Vite 创建 Vue-TypeScript 项目

文章目录

• 【Vue工程】001-Vite 创建 Vue-TypeScript 项目
• 一、环境
• 二、创建项目

• 1、pnpm 创建 Vite 项目
• 2、设置项目名
• 3、选择vue
• 4、选择 TypeScript
• 5、创建完成
• 6、安装与启动
• 7、访问 `http://localhost:5173/`
• 8、默认生成的项目结构

一、环境

# Windows 10 IoT 企业版 LTSC
D:\MyResearch\vue-admin>node -v
v18.15.0

D:\MyResearch\vue-admin>pnpm -v
8.3.1

二、创建项目

1、pnpm 创建 Vite 项目

pnpm create vite

2、设置项目名

D:\MyResearch\vue-admin>pnpm create vite
../../.pnpm-store/v3/tmp/dlx-8988        |   +1 +
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             ../../.pnpm-store/v3/tmp/dlx-8988/node_modules/.pnpm
../../.pnpm-store/v3/tmp/dlx-8../../.pnpm-store/v3/tmp/dlx-8988        | Progress: resolved 1, reused 0, downloaded 1, added 1, doneme: » vite-project
? Project name: » my-vue-ts

3、选择vue

选择之后按回车键下一步！

# 省略...
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Others

4、选择 TypeScript

选择之后按回车键下一步！

? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    JavaScript
    Customize with create-vue ↗
    Nuxt ↗

5、创建完成

Scaffolding project in D:\MyResearch\vue-admin\my-vue-ts...

Done. Now run:

  cd my-vue-ts
  pnpm install
  pnpm run dev

6、安装与启动

D:\MyResearch\vue-admin>cd my-vue-ts

D:\MyResearch\vue-admin\my-vue-ts>pnpm install
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
Packages: +47
+++++++++++++++++++++++++++++++++++++++++++++++
Packages are copied from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             node_modules/.pnpm
Downloading registry.npmmirror.com/typescript/5.0.2: 7.05 MB/7.05 MB, done
node_modules/.pnpm/esbuild@0.17.18/node_modules/esbuild: Running postinstall script, done in 241ms
Progress: resolved 69, reused 34, downloaded 13, added 47, done

dependencies:
+ vue 3.2.47

devDependencies:
+ @vitejs/plugin-vue 4.1.0
+ typescript 5.0.2 (5.0.4 is available)
+ vite 4.3.2 (4.3.3 is available)
+ vue-tsc 1.4.2 (1.6.0 is available)

Done in 22.9s

D:\MyResearch\vue-admin\my-vue-ts>pnpm run dev

> my-vue-ts@0.0.0 dev D:\MyResearch\vue-admin\my-vue-ts
> vite


  VITE v4.3.2  ready in 358 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

7、访问 http://localhost:5173/

8、默认生成的项目结构