VUE CLI - 使用VUE脚手架创建前端项目工程

前言

        前端从这里开始，本文将介绍如何使用VUE脚手架创建前端工程项目

1.预准备（编辑器和管理器）

• 编辑器：推荐使用Vscode，WebStorm，或者Hbuilder（适合刚开始练手使用），个人感觉上面这些编辑器都比较方便~看个人习惯吧，我使用的是WebStorm（需要破解）。
• Node.JS：Vue 脚手架是基于 Node.js 的环境来运行的，它需要 Node.js 提供的运行时环境和包管理工具 npm 来进行项目的创建、依赖安装等操作。下载地址：Node.js 中文网
• 包管理工具npm：随 Node.js 一起安装，无需额外操作。它是 JavaScript 的默认包管理工具，能方便地安装、更新和卸载 Vue 脚手架以及项目所需的各类依赖包。使用上相对简单直接，对于一般的 Vue 项目开发完全能够满足需求。当然如果你习惯Yarn，也可以使用Yarn代替。

2.安装VUE脚手架

在Windows系统终端中，输入如下命令，进行脚手架的安装：

npm install -g @vue/cli
// 如果需要更换npm的下载源，可以先使用以下命令进行换源
npm config set registry https://registry.npmmirror.com  // 换为淘宝源
npm config get registry  // 查看淘宝镜像

使用 Vue -V，查看VUE脚手架是否安装成功，显示版本信息

3.使用脚手架创建VUE工程 

在你的工程目录下，使用 vue create 【项目名】创建工程 ，需要注意项目名不能有大写字母。

接着界面提示你选择一个预设配置（preset），主要有以下选项：

• Default ([Vue 3] babel, eslint)：使用 Vue 3 的默认配置，包含 Babel 和 ESLint。
• Default ([Vue 2] babel, eslint)：使用 Vue 2 的默认配置，包含 Babel 和 ESLint。
• Manually select features：手动选择功能，可以自定义项目配置。

 

 选择第三个自定义选项，回车。接着出现下面的选项，分别代表：

• Babel：JavaScript 编译工具，用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本。
• TypeScript：一种静态类型检查语言，编译为 JavaScript。
• Progressive Web App (PWA) Support：为项目添加 PWA 支持，使网页应用可以像原生应用一样工作。
• Router：Vue 的官方路由管理器，用于构建单页应用（SPA）。
• Vuex：Vue 的状态管理库，用于管理应用的状态。（不过现在一般使用Pinia~）
• CSS Pre-processors：CSS 预处理器（如 Sass、Less 等）。
• Linter / Formatter：代码检查和格式化工具，用于保持代码风格一致。
• Unit Testing：单元测试工具，用于测试代码的各个部分。
• E2E Testing：端到端测试工具，用于测试整个应用流程。

依据你的项目需要选择需要的部分，使用键盘上的 空格键 选择或取消选择功能。按 A 可以全选所有功能。 选择完之后，直接回车。

选择你的VUE版本，是VUE2还是VUE3 

 接着会跳出几个问题，是否使用类组件语法，是否使用TS语言，是否启用路由的历史模式（history mode），使 URL 更美观（去掉 #）。最后选择错误检查和代码风格规范，如果你希望代码自动格式化且减少风格争议，建议选择 ESLint + Prettier。