Visual Studio Code 使用 vite 安装项目

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者。

要使用 vite 来创建一个 vue 项目，非常的简单：

安装前需要有 node 环境，我本地已经安装过了，同时之前篇章里有讲过如何安装 node，这里不再赘述。

PS D:\worker-vue\vue-begin01> npm -v
9.3.1
PS D:\worker-vue\vue-begin01> node -v
v18.13.0
PS D:\worker-vue\vue-begin01> npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

Scaffolding project in D:\worker-vue\vue-begin01\vue-project...

Done. Now run:

  cd vue-project
  npm install   
  npm run lint  
  npm run dev   

PS D:\worker-vue\vue-begin01> 

按照提示，继续执行命令：

PS D:\worker-vue\vue-begin01> cd .\vue-project\
PS D:\worker-vue\vue-begin01\vue-project> npm install
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 354 packages in 30s
PS D:\worker-vue\vue-begin01\vue-project> npm run lint

> vue-project@0.0.0 lint
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore

PS D:\worker-vue\vue-begin01\vue-project> npm run dev 

> vue-project@0.0.0 dev
> vite


  VITE v4.1.1  ready in 654 ms

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

按住 ctrl 键，鼠标单击 Local 后面的 http 超链接，跳转到如下界面，表示成功了：