前端工程（一）：创建一个Vue项目工程

目录

1.基础环境准备

2. 搭建Vue环境

3. 创建 Vue 工程

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

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

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

3.2 运行 Vue 工程

---

1.基础环境准备

• 具体配置方法可以参考该博主的博文：
  • https://blog.csdn.net/qq_42006801/article/details/124830995

• 安装 node.js

• 下载地址：https://nodejs.org/en/

• 建议安装稳定版本 16-18 版本

• 检查环境是否配备成功

• 可以选择配置 nvm 进行 node 的版本管理和源管理

node -v
npm -v
nvm -v

2. 搭建Vue环境

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

• https://cn.vuejs.org/

• https://v2.cn.vuejs.org/

  

全局安装 Vue

npm install -g @vue/cli

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

vue -V

3. 创建 Vue 工程

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

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

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

 npm create vue@latest

✔ 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.

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

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

npm run build

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

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

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

• 接下来选择默认就可以：

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

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）

? 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 工程

 $ cd vue-project
 $ npm run serve