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 的配置文件，用于自定义项目的构建和开发服务器等配置。