若依项目-第一篇创建项目

无敌暴暴龙
72 阅读6分钟

根据其他若依系统进行学习

这篇文章是为了记性不好的我以后进入到正常公司迈出的第一步，希望年底就能换一个正常公司

1.创建项目

vue create manage-system(具体配置情况我随便配置的，因为我不认识里面写的啥，只知道vue2,后面搜索了一下，就备注一下吧)

image.png

  1. Please pick a preset: Manually select features（请选择一个预设: 手动选择功能）：当时是有三个选项，一个是vue3，vue2，Manually select features（自己配置,就是自己预设配置文件）
  2. Check the features needed for your project: Babel, Router, Vuex, Linter（检查你的项目所需要的功能: Babel，Router，Vuex，Linter）：当时是有Babel,TypeScript,Progressive Web App(PWA)Support,Router,Vuex,CSS Pre-processorsLinter Formatter,Unit Testing,E2E Testing

Babel

  • 用途: Babel 是一个 JavaScript 编译器，它将较新的 JavaScript 代码转换成向后兼容的版本，这样就可以在不支持最新特性的环境中使用最新的 JavaScript 语言特性。 配置文件: .babelrc 或 babel.config.json。在这个文件中，你可以指定使用的 presets 和 plugins。

TypeScript

  • 用途: TypeScript 是 JavaScript 的超集，它添加了静态类型系统和其他高级功能，如接口、泛型等。 配置文件: tsconfig.json。这个文件用于定义编译选项，比如目标输出格式(target)、模块解析模式(moduleResolution)等。

Progressive Web App (PWA) Support

  • 用途: PWA 支持允许网站像原生应用一样工作，提供离线访问、推送通知等功能。 配置: 这通常涉及到创建一个 service-worker.js 文件来处理缓存和服务工作程序逻辑，并且需要一个 manifest.json 文件来描述应用的信息。

Router

  • 用途: Vue Router 是 Vue.js 官方的路由管理器，它用于实现单页面应用中的页面跳转和导航。 配置文件: 通常是一个名为 router.js 或 index.js 的文件位于 src/router 目录下，这里定义了路由规则。

Vuex

  • 用途: Vuex 是 Vue.js 的状态管理模式，用来集中管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 配置文件: 通常是一个名为 store.js 或 index.js 的文件位于 src/store 目录下，这里定义了状态(state)、mutations、actions 和 getters。

CSS Pre-processors

  • 用途: CSS 预处理器（如 Sass、Less）允许你使用变量、嵌套规则、继承、函数等功能来编写更清晰、维护性更好的 CSS。 配置文件: 如 .sass-lint.yml 用于配置 Sass 校验规则。

Linter & Formatter

  • 用途: Linter 用来检查代码中的错误，Formatter 则是用来统一代码风格。 配置文件: 如 .eslintrc.js 用于 ESLint 规则配置，.prettierrc 用于 Prettier 配置。

Unit Testing

  • 用途: 单元测试是测试代码中最小的可测试单元（通常是函数）。 配置文件: 如 jest.config.js 用于 Jest 测试框架的配置。

E2E Testing

  • 用途: E2E（端到端）测试用于模拟用户与应用程序交互的过程，确保整个应用从头到尾都能正常工作。 配置文件: 如 cypress.json 用于 Cypress 测试框架的配置。
  1. Choose a version of Wue.js that you want to start the project with 2.x（选择一个要用2.x 启动项目的 Vue.js 版本）
  2. Use history mode for router? (Requires proper server setup for index fallback in production)Yes（对路由器使用历史记录模式? (在生产中索引回退需要正确的服务器设置)是的）

History Mode 特点：

  • URL 更友好：没有哈希 (#) 符号，看起来更像传统的服务器渲染页面。
  • SPA 和 SSR 兼容：这种模式在服务端渲染 (Server-Side Rendering, SSR) 应用中非常有用，因为它让 URL 更加自然，可以更好地集成到现有的 SEO 策略中。
  • 刷新和直接访问支持：用户可以直接在浏览器地址栏输入某个路径或者刷新页面，而不需要依赖于哈希历史。

服务器配置要求：

然而，History 模式的缺点在于它需要后端服务器的配合。当用户通过浏览器直接访问某个页面路径或者刷新页面时，如果没有正确的服务器设置，用户可能会看到一个 404 页面，因为服务器实际上并没有对应的物理文件来响应这个请求。为了防止这种情况发生，在生产环境中需要对服务器进行适当的配置，使得任何未知的路径都会重定向到 index.html 文件，然后由前端路由来决定如何处理该请求。（如果选择在 Vue Router 中使用 History 模式，那么你需要确保服务器已经被适当地配置来处理未知路径的情况，从而避免出现 404 错误页的问题。这样做可以让应用在用户体验上更加无缝，尤其是在直接链接或刷新页面时。）

  1. Pick a linter / formatter config:Basic（选择一个 linter / formatter 配置: Basic）：选择一个 linter 和 formatter 的配置意味着你需要为你的项目挑选合适的代码质量工具，并且设置它们来保持代码的一致性和可读性。

Linter (代码校验器)

用途: Linter 用来检查代码中的潜在错误、不符合最佳实践的代码结构等问题。它可以帮你及早发现并修复这些问题，提高代码质量。

常见工具:

  • ESLint: 对 JavaScript 代码进行静态分析，检测错误和编码规范。
  • TSLint: 专门针对 TypeScript 代码的 linter 工具。注意，现在推荐使用 ESLint 配合 TypeScript 插件代替 TSLint。

Formatter (代码格式化器)

用途: Formatter 用来自动格式化代码，使其符合项目的编码风格。它可以帮助团队成员保持代码风格的一致性。

常见工具:

  • Prettier: 一个流行的代码格式化工具，支持多种编程语言，包括 JavaScript 和 TypeScript。
  1. Pick additional lint features:Lint on save（选择额外的代码质量检查功能）

Lint on Save 的作用

  • 实时反馈：在保存文件时立即获得关于代码风格和潜在错误的反馈。
  • 代码规范：确保代码遵循预定的编码规范。
  • 减少 Bug：及时发现语法错误和其他潜在问题，降低 bug 发生的概率。
  • 提高效率：通过自动化工具减少手动检查代码的时间。

7.Where do you prefer placing config for Babel, ESLint, etc.?In package.json（您更喜欢将 Babel、 ESLint 等配置放在哪里？在In package.json里面）

8.Save this as a preset for future projects（保存这个作为未来项目的预设）：保存这个之后，后面再创建项目的时候就可以选择这个配置

好了，这篇就先写这些，要不然一篇又臭又长的，我都要吐了，全都不会，这些估计得等我后面多学点才行。

avatar
文章
阅读
粉丝