Vue2/Vue3 脚手架创建项目

按需创建 Vue 项目

确认环境

cmd 打开命令窗口，nodeJS 版本 >=10 均可

检测命令：

node -v

 

推荐使用快速切换和管理 node 版本的工具 NVM，可以参考该博文处理安装。

安装 Vue CLI，执行命令：

npm install -g @vue/cli

安装之后，你就可以在命令行中访问 vue 命令 。验证它是否安装成功，执行命令：

vue --version

创建项目

打开你想要创建的文件夹位置，例如要在 D:\code\demo2 文件夹内创建，打开文件夹

 在这个文件夹下打开终端，输入 cmd 点击 enter 键（注意：要给你打开的这个文件见最高权限，不然可能会报错）

然后就是使用脚手架创建项目，执行命令

// vue create 项目名称
vue create project-vue2

1、使用箭，按空格键选中，然后按 enter 键，选中头第三个选项

Manually select features（手动选择功能）

 

2、手动预设需要的功能

（如果要创建 Vue2项目）此处可以保留默认项直接下一步，也可以稍作改动，相关 功能项的介绍请查看本文底部内容 

3、选择 Vue 版本，2.x

4、选择 history 模式，如果不想你的 url 中间有个 # 的话，就选择 history。y

5、您更喜欢在哪里放置Babel、ESLint等的配置。？（使用箭头键）

 6、是否将此保存为未来项目的预设？n

 

等待创建完成。

使用 Vs code 打开运行。

（如果选择创建 Vue3 项目，这只是个人选择，我没有勾选代码格式检查）

// vue create 项目名称
vue create project-vue3

 

 

使用 Vs code 打开运行。 

新项目创建相关选择功能的介绍

1.Babel

在Vue新项目中，Babel的配置选项主要用来实现以下几个功能：

代码转换：Babel可以将使用最新JavaScript语法（如ES6+）编写的代码转换为向后兼容的JavaScript语法，以便能够在当前和旧版本的浏览器或其他环境中运行。这是通过Babel的插件系统实现的，插件可以识别并转换特定的语法结构。

Polyfill注入：通过@babel/preset-env预设，Babel可以自动确定目标浏览器或运行时环境中需要的插件和Polyfill，以支持新的JavaScript API。例如，如果目标环境不支持Promise，Babel可以自动注入相应的Polyfill。

优化包体积：Babel配置可以优化最终打包的体积。例如，通过useBuiltIns: "usage"选项，Babel只会包含实际用到的Polyfills，而不是全部Polyfills，这样可以减少打包体积。

配置特定环境：Babel允许你为不同的运行环境配置特定的代码转换规则。例如，你可以指定只转换IE8以上版本浏览器不支持的语法。

排除特定目录：默认情况下，Babel-loader会排除node_modules目录下的文件，因为这些文件通常已经过编译。如果需要转译某个依赖模块，可以在vue.config.js中通过transpileDependencies选项来指定。

并行编译：在多核CPU的机器上，默认会启用thread-loader来并行执行Babel编译，以提高构建速度。这可以在vue.config.js中通过设置parallel: false来关闭。

缓存：为了提高构建效率，Babel默认启用了cache-loader，它会缓存编译结果以加快后续构建的速度。缓存文件通常存储在<projectRoot>/node_modules/.cache/babel-loader目录下。

通过这些配置选项，你可以灵活地控制Babel的行为，以满足项目对兼容性、性能和开发体验的需求。

2.TypeScript

在Vue新项目中，TypeScript选项主要用于以下几个方面：

类型检查：TypeScript提供了静态类型检查，这有助于在编译时发现潜在的错误，提高代码的健壮性和可维护性。通过类型系统，可以在代码运行前预测并避免类型错误，从而减少运行时错误。

开发体验：TypeScript的类型系统可以改善开发体验，通过IDE中的类型自动补全功能，提高开发效率和减少错误。

项目配置：使用create-vue脚手架工具可以创建基于Vite且支持TypeScript的Vue项目。在基于Vite的配置中，开发服务器和打包器只会对TypeScript文件执行语法转译，而不执行类型检查，以保证开发服务器的速度。

IDE支持：推荐使用Visual Studio Code (VS Code)，因为它对TypeScript有很好的内置支持。Volar（之前的Vetur）是官方的VS Code扩展，提供了Vue单文件组件中的TypeScript支持。

配置tsconfig.json：通过create-vue搭建的项目包含了预置的tsconfig.json，其中包含了TypeScript编译器的配置选项，如目标代码版本、模块系统、严格类型检查等。

模板中的TypeScript：在使用了<script lang="ts">或<script setup lang="ts">后，<template>中的绑定表达式也支持TypeScript，有助于在模板表达式中执行类型转换。

使用TypeScript特性：可以在Vue组件中使用接口、类型断言、枚举、装饰器等TypeScript特性，提高代码质量和可维护性。

编译时检查：Vue提供了编译时检查功能，通过在vue.config.js中配置compilerOptions来实现，以捕获模板中的类型错误。

单元测试和端到端测试：可以使用Jest和Cypress等工具进行单元测试和端到端测试，确保应用程序在各种情况下都能正常工作。

通过这些选项，TypeScript为Vue开发者提供了强大的工具，以构建更健壮、可维护的Web应用程序。

 3.Progressive Web App (PWA) Support

在Vue新项目中选择Progressive Web App (PWA) Support选项，可以为你的Web应用添加一系列特性，使其能够提供类似原生应用的体验。以下是PWA支持的主要功能和优势：

可安装性：PWA允许用户将Web应用添加到他们的主屏幕，就像安装一个本地应用一样。这需要一个manifest.json文件，它提供了应用的元数据，如名称、图标、启动页面等。

离线体验和网络弹性：通过Service Worker，PWA可以在没有互联网连接的情况下工作，提供基本的内容和功能。Service Worker还可以预缓存资源，以便在应用启动时快速加载。

性能提升：PWA通过缓存和优化资源加载，可以提供更快的加载时间和更流畅的用户体验。

推送通知和后台同步：即使应用不在前台运行，PWA也可以发送推送通知，并在后台同步数据。

跨设备兼容性：PWA可以在多种设备上运行，包括手机、平板电脑和桌面电脑，提供一致的用户体验。

安全性：PWA需要通过HTTPS提供，确保了数据传输的安全性。

易于更新和维护：PWA的更新可以通过Web服务器进行，不需要用户手动更新应用。

SEO友好：由于PWA是基于Web的，它们的内容可以被搜索引擎索引，有利于提高网站的搜索引擎优化（SEO）。

减少数据使用：PWA可以缓存应用外壳和内容，减少重复的数据使用。

单代码库：开发者可以使用单一代码库为所有平台（移动和桌面）构建应用，降低了开发和维护成本。

启用PWA Support选项后，Vue CLI会为你的项目配置必要的Service Worker和生成manifest.json文件，从而让你的应用具备上述PWA的特性。此外，你还可以自定义PWA的配置，如工作盒插件模式、图标路径、主题颜色等，以满足你的具体需求。

4.Router

在Vue新项目中选择Router选项，是为了集成Vue Router，这是Vue.js的官方路由管理器。Vue Router允许你为单页应用程序创建页面路由，使得用户在访问不同的URL时，页面不会重新加载，而是动态地显示相应的组件内容。以下是Vue Router的主要功能和优势：

页面路由管理：Vue Router让你能够定义不同的路由规则，每个路由规则对应一个组件。当用户访问特定的URL时，Vue Router会匹配路由规则，并渲染对应的组件。

动态内容加载：通过Vue Router，你可以在不重新加载整个页面的情况下，动态地加载和显示不同的内容，提升用户体验。

嵌套路由：Vue Router支持嵌套路由，允许你创建复杂的页面结构，例如导航栏、侧边栏等。

路由参数和查询：你可以在路由中传递参数（如ID或分类）和查询字符串，这些参数可以在对应的组件中获取并使用。

视图复用：Vue Router允许你定义多个视图，并且可以在这些视图之间切换，而不需要重新加载页面。

导航守卫：Vue Router提供了导航守卫（navigation guards），你可以在路由发生变化之前或之后执行逻辑，例如用户认证、页面标题修改等。

懒加载：Vue Router支持路由组件的懒加载，可以减少应用的初始加载时间，因为只有在需要时才会加载对应的组件。

历史模式：Vue Router支持HTML5 History API，允许你使用无哈希（hash）的URL，使得URL更加美观，同时也支持服务器配置以实现SPA（单页应用程序）的SEO优化。

兼容性：Vue Router兼容Vue 2和Vue 3，可以用于新旧项目。

集成开发工具：Vue Router与Vue Devtools等开发工具集成，提供了更好的开发体验。

启用Router选项后，Vue CLI会自动为你的项目安装Vue Router，并配置基本的路由设置，包括router目录和相关的入口文件。你可以在此基础上进一步定义路由规则、导航守卫和路由元信息，以满足你的应用需求。

5.E2E Testing

在Vue新项目中选择Vuex选项，是为了集成Vuex作为状态管理库。Vuex是专为Vue.js应用程序开发的状态管理模式和库，它集中化管理所有组件的状态，并且以一种可预测的方式改变状态。以下是Vuex的主要功能和优势：

集中式状态管理：Vuex允许你将所有组件共享的状态集中存储在一个全局的store中，这样可以轻松地在多个组件之间共享和操作状态。

状态的可预测性：Vuex使用一个单一的state树，状态的变更只能通过提交mutation（同步操作）或者action（可以是异步操作）来实现，这使得状态的变更是可预测的。

组件间的状态共享：通过Vuex，你可以轻松地在不同组件之间共享状态，而不需要通过复杂的props链或事件。

状态的跟踪和调试：Vuex提供了强大的工具支持，包括时间旅行调试等，可以帮助开发者跟踪状态的变化历史，便于调试和开发。

模块化：Vuex支持模块化，允许你将store分割成模块，每个模块拥有自己的state、mutation、action和getter，使得大型应用的状态管理更加清晰和可维护。

数据持久化：Vuex可以与localStorage、sessionStorage或IndexedDB等浏览器存储API结合使用，实现状态的持久化。

插件支持：Vuex支持插件，这些插件可以监听store中的mutation或action，并允许你在状态变更前后执行自定义逻辑。

集成开发工具：Vuex与Vue Devtools等开发工具集成，提供了更好的开发体验，例如状态快照、时间旅行等。

与Vue Router的集成：Vuex可以与Vue Router集成，实现路由状态和应用状态的同步。

响应式和效率：Vuex利用Vue的响应式系统，确保状态变更能够高效地更新到视图。

启用Vuex选项后，Vue CLI会自动为你的项目安装Vuex，并创建一个基本的store文件，包括state、mutations、actions、getters等。你可以在此基础上扩展和自定义store，以满足你的应用状态管理需求。

6.CSS Pre-processors

在Vue新项目中选择CSS Pre-processors（CSS预处理器）选项，是为了在项目中集成CSS预处理器，从而提供更多的样式编写功能，如变量、嵌套、混合（mixins）、函数等。这些功能可以提高CSS代码的可维护性和可扩展性。以下是一些常用的CSS预处理器及其特点：

Sass/SCSS：Sass是一种成熟的CSS扩展语言，提供了变量、嵌套、混合、函数等高级功能。SCSS是Sass的语法的一个版本，它完全兼容CSS语法，使得迁移和学习更加容易。在Vue CLI中，可以选择使用dart-sass或node-sass作为Sass的实现方式。dart-sass是Sass的最新实现，通常更推荐使用 。

Less：Less是一种CSS预处理器，它的语法简洁，易于上手。Less提供了变量、混合、函数等功能，适合中小型项目使用 。

Stylus：Stylus是一种动态、富有表现力且健壮的CSS预处理器。它的语法灵活，支持缩进和冒号，也支持CSS的所有特性 。

PostCSS：PostCSS不是一个预处理器，而是一个工具，可以让你使用插件来转换CSS代码。Autoprefixer是一个流行的PostCSS插件，它会自动添加浏览器前缀 。

CSS Modules：CSS Modules不是预处理器，而是一种CSS局部作用域的解决方案，它可以让你编写无冲突的CSS 。

选择CSS预处理器选项后，Vue CLI会自动配置相应的webpack loader，以便在项目中使用这些预处理器。例如，如果选择Sass，CLI会配置sass-loader和node-sass（或dart-sass），允许你在Vue组件的<style>标签中使用lang="scss"或lang="sass"来编写Sass代码 。

此外，还可以通过vue.config.js文件进一步配置预处理器，例如自动化导入全局变量或混合（mixins）。这样，你就可以在项目中享受到预处理器带来的便利，提高开发效率和代码质量。

7.Linter / Formatter

在Vue新项目中选择Linter / Formatter选项，是为了集成代码质量和格式的检查工具，以确保代码的一致性和减少潜在的错误。以下是Linter / Formatter的主要功能和优势：

代码质量检查：Linter工具（如ESLint）可以分析代码，找出不符合特定编码规范的地方，如语法错误、未使用的变量、缺少的分号等，从而提高代码质量。

代码风格统一：Formatter工具（如Prettier）可以自动格式化代码，确保整个项目遵循统一的代码风格，如缩进、空格、引号等。

实时反馈：在开发过程中，Linter / Formatter可以提供实时的反馈，帮助开发者及时修正问题。

节省时间：自动化的代码检查和格式化可以节省手动审查代码的时间，提高开发效率。

集成开发环境支持：大多数现代IDE和编辑器（如VS Code）都支持Linter / Formatter，可以无缝集成到开发环境中。

自定义规则：可以根据项目需求自定义Linter的规则，以适应不同的开发规范。

防止错误：通过在代码提交前进行Lint检查，可以预防潜在的错误和问题进入版本控制系统。

团队协作：统一的代码规范有助于团队成员之间的协作，减少代码审查的负担。

在Vue CLI中，你可以选择不同的Linter / Formatter配置，例如：

ESLint with error prevention only：仅进行错误预防的ESLint配置。
ESLint + Airbnb config：使用Airbnb编码规范的ESLint配置。
ESLint + Standard config：使用Standard.js编码规范的ESLint配置。
ESLint + Prettier：结合了Prettier的ESLint配置，Prettier是一个流行的代码格式化工具，它提供了更少的配置选项，使得使用起来更加简单和舒适。

此外，你还可以选择在保存文件时自动执行Lint检查，或者在代码提交时自动检查和修复代码风格问题。这些选项有助于提高代码的质量和可维护性，同时减少人工代码审查的需要。

8.Unit Testing

在Vue新项目中选择Unit Testing选项，是为了集成单元测试框架，从而允许你对Vue组件和其他JavaScript代码进行单元测试。单元测试是软件开发中的一种测试策略，目的是验证代码的最小可测试单元（通常是函数或类）的正确性。以下是单元测试的主要功能和优势：

验证代码逻辑：单元测试可以检查特定的函数或组件是否按预期工作，确保代码逻辑的正确性。

提高代码质量：通过编写单元测试，开发者可以更早地发现错误和问题，从而提高代码的整体质量。

文档作用：单元测试可以作为代码的一种文档，说明代码应该如何使用，以及预期的行为是什么。

减少回归：当代码库中已有的代码被修改时，单元测试可以帮助确保这些修改没有破坏已有的功能，减少回归错误。

测试驱动开发（TDD）：单元测试支持测试驱动开发（TDD）的实践，即在编写实际代码之前先编写测试，这有助于确保代码设计的正确性和可测试性。

持续集成（CI）：单元测试可以集成到持续集成/持续部署（CI/CD）流程中，自动化测试过程，确保代码更改不会破坏现有功能。

覆盖率报告：单元测试可以生成代码覆盖率报告，显示代码中哪些部分被测试覆盖，哪些没有，从而帮助开发者集中精力改进测试覆盖率不足的区域。

易于重构：有了单元测试的保护，开发者在重构代码时可以更有信心，因为任何意外的更改都可以通过单元测试迅速发现。

在Vue CLI中，你可以选择不同的单元测试框架，常见的选项包括：

Mocha + Chai：Mocha是一个测试框架，Chai是一个断言库，两者经常一起使用来进行JavaScript的单元测试。

Jest：Jest是Facebook提供的一个测试框架，它包括了测试运行器和断言库，特别适合React应用，但也适用于Vue和其他JavaScript项目。

选择Unit Testing选项后，Vue CLI会自动为你的项目安装相应的测试框架和依赖，并配置必要的测试脚本。这样，你就可以开始编写测试用例，并运行测试来验证你的代码了。

9.E2E Testing 

在Vue新项目中选择E2E Testing（端到端测试）选项，是为了集成一个自动化测试框架，用于模拟用户与应用程序的完整交互过程。端到端测试可以验证整个应用从开始到结束的流程是否按预期工作，包括用户界面、应用逻辑和数据库等所有组件的协同工作。以下是E2E Testing的主要功能和优势：

模拟用户交互：E2E测试可以模拟用户的实际使用场景，如填写表单、点击按钮、页面跳转等，确保应用的用户体验符合预期。

全面验证流程：通过测试整个应用的流程，E2E测试有助于发现可能在单元测试或集成测试中未被覆盖的问题，如工作流程、数据流和业务逻辑的错误。

提高测试覆盖率：E2E测试可以覆盖应用的所有层，包括前端、后端和数据库，从而提高测试的全面性。

增强信心：通过E2E测试，可以更有信心地确保应用在生产环境中的稳定性和可靠性。

自动化回归测试：E2E测试通常在持续集成/持续部署（CI/CD）流程中自动化运行，有助于在每次代码提交后快速发现问题。

测试工具支持：Vue CLI支持多种E2E测试框架，如Cypress、Nightwatch等，这些工具提供了丰富的API和功能，使得编写和维护E2E测试变得更加容易。

调试和问题定位：E2E测试框架通常提供强大的调试功能，如屏幕截图、视频录制等，有助于开发者快速定位和修复问题。

测试用例的组织：E2E测试用例通常按照功能或场景组织，便于管理和维护。

环境适应性：E2E测试可以在不同的环境（如开发、测试和生产环境）中运行，以确保应用在各种环境下的一致性。

测试报告：E2E测试框架可以生成详细的测试报告，包括测试结果、覆盖率和性能指标等，有助于团队了解测试状态和优化测试策略。

选择E2E Testing选项后，Vue CLI会为你的项目配置所需的测试框架和相关依赖，并生成基本的测试文件结构，让你可以开始编写和运行E2E测试用例。常见的E2E测试框架包括Cypress、Nightwatch等，它们各自有不同的特点和优势。例如，Cypress提供了一个丰富的交互式界面，支持在Chrome和基于Chromium的浏览器中运行测试，而Nightwatch则基于Selenium WebDriver，支持多种浏览器和平台 。

10.使用配置文件 

在Vue新项目中选择“使用配置文件”选项，通常是指创建或使用一个名为vue.config.js的配置文件。这个文件允许你对Vue CLI提供的内部webpack配置进行更细致的调整和自定义。以下是vue.config.js配置文件的一些主要功能：

修改webpack配置：通过vue.config.js，你可以访问和修改项目的webpack配置，以满足特定的构建需求，如添加新的loader、插件或修改现有配置。

多环境配置：你可以为不同的环境（开发、生产、测试等）定义不同的配置，通过环境变量来区分和加载相应的配置文件（如.env.development、.env.production）。

调整输出目录：可以指定构建输出的目录（outputDir），以及静态资源的目录（assetsDir）。

公共路径配置：通过publicPath属性，你可以设置应用部署的基础路径，这在部署到子路径时特别有用。

页面配置：如果项目是多页面应用，可以通过pages选项来配置不同的页面入口。

CSS相关配置：可以对CSS进行配置，如是否使用CSS Modules、是否提取CSS到单独文件等。

代理和跨域问题处理：在开发环境中，如果需要访问后端服务，可以通过devServer.proxy来配置代理，解决跨域问题。

插件选项：通过pluginOptions，可以向Vue CLI插件传递选项，以自定义插件的行为。

链式操作webpack配置：通过chainWebpack或configureWebpack函数，可以链式操作或完全覆盖webpack的配置。

模式和环境变量：可以定义和使用不同的模式和环境变量，以适应不同的运行环境。

使用配置文件可以让你更灵活地控制项目的构建过程，而不必直接修改Vue CLI的内部配置，使得项目的配置更加清晰和可维护。

参考文档：【Vue项目管理器新项目创建】在VScode中使用Vue项目管理器完成新项目创建（超详细)的图文讲解~_vscode使用vue-CSDN博客