标签:support 打包 回车 实时 通过 man sso win 官方
本文篇主要讲windows系统下的操作
win+r --> cmd --> 回车
然后一波操作.. 来到你的本地workspace
vue create myobject
你会被提示选取一个 preset(预设)。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
? Please pick a preset: (Use arrow keys) > default (babel, eslint) Manually select features
这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。这里咱们使用自定义来创建(按键盘 ↑ ↓ 来切换选择,回车确认)
↓回车之后如下
? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Babel // Babel编译 ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex (*) CSS Pre-processors // CSS预编译器(包括:SCSS/Sass、Less、Stylus) (*) Linter / Formatter // 代码检测和格式化 ( ) Unit Testing // 单元测试 ( ) E2E Testing // 端到端测试
根据项目具体情况选择不同的配置,
空格键:选中/反选;
按a键:全选/全不选;
按i键:反选已选择项;
上下键:上下移动选择。
回车:进入下一步
Babel
可以帮我们将 高级的语法转换为低级的语法,这个必选。如有特殊需求,Babel 可以通过 babel.config.js 进行配置。
CSS Pre-processors:
选择CSS 预处理类型:Pick a CSS pre-processor
Linter / Formatter
选择Linter / Formatter规范类型:Pick a linter / formatter config
选择lint方式,保存时检查/提交时检查:Pick additional lint features
↓回车之后如下
? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, CSS Pre-processors, Linter ? 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 Stylus
这一项按个人习惯选择,本文选择dart-sass
sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现,运行会慢一点;node-sass是自动编译实时的,dart-sass需要保存后才会生效。
↓回车之后如下
? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, CSS Pre-processors, Linter ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier
Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件,并且对各个插件的版本有所要求。
你可以执行以下命令查看所依赖的各个版本:
npm info "eslint-config-airbnb@latest" peerDependencies
这里选择Airbnb,不安标准来,代码编译不通过
↓回车之后如下
? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, CSS Pre-processors, Linter ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: Airbnb ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit
选择保存时校验
↓回车之后如下
? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, CSS Pre-processors, Linter ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: Airbnb ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json
In dedicated config files: 单独保存在各自的配置文件中
In package.json: 保存在package.json文件中
这里选择单独文件配置
↓回车之后如下
? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, CSS Pre-processors, Linter ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: Airbnb ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)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)
y保存这一次的配置下次使用,这一步随意。
接下来就是准备编码了
cd myobject # 项目启动 npm run serve # 打包 npm run build
标签:support 打包 回车 实时 通过 man sso win 官方
原文地址:https://www.cnblogs.com/huipinpuzi/p/12165751.html