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

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

查看npm版本

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

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

使用命令搭建项目

1. npm搭建方式

• 打开终端执行

npm create vue@latest

• 终端进行项目前期项目配置

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

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

2. 全局安装vue 使用vue-cli安装

• 检查是否安装vue

vue -v

• 全局安装vue

npm install -g @vue/cli

• 通过vue安装项目

vue create my-vue3-project

?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes  // 提示yarn安装慢，是否启用淘宝源，当时是yes


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: PNPM  // 选择包管理器 pnpm 很快，终端也没哟一些乱七八糟的输出

按照提示拉包

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

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

运行项目

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

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

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