vue-cli vue3

2023-09-17 22:28:37

安装 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) 
  Less
  Stylus

// ----------------------------------------------------------

? 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 规范代码

常用的规则扩展：

在这里插入图片描述

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 格式化代码

{
  "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 warn
      2,
      // 什么情况下验证 一直验证
      '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)
更多推荐

英伟达 nvidia 官方code llama在线使用

新一代编程语言模型CodeLlama面世：重新定义编程的未来随着人工智能和机器学习技术的迅速发展，我们现在迎来了一款革命性的大型编程语言模型——CodeLlama。该模型是基于Llama2研发的，为开放模型中的佼佼者，其性能达到了行业领先水平。模型特点与亮点CodeLlama系列提供多种型号，以满足不同应用的需求。包括

C#流Stream与IO详解（4）——如何更快的读写文件

【前言】在我们追求更快读写速度时，通常都是为了读写二进制文件，而不是文本文件，所以这里只说FileStream、BinaryReader、BinaryWriter的使用。从前文的源码解读中能看到使用BinaryReader和BinaryWriter进行IO读写时本质还是调用了FileStream的接口，所以我们这里只说

从追问AI到人机融合再到人机环境系统智能

人工智能与人类的多元价值对齐是一个复杂而重要的问题。虽然人工智能系统具有强大的计算和学习能力，但它们缺乏人类的情感、道德判断和伦理意识。然而，以下几个方面可以帮助实现人工智能与人类的多元价值对齐：（1）制定明确的伦理框架和规范，对人工智能系统的设计、开发和应用进行指导。这些框架和规范应考虑到人权、公平性、责任、隐私保护

中兴R5300 G4服务器iSAC管理员zteroot密码遗失的重置方法及IPV6地址启用设置

本文讲解中兴R5300G4服务器BMC带外iSAC管理员zteroot密码遗失，无法登录时如何对其进行密码重置，以及iSAC启用IPV6地址的方法。一、重置中兴R5300G4服务器iSAC管理员zteroot密码1、通过SSH登录到iSAC，默认用户名：sysadmin，密码：superuser，如有修改，请输入修改后

金属热处理 术语

声明本文是学习GB-T7232-2023金属热处理术语.而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们1范围本文件界定了金属热处理基础、热处理工艺、组织与性能和热处理装备的主要术语及其定义。本文件适用于金属热处理相关技术标准及技术文件。2规范性引用文件本文件没有规范性引用文件。3基础术语3.1总称

Java之stream流的详细解析一

2.Stream流2.1体验Stream流【理解】案例需求按照下面的要求完成集合的创建和遍历创建一个集合，存储多个字符串元素把集合中所有以"张"开头的元素存储到一个新的集合把"张"开头的集合中的长度为3的元素存储到一个新的集合遍历上一步得到的集合原始方式示例代码publicclassMyStream1{publicst

什么是 Redis?

Redis是一种基于内存的数据库，对数据的读写操作都是在内存中完成的，因此读写速度非常快，常用于缓存，消息队列，分布式锁等场景。Redis提供了多种数据类型来支持不同的业务场景，比如String(字符串)、Hash(哈希)、List(列表)、Set(集合)、Zset(有序集合)、Bitmaps(位图)、HyperLog

400电话的办理和申请流程详解

导语：随着企业的发展和市场竞争的加剧，越来越多的企业开始关注客户服务体验的提升。而办理400电话成为了企业提升客户服务质量的重要手段之一。本文将详细介绍400电话的办理和申请流程，帮助企业了解如何顺利获得400电话。一、了解400电话的概念和优势400电话是一种虚拟电话号码，以400开头，由运营商提供的电话服务。相比于

QT&C++ day12

注册登录界面widget.h#ifndefWIDGET_H#defineWIDGET_H#include<QWidget>#include<QIcon>#include<QPushButton>#include<QLineEdit>#include<QLabel>#include<QDebug>#include<QMe

Ubuntu 22 Docker的使用和安装

确认系统内核版本不低于3.10,并且是64位系统,在终端执行以下命令验证内核及系统信息:$uname-aLinuxVM-4-14-ubuntu5.15.0-76-generic#83-UbuntuSMPThuJun1519:16:32UTC2023x86_64x86_64x86_64GNU/Linux通过上面的输出可知

面经学习三

目录Java与C++的区别面向对象和面向过程的区别面向对象特性Java的基本数据类型深拷贝和浅拷贝Java创建对象的几种方式final,finally,finalize的区别Java与C++的区别Java是纯粹的面向对象语言，所有的对象都继承自java.lang.Object，C++兼容C，不但支持面向对象也支持面向过

热文推荐
  1. 路由器端口转发

    什么是路由器端口转发路由器端口转发是一种网络配置技术，用于将公共网络（如互联网）上的请求转发到私有网络中的特定设备或服务。它允许外部设备通过路由器访问内部网络中的设备或服务，实现网络上的通信和互动。路由器端口转发的作用路由器端口转发的作用是允许公共网络中的设备或用户通过路由器访问私有网络中的特定设备或服务。它可以实现以

  2. LeetCode 1337. The K Weakest Rows in a Matrix【数组,二分,堆,快速选择,排序】1224

    本文属于「征服LeetCode」系列文章之一，这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁，本系列将至少持续到刷完所有无锁题之日为止；由于LeetCode还在不断地创建新题，本系列的终止日期可能是永远。在这一系列刷题文章中，我不仅会讲解多种解题思路及其优化，还会用多种编程语言实现题解，涉及

  3. STM32F4X UCOSIII 事件集

    STM32F4XUCOSIII事件集事件的应用场景UCOSIII事件工作机制UCOSIII事件操作函数事件创建函数事件删除函数事件发送函数事件接收函数UCOSIII事件例程事件在RTOS中也是一种任务间同步的机制，事件不能传递数据。跟信号量不同的是，事件可以实现一对多，多对多的同步，也就是一个事件可以唤醒多个任务，一个

  4. 2022/9/13总结

    Vue路由的封装抽离为了便于维护，我们通常需要将路由模块抽离出来在vue中，如果要写路径，可以写绝对路径使用@@代表从src目录下去寻找，能避免出现很多错误声明式导航--导航链接vue-router提供了一个全局组件router-link（取代a标签）配置to属指定路径本质是a标签，to无需#优点：能高亮默认会提供高亮

  5. 人工智能AI 全栈体系（五）

    第一章神经网络是如何实现的为什么使用ReLu函数？五、梯度消失问题1.什么是梯度消失问题？前面我们介绍的BP算法中，是这样更新权重值的：δ∗h=oh(1−oh)∑∗k∈后续(h)δ∗kw∗kh\delta*h=o_h(1-o_h)\sum*{k\in后续(h)}\delta*kw*{kh}δ∗h=oh​(1−oh​)∑

  6. 百度SEO优化不稳定的原因分析（提升网站排名的稳定性）

    百度SEO优化不稳定介绍蘑菇号-www.mooogu.cnSEO不稳定是指网站在搜索引擎中的排名不稳定，随着时间的推移会发生变化。这种情况可能会出现在网站页面结构、内容质量、外链质量等方面存在缺陷或不合理之处。因此，优化SEO非常重要，可以提高网站的稳定性和排名。掌上帮教-www.zsbjiao.cn百度SEO不稳定因

  7. Unity制作射击游戏案例01

    整理逻辑思路：//【业务逻辑】这个脚本用来1.控制物体移动旋转（WASD）、2.发射子弹（空格键）//【程序逻辑2】首先检测用户没有按下空格键2.如果按下呢执行发射子弹函数3.克隆子弹4.让克隆的子弹往前跑搭建场景为子弹模板添加刚体，并且限制旋转编写脚本：usingSystem.Collections;usingSys

  8. MySQL 高级语句 Part1（进阶查询语句+MySQL数据库函数+连接查询）

    高级语句第一部分一、MySQL进阶查询语句1.1select----显示表格中一个或数个字段的所有数据记录1.2distinct----不显示重复的数据记录1.3where----有条件查询1.4andor----且或1.5in----显示已知的值的数据记录1.6between----显示两个值范围内的数据记录1.7通

  9. 网络安全（黑客）自学

    前言：作为一个合格的网络安全工程师，应该做到攻守兼备，毕竟知己知彼，才能百战百胜。谈起黑客，可能各位都会想到：盗号，其实不尽然；黑客是一群喜爱研究技术的群体，在黑客圈中，一般分为三大圈：娱乐圈技术圈职业圈。娱乐圈：主要是初中生和高中生较多，玩网恋，人气，空间，建站收徒玩赚钱，技术高的也是有的，只是很少见。技术圈：这个圈