1. vue create [name]
选择最后一项Manually select features,是让你自己选择需要的预安装包,会变成这样的界面:
这里除了方向键上、下,space空格键是选上需要的或取消已选的,a是选择所有,i是反向选择。选择完成后,按enter回车,会出现下面问题:
我参考了这个按照这个
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)路由是否选择history模式.如
何选择history模式则需要后台服务进行相关设置,这里输入n,默认模式即可,回车
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)CSS Pre-processors
如果你在预安装选项里选择了CSS Pre-processors,那么就会出现这样的问题:
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less StylusPick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)选择一个css预处理器
问你需要哪个 css pre-processor,选一个自己平时用的就好了,比如我会选择Less/scss。
Linter / Formatter 代码风格、格式校验
如果你在预安装选项里选择了Linter / Formatter,那么就会出现这样的问题:
Pick a linter / formatter config: (Use arrow keys)自动代码格式检测,选择eslint + prettier回车
选择Linter / Formatter类型:Pick a linter / formatter config: 选项: TSLint ESLint with error prevention only 仅错误预防 ESLint + Airbnb config Airbnb配置 ESLint + Standard config 标准配置 ESLint + Prettier 选择lint方式:Pick additional lint features 选项: Lint on save 保存时检查 Lint and fix on commit 提交时检查选择一个ESLint的配置:
ESLint with error prevention only 只会报error
ESLint + Airbnb config 是Airbnb的ESLint
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)语法检测方式,
Lint on save:保存就检查代码语法
Lint and fix on commit:只有在commit 的时候检查并修复。
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)配置文件保存位置,
In dedicated config files(单独文件保存),
In package.json(package.json保存)
,我选择的是package.json
Unit Testing
如果选择了Unit Testing:
Pick a unit testing solution: (Use arrow keys) ❯ Mocha + Chai Jest 这是测试的框架选择。
是否保存刚刚的预安装配置
选择N就结束了,然后就会自动开始安装。
选择y: 会继续出现这个 Save preset as: 填写保存预安装的名字。回车,开始安装下载依赖。过程基本上会持续1-10分钟。
Save this as a preset for future projects?(是否保存项目创建配置),
输入y,以后再创建项目的时候会有记录,直接创建即可
参考
https://blog.csdn.net/qq_41389092/article/details/107516311
https://blog.csdn.net/weixin_45027192/article/details/105136983
https://blog.csdn.net/qq_35310623/article/details/105807176