vue3初始化创建配置

发布于 2022-09-21  1089 次阅读

0.0 、注以下操作须在安装node和vue脚手架之后才可配置

// 0.1 安装node
安装地址 https://nodejs.org/en/
// 0.2 查看node是否安装完成, 控制台执行下俩行代码 不报错 即安装完成
node -v 
npm -v  
// 0.3 安装vue脚手架
npm install -g @vue/cli 
// 0.4 查看vue是否安装完成,控制台执行 不报错 即安装完成 
vue -v

1.0 、vue3项目 初始创建

vue create tset-plus

2.0、执行上方代码

2.1 手动选择配置

  Vue CLI v5.0.8
  ? Please pick a preset:
    vue3Create ([Vue 3] less, babel, typescript, router, vuex, eslint)  // 配置完成后在新创建时会出现
    Default ([Vue 3] babel, eslint) // 默认创建vue3 
    Default ([Vue 2] babel, eslint) // 默认创建vue2
  > Manually select features // 手动选择配置

2.2 选择项目所需功能

  ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
  <enter> to proceed) // 选择项目所需功能
   (*) Babel // 支持高阶语法转换。可以将ES6代码转为ES5代码。
   (*) TypeScript // 支持用TypeScript写源码。包含并扩展了JS的语法，需要被编译输出为JS在浏览器运行。
   ( ) Progressive Web App (PWA) Support // 支持PWA。渐进式Web应用程序。
   (*) Router // vue路由
   (*) Vuex // vue的状态管理模式
   (*) CSS Pre-processors // CSS 预处理器（如：less、sass）
   (*) Linter / Formatter //  代码风格检查和格式化（如：ESlint）
   ( ) Unit Testing // 支持单元测试
   ( ) E2E Testing // 支持E2E（end to end）测试

2.3 选择需要启动项目的 Vue.js 版本

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

2.4 是否使用类风格的组件语法

? Use class-style component syntax? No // 使用类风格的组件语法？

2.5 将语法转换和Ts一起使用

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes  // 将语法转换和Ts一起使用

2.6 选择路由模式

? Use history mode for router? (Requires proper server setup for index fallback in production) No // 使用历史模式的路由

2.7 选择 CSS 预处理器

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) // 选择 CSS 预处理器
  Sass/SCSS (with dart-sass)
> Less
  Stylus

2.8 选择语法检验工具

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only // 仅错误预防
  ESLint + Airbnb config // Airbnb校验配置
> ESLint + Standard config // 标准校验配置
  ESLint + Prettier // 完美校验配置

2.9 选择语法检查方式

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed) //
>(*) Lint on save // 保存时检测
 ( ) Lint and fix on commit // 代码commit提交时检测

2.10 配置文件存放位置

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
  In dedicated config files // 独立文件放置
> In package.json // 放package.json里

2.11 是否将此保存为将来项目的预设

? Save this as a preset for future projects? (y/N) Yes

2.12 命名[下次创建项目 可以使用该模板直接创建]

? Save preset as: vue3Create

3.0总结

Vue CLI v5.0.8
? Please pick a preset: Manually select features // 手动选择配置
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter // 选择项目所需功能
? Choose a version of Vue.js that you want to start the project with 3.x // 选择需要启动项目的 Vue.js 版本
? Use class-style component syntax? No // 是否使用类风格的组件语法
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes // 将语法转换和Ts一起使用
? Use history mode for router? (Requires proper server setup for index fallback in production) No // 选择路由模式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less // 选择 CSS 预处理器
? Pick a linter / formatter config: Standard //  选择语法检验工具
? Pick additional lint features: Lint on save // 选择语法检查方式
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json // 配置文件存放位置
? Save this as a preset for future projects? Yes // 是否将此保存为将来项目的预设
? Save preset as: vue3Create // 为存储配置项起名字

4.0配置完成图