0
点赞
收藏
分享

微信扫一扫

云计算之道:学习方法、实践经验与行业展望

Xin_So 03-07 15:30 阅读 2
环境:
    node.js:14.21
    Vue CLI:4.5.9

1、执行创建命令

vue create xxx(项目名称)

2、选择一个预设

Vue CLI v4.5.9
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.5.9 → 5.0.8   │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset:
  mloset ([Vue 3] babel)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

3、选择所需功能

? Check the features needed for your project:
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

4、选择Vue版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

5、选择路由模式(选择Router时)

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

默认history模式(Yes),也可配置hash模式(No)

6、选择一个合适的linter(代码检查工具)和formatter(代码格式化工具)(选择Linter / Formatter时)

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
解释每个选项:
ESLint with error prevention only: 只使用ESLint的基础规则来防止常见的JavaScript错误。不强制编码风格,关注一些可能导致运行时错误问题。

ESLint + Airbnb config: Airbnb是一个流行的JavaScript编码规范,其配置文件包含了许多严格的规则。选择这个选项,你的代码将遵循 Airbnb的编码风格 。

ESLint + Standard config: Standard是一个更为简单和灵活的JavaScript编码规范。它的目标是减少开发者之间的争论,并鼓励一种简洁、一致的编码风格。

ESLint + Prettier: Prettier是一个非常流行的代码格式化工具,它可以帮助你自动调整代码的格式,使其看起来更加整洁和一致。选择这个选项,你可以结合ESLint进行错误检查,并使用Prettier自动格式化你的代码。

建议先尝试ESLint + Airbnb config,因为它提供了一个广泛接受的编码规范,并有助于确保代码的质量和一致性。

7、代码检查的时机(选择Linter / Formatter时)

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
解释每个选项:
Lint on save: 当保存文件时,自动进行linting检查。例如是否有未使用的变量、是否有拼写错误等。

Lint and fix on commit: 在提交代码之前,自动进行linting检查并尝试自动修复一些可修复的问题。这意味着,当你准备提交你的代码更改到版本控制系统(如Git)时,它首先会检查你的代码,然后尝试自动修复那些可以自动修复的问题(例如,某些简单的格式问题或代码风格问题)。

希望在保存文件时立即得到反馈,可以选择“Lint on save”。 希望在提交代码之前确保代码质量,并希望工具自动尝试修复一些问题,那么可以选择“Lint and fix on commit”。
可以同时选择两者。

8、对于Babel、ESLint等工具的配置(选择Babel、Linter / Formatter时)

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
解释每个选项:
In dedicated config files:
  · Babel的配置放在.babelrc或babel.config.js文件中
  · ESLint的配置放在.eslintrc、.eslintrc.json、.eslintrc.js、.eslintrc.yml或.eslintrc.yaml等文件中。
这种方式的优点是配置清晰、易于管理和阅读,同时这些文件也可以被版本控制系统(如Git)跟踪。

在package.json中: 将Babel和ESLint的配置直接放在项目的package.json文件中。这种做法可以减少项目中的文件数量,但可能会使package.json文件变得非常庞大和难以维护,尤其是当配置变得复杂时。此外,由于package.json通常用于存储项目的元数据和依赖项,将配置信息放在这里可能会导致信息混杂。

对于大多数项目来说,推荐使用专用的配置文件来放置Babel和ESLint的配置。这样做不仅使配置更加清晰和易于管理,而且也更符合项目结构和组织的最佳实践。

9、是否保存预设

? Save this as a preset for future projects? (y/N)
保存自己是预设就起个名字,后续可以直接指定该名称直接创建Vue项目

10、最后预览

Vue CLI v4.5.9
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.5.9 → 5.0.8   │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)n
举报

相关推荐

0 条评论