VUE3基础环境搭建

1. 安装vue.js

npm install vue -g

安装webpack

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。它的主要目的是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够转换、打包或包裹几乎任何资源或资产。其核心功能包括：

• 模块打包：Webpack 会分析项目结构，找到 JavaScript 模块以及其它的一些浏览器不能直接运行的扩展语言（如SCSS、TypeScript等），并将其转换和打包为合适的格式。
• 依赖管理：Webpack 能够识别代码之间的依赖关系，并用图的形式将其展现出来，确保打包后的文件能够按照正确的顺序执行。
• 加载器：Webpack 通过使用不同的加载器(loader)来处理非 JavaScript 文件，例如将 SASS/LESS 转换为 CSS，图片和字体等静态资源的处理，以及将高版本的 JavaScript 转换为兼容性更好的 JavaScript。
• 插件系统：通过插件(plugins)，Webpack 可以扩展其功能，如优化打包文件、环境变量注入、代码压缩等。
• 开发服务器：Webpack 可以配合 webpack-dev-server 提供一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

npm install webpack -g
npm install  webpack-cli -g

安装vue-cli

Vue CLI（命令行界面）是一个用于快速Vue.js开发的完整系统，为Vue生态系统提供了一个标准的工具基线。它允许开发者快速搭建新项目、向现有项目添加功能以及处理项目特定任务，如构建、测试和代码检查。以下是其核心功能：

• 项目脚手架：快速生成具有默认或自定义配置的新项目。例如，您可以选择Vue的版本、包括路由器、状态管理器、linter、单元测试等。
• 插件系统：通过插件扩展项目的能力。Vue CLI插件可以添加新命令、管理项目依赖关系以及修改webpack配置。
• 图形用户界面：Vue CLI还提供了一个图形用户界面来管理您的项目，这对于那些不喜欢使用命令行的人来说更加方便。
• 即时原型设计：使用单文件组件快速原型设计新想法。
• 环境变量和模式：无缝管理特定于环境的配置。
• 构建工具：对现代构建工具（如Babel、TypeScript、ESLint、PostCSS、PWA支持、单元测试和端到端测试）的开箱即用支持。

npm install -g @vue/cli

安装vue-router

Vue Router 是 Vue.js 的官方路由管理器。它与 Vue.js 核心深度集成，使构建单页面应用变得简单。以下是 Vue Router 的一些主要用途：

• 路由配置：定义应用中的路由和组件之间的映射关系。
• 动态路由匹配：根据 URL 的不同参数，动态地渲染不同的组件。
• 嵌套路由：构建基于组件的嵌套路由结构，以反映应用的层次结构。
• 编程式的导航：通过 JavaScript 代码来导航到不同的路由。
• 命名路由：通过给路由命名，简化路由的引用。
• 路由守卫：提供“守卫”功能，以控制导航的权限，进行路由跳转前后的操作。
• 路由懒加载：结合 Vue 的异步组件和 Webpack 的代码分割功能，按需加载路由组件，提高应用性能。

通过使用 Vue Router，开发者可以非常方便地构建出具有复杂路由需求的单页面应用（SPA）。

npm install vue-router -g

安装vite

Vite 是一个现代化的前端构建工具，旨在提供更快的开发体验。它利用了 ES 模块的原生支持，实现了快速的冷启动和即时模块热更新。以下是 Vite 的一些主要用途：

• 快速的服务器启动：通过预打包依赖项，Vite 可以在几毫秒内启动开发服务器。
• 模块热更新（HMR）：支持即时更新代码变更，无需刷新页面。
• 丰富的插件生态：提供了丰富的插件支持，可以轻松集成 TypeScript、CSS 预处理器、文件压缩等功能。
• 内置的构建命令：Vite 提供了一个简单的构建命令，用于生产环境的构建，它利用 Rollup 进行打包，优化了最终的文件大小和加载性能。
• 易于配置：Vite 的配置简单明了，支持从项目根目录的 vite.config.js 文件进行配置。
• 支持多种开发框架：虽然最初是为 Vue.js 设计的，但 Vite 现在支持多种框架，如 React、Svelte 等。

Vite 的设计哲学是利用现代浏览器支持的标准 JavaScript 模块来提供快速的开发体验，同时通过构建步骤优化应用以适应生产环境。

npm install vite -g
npm install -g create-vite

安装vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它用于集中管理应用中所有组件的状态，并以一种可预测的方式来实现状态的变更。以下是 Vuex 的一些主要用途：

• 状态管理：在复杂的应用中，组件之间共享状态可能会复杂，Vuex 允许将状态存储在全局单例中，便于管理和调试。
• 数据持久化：通过与浏览器的本地存储（如 localStorage 或 sessionStorage）结合，Vuex 可以持久化部分状态，以便页面刷新后仍然保留用户的状态。
• 可预测的状态变更：Vuex 使用严格的规则确保状态以可预测的方式发生变化，所有的状态更新都是通过提交 mutation 来完成的。
• 开发工具集成：Vuex 支持 Vue.js devtools，提供了时间旅行调试、状态快照导入导出等高级调试功能。

在 Vue 应用中使用 Vuex，可以极大地提高应用的可维护性和开发效率。

npm install vuex@next -g

安装element-plus

element-plus 是一个为 Vue 3 设计的 UI 组件库，它提供了一套完整的、基于 Vue 3 的组件，用于快速构建高质量的用户界面。以下是 element-plus 的一些主要用途：

• 布局和导航：提供了多种布局和导航相关的组件，如栅格系统、导航菜单、标签页等，帮助开发者快速构建页面结构和导航。
• 数据展示：包含表格、列表、卡片、树形控件等组件，用于展示和操作大量数据。
• 表单控件：提供了各种表单控件，如输入框、选择器、开关、滑块等，以及表单验证功能，简化表单处理。
• 反馈组件：包括对话框、通知、消息提示等反馈组件，用于向用户显示信息或收集用户反馈。
• 其他实用组件：如日期选择器、时间选择器、上传控件等，满足各种开发需求。
• 主题定制：支持主题定制，允许开发者根据需求调整组件的样式，以符合品牌或设计规范。

npm install element-plus -g

查看npm全局情况

npm list -g

创建Vue3项目

vue create vue3-demo

Babel的用途

Babel 是一个广泛使用的 JavaScript 编译器，主要用途包括：

• 转换语法：将 ES6+ 代码转换为向后兼容的 JavaScript 语法，以便在当前和旧版浏览器或环境中运行。
• 应用新特性：允许开发者使用最新的 JavaScript 语法（如箭头函数、类、模板字符串等）而不必等待浏览器支持。
• 源码转换（Source Code Transformation）：通过插件转换源代码的形式，添加新功能或实现特定的编译任务。
• Polyfill：实现浏览器不支持的新 API（如 Promise、Array.from 等），通过包含一个特殊的 shim（或 polyfill），在旧浏览器中模拟这些新特性。
• 插件和预设（Plugins and Presets）：Babel 的功能可以通过插件扩展。预设（presets）是一组插件的集合，简化了配置过程。

Babel 的配置通常在项目的根目录下的 .babelrc 或 babel.config.js 文件中定义。开发者可以根据项目需求选择合适的插件和预设来配置 Babel。

ESLint的用途

ESLint 是一个开源的 JavaScript 代码检查工具，用于识别和报告代码中的模式。它的主要用途包括：

• 代码质量问题检查：检测潜在的错误或问题，如未使用的变量、未捕获的错误、重复的参数等。
• 代码风格一致性：确保代码遵循一致的风格指南，如缩进、空格、命名约定等，以提高代码的可读性和可维护性。
• 自定义规则：允许开发者根据项目需求自定义规则，以强制实施特定的编码标准或约定。
• 自动修复：ESLint 能够自动修复一些简单的问题，如格式化问题，减少手动修复的工作量。
• 插件系统：通过插件扩展其功能，支持多种框架和库的特定规则，如 React、Vue、TypeScript 等。

ESLint 的配置通常在项目的根目录下的 .eslintrc 文件或 package.json 文件的 eslintConfig 部分定义。开发者可以根据项目需求选择合适的规则和插件来配置 ESLint。

vue3-demo目录结构

• /node_modules/: 存放项目依赖的文件夹。通过运行 npm install 命令安装所有依赖。
• /public/: 存放静态资源如 index.html，这些资源在构建过程中会被复制到输出目录。
  • index.html: 作为单页面应用的入口文件，通常包含应用挂载的根元素。
• /src/: 存放项目的源代码。
  • /assets/: 用于存放静态资源如图片、样式表等。
  • /components/: 存放 Vue 组件文件，通常是 .vue 文件。
  • App.vue: 主组件，作为所有组件的根组件。
  • main.js: 项目的入口文件，用于创建 Vue 应用实例并挂载到 DOM。
• .gitignore: 指定 Git 忽略跟踪的文件和目录。
• babel.config.js: Babel 的配置文件，用于设置 JavaScript 的编译选项。
• jsconfig.json: 用于配置 JavaScript 项目的编辑器支持。
• package.json: 定义项目的元数据和依赖关系。
• package-lock.json: 锁定项目依赖的版本，确保在不同环境下安装的依赖版本一致。
• README.md: 项目的说明文件，通常包含项目介绍、安装和使用指南。
• vue.config.js: Vue CLI 的配置文件，用于自定义项目的构建和开发服务器等配置。