使用官方命令搭建纯净版vue3工程

使用官方提供的创建命令搭建Vue3项目项目中包含Vite5, TypeScript, Vue Router, Pinia, Vitest, ESLint, Prettier

查看npm版本

终端执行node -v及npm -v查看环境

js 复制代码

cool@localhost vue3-pureness % node -v
v16.20.1
cool@localhost vue3-pureness % npm -v
8.19.4

我的node版本是16.20.1；npm版本是8.19.4，接下来创建项目不成功可能就是npm版本造成的，安装个新的版本

使用命令搭建项目

终端执行npm create vue@latest

js 复制代码

cool@localhost vue3-pureness % npm create vue@latest
Need to install the following packages:
  create-vue@3.9.1  // 此处稍微等待一下
Ok to proceed? (y)  // 此处直接Enter

Vue.js - The Progressive JavaScript Framework

✔ 请输入项目名称： ... vue-project
✔ 是否使用 TypeScript 语法？ ... 否 / 是
✔ 是否启用 JSX 支持？ ... 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
✔ 是否引入 Pinia 用于状态管理？ ... 否 / 是
✔ 是否引入 Vitest 用于单元测试？ ... 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
✔ 是否引入 Prettier 用于代码格式化？ ... 否 / 是

正在构建项目 /Users/cool/study/code/web/vue3-pureness/vue-project...

项目构建完成，可执行以下命令：

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

搭建过程简单到令人发指，语言都是中文的，连后续要执行的命令都说明了，清清楚楚明明白白，感觉我的补充都如此的苍白

按照提示拉包

此处创建完看好你的文件结构，一定要进入命令创建的项目中，别直接执行拉包命令，我还是菜鸡的时候经常直接运行。

js 复制代码

npm install
// 如果安装了cnpm或者pnpm也不用吝啬，直接使用
cnpm install
// 或者
pnpm install
// 还有简写
cnpm i
// 或者
pnpm i

运行项目

js 复制代码

// 这个命令用于格式化代码,使其遵循一致的风格和规范;嗯。。。这个可以省略
npm run format
// 编译项目
npm run dev

复制提供的Local地址：http://localhost:5173/在浏览器打开此处可以配置直接打开浏览器详见

大功告成！技术在会的人手上，总是很顺利，在不会的人手上，会遇到各种坑点，此篇总结两处坑：

node和npm版本升级到较新的版本
执行npm install一定要看清当前所在的文件夹