1 创建一个Vue工程

1. 基础环境准备

具体配置方法可以参考该博主的博文： blog.csdn.net/qq_42006801...

安装node.js
- 下载地址：nodejs.org/en/
- 建议安装稳定版本16-18版本
- 检查环境是否配备成功
- 可以选择配置 nvm 进行node的版本管理和源管理

Shell 复制代码

node -v
npm -v
nvm -v

node官网地址

配置好node之后，检测运行环境是否正常

2.搭建Vue环境

全局安装@vue/cli 具体详细的步骤可以参考vue的官网：

cn.vuejs.org/

Vue.js官网地址（Vue3）

v2.cn.vuejs.org/

Vue.js官网地址（Vue2）

全局安装Vue

shell 复制代码

npm install -g @vue/cli

检查Vue全局配置是否成功：

shell 复制代码

vue -V

3. 创建 Vue 工程

3.1 创建不同版本工程的方法：

3.1.1 官网最新，推荐的创建方法

确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令

shell 复制代码

 npm create vue@latest

shell 复制代码

✔ Project name: ... <your-project-name>
✔ 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 / Cypress / Playwright
✔ Add ESLint for code quality? ... No / Yes
✔ Add Prettier for code formatting? ... No / Yes

Scaffolding project in ./<your-project-name>...
Done.

shell 复制代码

cd <your-project-name>
npm install
npm run dev

应用发布到生产环境时，请运行：

shell 复制代码

npm run build

3.1.2 旧版本的Vue工程创建方法

找到你想创建 Vue 工程的文件目录：执行下述命令在你软件终端（CMD控制台）或者本机CMD终端都可以

css 复制代码

vue create [项目名（没有中括号）]

接下来选择默认就可以：

项目创建成功 Vue 创建项目配置项目的说明，对照说明

shell 复制代码

Babel：转码器，可将ES6代码转为ES5
TypeScript： 支持使用 
TypeScript （JavaScript超集）
Progressive Web App (PWA) Support ：支持PWA（渐进式Web应用程序） 
Router ：支持 vue-router （路由）
Vuex ：支持 vuex （状态管理器）
CSS Pre-processors： 支持 CSS 预处理器
Linter / Formatter ：支持代码风格检查和格式化Unit Testing：支持单元测试
E2E Testing： 支持 E2E 测试（end to end）

shell 复制代码

? Please pick a preset: Manually select features    
? Check the features needed for your project:     
(*) Babel// 语法编译 向后兼容    
( ) TypeScript // .ts    
(*) Progressive Web App (PWA) Support // 渐进式网页应用             
(*) Router // 路由     
(*) Vuex // 状态管理     
(*) CSS Pre-processors //  CSS 预处理器     
(*) Linter / Formatter // 语法检查    >
(*) Unit Testing // 单元测试  以开发角度     
( ) E2E Testing // 集成测试  以用户角度

3.2 运行 Vue 工程

shell 复制代码

 $ cd vue-project
 $ npm run serve