基于Vue CLI搭建vue3项目

news/2024/11/7 12:38:16/

前言

使用vue官方的脚手架进行搭建Vue CLI
注意:create-vue是基于Vite搭建项目,今天我们还是基于webpack搭建使用vue create +项目名称这个命令
在这里插入图片描述

一、步骤

1、 使用默认配置项还是自定义配置

这里我选择自定义
在这里插入图片描述

2、 选择需要配置的选项

根据个人进行选择
在这里插入图片描述

3、选择vue的版本

在这里插入图片描述

4、 是否使用Class风格装饰器

本人选择否,根据具体情况选择
在这里插入图片描述

5、是否用babel转义ts

  • typescript 具备转换 ts 到指定某 es 版本的能力,但是不具备 babel 提供的其他转换代码的能力。
  • 例如:typescript 虽然能够把 jsx 转换为 javascript,但是转换的结果不能满足 vue 的要求,依然需要 babel 进行二次转换
  • 建议开启:jsx 是 vue 使用 ts 比较成熟的方案
    在这里插入图片描述

6、是不是用history模式来创建路由

该配置项的作用
在这里插入图片描述

7、 选择css预处理器

根据自身编写css习惯进行选择
在这里插入图片描述

8、选择ESLint配置方式

在这里插入图片描述

  • ESLint with error prevention only :只配置使用 ESLint 官网的推荐规则
  • ESLint + Airbnb config:使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置
  • ESLint + Standard config:使用 ESLint 官网推荐的规则 + Standard 第三方的配置
  • ESLint + Prettier:使用 ESLint 官网推荐的规则 + Prettier 第三方的配置,Prettier 主要是做风格统一。代码格式化工具

9、选择什么时候进行lint检测

1、lint on save
代码文件中有代码不符合 lint 规则时,会在 compile 阶段提示 warning。如果出现了语法错误,会直接在页面上显示 error

2、lint and fix on commit
代码除了语法错误导致的 error 外不会提示 warning。而是在当前项目进行 git commit 操作的时候,通过 githook,在 pre-commit 阶段执行 lint 和 fix 操作,自动帮我们把有语法错误的地方修改为符合规范。
在这里插入图片描述

10、Bable、ESLint配置存放位置

选项1:放置到独立文件中
选项2:放在package.json中
在这里插入图片描述

11、是否保存配置

是否保存刚才你选择的一系列的配置
在这里插入图片描述
如果选择yes,你需要输入改一系列配置的名称

配置完成


http://www.ppmy.cn/news/64153.html

相关文章

flutter的环境搭建步骤(MacBook Pro)

1.下载Flutter SDK包 地址:https://docs.flutter.dev/get-started/install/macos 2.配置环境变量 vim ~/.bash_profile //在打开的文件里增加一行代码,意思是配置flutter命令在任何地方都可以使用。 export PATH/app/flutter/bin:$PATH // 从新加载 sou…

day29_jdbc

今日内容 零、 复习昨日 一、JDBC 二、登录 三、ORM 零、 复习昨日 DDL (针对结构,库,表,列,索引) 最重要建表语句 create table emp(empno int primary key auto_increment,ename varchar(10) not null,sal double(10,2) default 3000,hiredate date unique )DML 增删改 inser…

计算机毕业论文选题推荐|软件工程|系列三

文章目录 导文题目导文 计算机毕业论文选题推荐|软件工程 (***语言)==使用其他任何编程语言 例如:基于(***语言)门窗账务管理系统的设计与实现 得到:基于JAVA门窗账务管理系统的设计与实现 基于vue门窗账务管理系统的设计与实现 等等 题目 基于(***语言) 一体化智慧停车…

css中常用伪类表单验证:invalid、:valid、:required、以及:not 、:lang、:empty的使用

MDN文档关于伪类的相关介绍 1、 :invalid :invalid 是 CSS 伪类选择器&#xff0c;用来选择任何未通过验证的 <form>、<fieldset>、<input> 或其他表单元素。 <form class"form"><label for"email">邮箱地址:</label>…

本地部署 MiniGPT-4

本地部署 MiniGPT-4 1. 什么是 MiniGPT-42. Github 地址3. 安装 MiniGPT-44. 准备预训练的 MiniGPT-4 checkpoint5. 在本地启动演示其他 1&#xff0c;安装 CUDA Toolkit 11.8其他 2&#xff0c;安装 GCC 9 版本&#xff0c;并设置为默认GCC版本其他 3(成功)&#xff0c;重新安…

TypeScript 基本概念

TypeScript 是什么&#xff1f; 目标&#xff1a;能够说出什么是 TypeScript TS 官方文档 TS 中文参考 - 不再维护 TypeScript 简称&#xff1a;TS&#xff0c;是 JavaScript 的超集&#xff0c;JS 有的 TS 都有 TypeScript Type JavaScript&#xff08;在 JS 基础之上…

进阶自动化测试,这3点你一定要知道的...

自动化测试指软件测试的自动化&#xff0c;在预设状态下运行应用程序或系统&#xff0c;预设条件包括正常和异常&#xff0c;最后评估运行结果。将人为驱动的测试行为转化为机器执行的过程。 自动化测试框架一般可以分为两个层次&#xff0c;上层是管理整个自动化测试的开发&a…

如何解决Redis的双写一致性

目录 1.更新策略2.问题场景3.解决方案 1.更新策略 Redis和MySQL的默认的更新策略是旁路缓存策略&#xff0c;旁路缓存策略又有写策略和读策略 写策略&#xff1a;更新时&#xff0c;先更新数据库&#xff0c;再更新缓存 读策略&#xff1a;读取数据时&#xff0c;如果命中缓…