环境准备
安装 Node.JS
首先下载 node.js 要求版本在 8.9 以上
下载完可检查在 Windows 任务命令行里输入
node -v
使用淘宝 NPM 镜像源下载比较快
npm config set registry https://registry.npm.taobao.org/
推荐使用 Pnpm 包管理器
# 安装 Pnpm
npm install -g pnpm
# 初始化 Pnpm
pnpm setup
Pnpm全称是Performant NPM，即高性能的npm。它结合软硬链接与新的依赖组织方式，大大提升了包管理的效率，也同时解决了幻影依赖的问题，让包管理更加规范，减少潜在风险发生的可能性。- 若使用其他包管理器则下文中的
pnpm命令使用对于的命令代替。
包管理器 npm / yarn / pnpm 的区别:
npm是Node.JS自带的包管理器, 早期版本实现里有些问题: 一个是依赖的依赖也会下载到node_modules中, 导致磁盘占用比较大; 另一个是npm依赖的组件不能精确锁定版本, 导致不同的机器上可能出现依赖产物不一致的情况;yarn是为了解决npm早期版本出现的一些问题而出现的, 随着npm的更新迭代,yarn已经逐渐失去了优势;pnpm作为后起之秀, 主要瞄准的是npm和yarn都存在的node_modules磁盘占用问题, 通过建立统一的依赖索引, 避免不同项目里出现大量重复的依赖文件, 进而提升磁盘性能; 已经有了类似Java当中Maven的味道;
创建 Vue 3 项目
创建 Vue 3 项目的方式有很多, 下面列举一些, 推荐使用 Pnpm 进行初始化。
使用 Pnpm 创建项目(基于 Vite)
pnpm create 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
初始化后使用以下命令运行项目：
cd vue-project
pnpm install
pnpm format
pnpm dev
运行之后即可预览：
http://localhost:5173/
使用 Vite 创建项目(基于 Vite)
pnpm create vite my-vue-app
√ Select a framework: »
Vue
√ Select a variant: »Customize with create-vueVue.js - The Progressive JavaScript Framework
√ 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
初始化后使用以下命令运行项目：
cd my-vue-app
pnpm install
pnpm format
pnpm dev
运行之后即可预览：
http://localhost:5173/
使用 @vue-cli 创建 (基于 Webpack)
安装 @vue-cli（全局安装）
pnpm install @vue/cli -g
创建vue项目：
vue create demo
Vue CLI v5.0.8
? Please pick a preset:Manually select features
? Check the features needed for your project:Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with3.x
? Use class-style component syntax?No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?Yes
? Use history mode for router? (Requires proper server setup for index fallback in production)Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):Less
? Pick a linter / formatter config:Prettier
? Pick additional lint features:Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects?No
? Pick the package manager to use when installing dependencies:PNPM
初始化使用以下命令运行项目：
cd demo
pnpm run serve
运行之后即可预览：
http://localhost:8080/
IDEA调试
可以通过下面两个方法支持
- 浏览器安装 JetBrains IDE Support 插件支持
- IDEA 配置 JavaScript Dubug 运行选项支持
其他
安装的工具无法执行
如果在外部终端(比如 VSCode)执行失败, 需要对系统进行配置, 打开脚本执行权限 运行
PowerShell（管理员身份） 输入set-ExecutionPolicy RemoteSigned然后根据情况选择对应策略, 建议选A