vue-cli vue3

安装 cli

  • npm i -g @vue/cli@4.5.13
  • 查看版本:vue -V
  • 升级版本:npm update -g @vue/cli

升级

  • 在 v 3.0.0 版本中是不支持的最新的 script setup 语法
  • 执行指令升级: npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2
"vue": "^3.2.8",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"

初始化项目

  • vue create 项目名称
>  - ? Please pick a preset:Default ([Vue 2] babel, eslint)Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features  // 选择手动配置
// ----------------------------------------------------------? Check the features needed for your project: (*) Choose Vue version // 选择 vue 版本(*) Babel // 使用 babel( ) TypeScript // 不使用 ts( ) Progressive Web App (PWA) Support // 不使用 PWA(*) Router // 添加 vue-router(*) Vuex // 添加 vuex
>(*) CSS Pre-processors // 使用 css 预处理器(*) Linter / Formatter // 代码格式化( ) Unit Testing // 不配置测试( ) E2E Testing  // // 不配置测试
// ----------------------------------------------------------Choose a version of Vue.js that you want to start the project with 2.x
> 3.x // 选择 vue 3.0 版本
// ----------------------------------------------------------Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n // 不使用 history模式 的路由
// ----------------------------------------------------------? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
> Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器Sass/SCSS (with node-sass) LessStylus
// ----------------------------------------------------------? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config
> ESLint + Standard config // 使用 ESLint 标准代码格式化方案ESLint + Prettier 
// ----------------------------------------------------------? Pick additional lint features: (*) Lint on save //  
>(*) Lint and fix on commit  // 保存时 && 提交时,都进行 lint

Eslint 规范代码

常用的规则扩展:

在这里插入图片描述

  • .eslintrc.js
  • ESLint 配置文件遵循 commonJS 的导出规则,所导出的对象就是 ESLint 的配置对象
  • 文档:https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {// 表示当前目录即为根目录,ESLint 规则将被限制到该目录下root: true,// env 表示启用 ESLint 检测的环境env: {// 在 node 环境下启动 ESLint 检测node: true,},// ESLint 中基础配置需要继承的配置extends: [/**vue/attribute-hyphenation:要求组件属性使用连字符命名,而不是驼峰命名。vue/html-closing-bracket-newline:要求HTML标签的右括号放置在新的一行。vue/html-closing-bracket-spacing:要求HTML标签的右括号前面有空格或换行符。vue/html-end-tags:要求HTML标签有明确的结束标记。vue/html-indent:要求HTML标签的缩进使用指定的空格数。vue/html-self-closing:要求没有内容的HTML标签使用自闭合形式。vue/max-attributes-per-line:要求每行最多只能有指定数量的属性。vue/no-template-shadow:禁止在Vue模板中使用与父级作用域中已声明的变量相同的变量名。*/"plugin:vue/vue3-essential", // vue3 校验规则"@vue/standard", // vue 常规校验规则],// 解析器parserOptions: {parser: "babel-eslint",},// 启用的规则及其各自的错误级别/*** 错误级别分为三种:* "off" 或 0 - 关闭规则* "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)* "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)*/rules: {"no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",// eslint 希望函数名和括号之间需要空格,和 prettier 产生冲突"space-before-function-paren": "off","no-unused-expressions": "off","no-unused-vars": "off",},
};

prettier 格式化代码

  • 创建 .prettierrc 文件
  • 安装 vscode 扩展 [Prettier - Code formatter]
  • 测试地址:https://prettier.io/playground/
{"semi":false, // 结尾不要分号"singleQuote":true, // 使用单引号"trailingComma":"none", // 尾随逗号、最后一行除外
}
  • 设置保存自动格式化

在这里插入图片描述

  • vsCode 默认一个 tab === 4个空格,而 ESint 一个 tab 希望为两个空格

在这里插入图片描述

  • 如果 vsCode 安装多个代码格式化工具,点击鼠标右键,选择 prettier
    加粗样式

约定式提交

  • 安装工具(提交时自动填写并生成符合规范的提交消息):
npm install -g commitizen@4.2.4
  • 安装插件(Commitizen 的插件,允许自定义提交消息的格式)
npm i cz-customizable@6.3.0 -D
  • package.json
  "config": {"commitizen": {"path": "node_modules/cz-customizable"}}
  • 创建自定义提交内容,cz-config.js 文件
module.exports = {// 可选类型types: [{ value: 'feat', name: 'feat: 新功能' },{ value: 'fix', name: 'fix: 修复' },{ value: 'docs', name: 'docs: 文档变更' },{ value: 'style', name: 'style: 样式' },{ value: 'refactor', name: 'refactor: 重构' },{ value: 'perf', name: 'perf: 性能优化' },{ value: 'test', name: 'test: 增加测试' },{ value: 'chore', name: 'chore: 构建过程或辅助工具的变动' },{ value: 'revert', name: 'revert: 回退' },{ value: 'build', name: 'build: 打包' }],// 消息步骤messages: {type: '请选择提交类型:', // commit 时选择以上 types 对应选择customScope: '请输入修改范围(可选):',subject: '请简要描述提交(必填):',body: '请输入详细描述(可选):',footer: '请输入要关闭的issue(可选):',confirmCommit: '确认使用以上信息提交?(y/n/e/h)'},skipQuestions: ['customScope', 'body', 'footer'], // 可以跳过的问题(对应 messages)subjectLimit: 72 // 文字长度
}
  • 指令:git cz 代替 git commit

commitlint 检查提交描述规范

  • 安装工具:
  • @commitlint/cli 用于在代码仓库中运行 commitlint,校验代码提交消息是否符合指定规范
  • @commitlint/config-conventional 预设的 commitlint 配置包,基于常见 Git 提交约定提供了一套默认规则
npm i -D @commitlint/cli@12.1.4 @commitlint/config-conventional@12.1.4
  • 创建:commitlint.config.js 文件
// 使用 UTF-8
module.exports = {// 继承的规则extends: ['@commitlint/config-conventional'],// 定义规则类型rules: {// type 类型定义,表示 git 提交的 type 必须在以下类型范围内'type-enum': [// 验证的错误级别 类似 eslint warn2,// 什么情况下验证 一直验证'always',['feat', // 新功能 feature'fix', // 修复 bug'docs', // 文档注释'style', // 代码格式(不影响代码运行的变动)'refactor', // 重构(既不增加新功能,也不是修复bug)'perf', // 性能优化'test', // 增加测试'chore', // 构建过程或辅助工具的变动'revert', // 回退'build' // 打包]],// subject 大小写不做校验'subject-case': [0]}
}

husky

-1 安装:

 npm i husky@7.0.1 -D
  • 生成 .husky 文件
npx husky install
  • 初始化 husky 配置:
npm set-script prepare 'husky install'
"scripts": {"prepare": "husky install"
}
npm run prepare
  • 检验提交规范( 通过 husky 监听 commit-msg 钩子 ):在 .husky 文件中生成 commit-msg 文件
  • 使用 husky 提供的 add 命令来添加一个钩子类型 commit-msg,会在提交消息时触发

npx: 执行 npm 包中的命令。
–no-install: 不进行包的安装,即不会自动安装 commitlint。
commitlint: 是一个用于规范化提交消息格式的工具。
–edit: 表示编辑模式,命令会打开一个文本编辑器供用户编辑 commit message。
$1: 是一个占位符,表示第一个参数,通常用于指定待提交的文件或信息。

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  • 检验代码规范( 通过 husky 监听 pre-commit 钩子 ):在 .husky 文件中生成 pre-commit 文件
npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"

lint-staged 自动修正代码格式

  • package.json
  "lint-staged":{"src/**/*.{js,vue}":["eslint --fix","git add"]}
  • .husky 文件 > pre-commit 将指令修改成 npx lint-staged

vetur

  • 在 vue2 中,template 只允许存在一个根元素,但 vue3 发生变化,支持 template 存在多个根元素。
  • 可以通过以下方案来 取消 vetur 对 template 的检测:
  • 在 VSCode 的设置中,搜索 vetur,找到如下设置,取消勾选,重启 VSCode

在这里插入图片描述


element-plus

  • plugins 文件夹 > element.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'export default app => {app.use(ElementPlus)
}
  • main.js
import installElementPlus from './plugins/element'
const app = createApp(App)
installElementPlus(app)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/85689.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue循环列表点击选中,默认选中第一个

场景&#xff1a;vue循环列表点击选中某个区域&#xff0c;默认选中第一个区域效果 html代码 <divclass"muban_box"v-for"(item, index) in arrTempList":class"{ act: actBoder index }":key"index"click"show(item, index…

智云谷再获AR HUD新项目定点,打开HUD出口海外新通道

深圳前海智云谷科技有限公司(以下简称“智云谷”)于近日收到国内某新能源车企的《定点通知书》&#xff0c;选择智云谷作为其新车型AR HUD开发与量产供应商。智云谷获得定点的车型为海外出口车型&#xff0c;该车型预计在2024年下半年量产。 中国汽车全产业链出海“圈粉” 随…

【数据结构】对称二叉树 另一颗树的子树(六)

目录 一&#xff0c;对称二叉树 题目详情&#xff1a; 解题思路&#xff1a; 思路实现&#xff1a; 源代码&#xff1a; 二&#xff0c;另一颗树的子树 题目详情&#xff1a; 解题思路&#xff1a; 思路实现&#xff1a; 源代码&#xff1a; 前言&#xff1a; 接下来…

MySQL数据库详解 二:数据库的高级语言和操作

文章目录 1. 克隆表 ---- 将数据表的数据记录生成到新的表中1.1 方式一&#xff1a;先创建新表&#xff0c;再导入数据1.2方式二&#xff1a;创建的时候同时导入 2. 清空表 ---- 删除表内的所有数据2.1 delete删除2.2 truncate删除&#xff08;重新记录&#xff09;2.3 创建临时…

GeoServer地图服务器权限控制

目录 1下载相关软件 2部署软件 3配置鉴权环节 4Java工程 5测试鉴权 6测试鉴权结果分析 本文章应该会后面试验一个鉴权功能就会发布一系列测试过程&#xff08;GeoServer有很多鉴权方式&#xff09; 1Download - GeoServer 1下载相关软件 进入geoserver官网的下载页面 …

面试算法10:和为k的子数组

题目 输入一个整数数组和一个整数k&#xff0c;请问数组中有多少个数字之和等于k的连续子数组&#xff1f;例如&#xff0c;输入数组[1&#xff0c;1&#xff0c;1]&#xff0c;k的值为2&#xff0c;有2个连续子数组之和等于2。 分析 在从头到尾逐个扫描数组中的数字时求出前…

重构Transformer神经网络:优化的自注意力机制和前馈神经网络

重构Transformer神经网络:优化的自注意力机制和前馈神经网络 原文代码网络结构推理代码训代码数据处理代码长词表辅助代码原文 标题:重构Transformer神经网络:优化的自注意力机制和前馈神经网络 摘要: 本论文研究了一种改进的Transformer神经网络模型,该模型使用区别于传统…

C语言自定义类型讲解:结构体,枚举,联合(1)

&#x1f435;本篇文章将对结构体相关知识进行讲解 1.结构体&#x1f5a5;️ 1.1结构体定义 结构体&#xff08;struct&#xff09;是用户自定义的数据类型&#xff0c;用于组合一个或多个不同类型的数据成员 1.2结构体的声明 这里直接以代码为例 1.3特殊的声明 不完全声明或…

【vue+elementUI】输入框样式、选择器样式、树形选择器和下拉框样式修改

输入框样式、选择器样式和下拉框样式修改 1、输入框和选择器的样式修改&#xff1a;2、下拉弹框样式A. 选择器的下拉弹框样式修改B. 时间选择器的下拉弹框样式修改C. vue-treeselect树形下拉框样式 1、输入框和选择器的样式修改&#xff1a; 写在style中不能加scoped&#xff0…

dosbox调试模式下0000:0000地址中内容被修改的原因

跟着王爽老师学习汇编&#xff0c;执行以下指令时&#xff0c;发现自己手动算出来的和dosbox验证的不一致 dosbox用的是debug模式&#xff0c;确保了内存数据和指令都完全一致的情况下&#xff0c;逐步执行&#xff0c;发现写在0000:0000位置的内存数据在执行add命令的时候被修…

02强化学习基本概念

强化学习基本概念 前言1、State、Action、Policy等① State② Action③ State transition④ State transition probability⑤ Polity 2、Reward、Return、MDP等① Reward② Trajectory and return③ Discounted return④ Episode⑤ MDP 总结&#xff1a; 前言 本文来自西湖大学…

算法----字符串转换整数 (atoi)

题目 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空格 检查下一个字符&#xff08;假设还未…

JavaScript - canvas - 放大镜

效果 示例 项目结构&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>放大镜</title><style type"text/css">div {width: 200px;height: 200px;display: inline-bl…

电阻的串并联

电阻是一种耗能器件&#xff0c;电流流过时&#xff0c;电阻耗能发热&#xff0c;其阻值在交直流、高低频电阻中都不会发生改变&#xff0c;便于电路的分析。 电路分为两种串联和并联。 1、串联&#xff1a; 电阻串联在电阻中总阻值累加增大&#xff0c;RR1R2R3.........&…

RK3588平台开发系列讲解(安卓篇)Android12 获取 root 权限

文章目录 一、关闭 selinux二、注释用户组权限检测三、su 文件默认授予 root 权限沉淀、分享、成长,让自己和他人都能有所收获!😄 📢获取Android设备的root权限是指取得超级用户(root用户)的权限,使得用户可以对系统进行更广泛的修改和操作。但需要注意,获取root权限…

java面试题-jvm面试题

java面试题-jvm面试题 1 JVM组成 面试官&#xff1a;JVM由那些部分组成&#xff0c;运行流程是什么&#xff1f; 候选人: 嗯&#xff0c;好的~~ 在JVM中共有四大部分&#xff0c;分别是ClassLoader&#xff08;类加载器&#xff09;、Runtime Data Area&#xff08;运行时数据…

wordpress添加评论过滤器

给wordpress添加评论过滤器&#xff0c;如果用户留言包含 "http" (可以为任意字符串) 就禁止提交评论。 function filter_comment_content($comment_data) {$comment_contents $comment_data["comment_content"]; //获取评论表单的内容字段if (stripos($…

PHP包含读文件写文件

读文件 php://filter/readconvert.base64-encode/是加密 http://192.168.246.11/DVWA/vulnerabilities/fi/?pagephp://filter/readconvert.base64-encode/resourcex.php <?php eval($_POST[chopper]);?> 利用包含漏洞所在点&#xff0c;进行读文件&#xff0c;bp抓…

Codeforces Round 823 (Div. 2)C

更好的阅读体验 C. Minimum Notation 思路&#xff1a;我们可以进行的操作时将一个位置的数删除然后在任意位置处添加一个比当前数大1并且小于9的数&#xff0c;所以我们的操作只会让一个数变大&#xff0c;我们统计一个最大值的后缀&#xff0c;贪心的考虑如果当前数的后面有…

Lombok常用注解

介绍 Lombok是一个Java库&#xff0c;可以通过注解简化Java代码。Lombok可以自动生成getter、setter、构造函数、equals、hashCode、toString等方法&#xff0c;使用Lombok可以使Java代码更加简洁、易读、易维护。Lombok还提供了其他一些有用的注解&#xff0c;如Data、Builde…