创建项目¹

^{npm init vue@latest}

^{配置代码质量检测工具}

^{安装Commitizen²}

^{pip3 install -U Commitizen}

^安装eslint

^{pnpm install lint-staged -D
pnpm install eslint -D}

^{/* eslint-env node */
// .eslintrc.cjs
require("@rushstack/eslint-patch/modern-module-resolution");module.exports = {root: true,env: {node: true,},parser: "vue-eslint-parser",parserOptions: {parser: "@typescript-eslint/parser",ecmaVersion: "latest",sourceType: "module",jsxPragma: "React",ecmaFeatures: {jsx: true,},},extends: ["plugin:vue/vue3-essential","@vue/typescript/recommended","eslint:recommended","@vue/eslint-config-typescript","@vue/eslint-config-prettier",],
};}

^{安装prettier}

^{pnpm install prettier -D
pnpm install pretty-quick -D}

^{// .prettierrc.json
{"$schema": "https://json.schemastore.org/prettierrc","semi": false,"tabWidth": 2,"singleQuote": false,"printWidth": 100,"trailingComma": "none","bracketSpacing": true
}}

^{添加stylelint³}

^{pnpm install stylelint-order -D
pnpm install stylelint-config-standard -D
pnpm install stylelint-config-prettier -D
pnpm install stylelint-config-recommended
pnpm install stylelint-config-html -D
pnpm install postcss-html -D
pnpm install stylelint -D}

^{# .stylelintignore
/dist/*
/public/*
public/*}

^{// .stylelintrc.js
module.exports = {root: true,plugins: ["stylelint-order"],customSyntax: "postcss-html",extends: ["stylelint-config-standard", "stylelint-config-prettier"],rules: {"selector-class-pattern": null,"selector-pseudo-class-no-unknown": [true,{ignorePseudoClasses: ["global"]}],"selector-pseudo-element-no-unknown": [true,{ignorePseudoElements: ["v-deep"]}],"at-rule-no-unknown": [true,{ignoreAtRules: ["tailwind","apply","variants","responsive","screen","function","if","each","include","mixin"]}],"no-empty-source": null,"named-grid-areas-no-invalid": null,"unicode-bom": "never","no-descending-specificity": null,"font-family-no-missing-generic-family-keyword": null,"declaration-colon-space-after": "always-single-line","declaration-colon-space-before": "never","rule-empty-line-before": ["always",{ignore: ["after-comment", "first-nested"]}],"unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],"order/order": [["dollar-variables","custom-properties","at-rules","declarations",{type: "at-rule",name: "supports"},{type: "at-rule",name: "media"},"rules"],{ severity: "warning" }]},ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json"],overrides: [{files: ["*.vue", "**/*.vue", "*.html", "**/*.html"],extends: ["stylelint-config-recommended", "stylelint-config-html"],rules: {"keyframes-name-pattern": null,"selector-pseudo-class-no-unknown": [true,{ignorePseudoClasses: ["deep", "global"]}],"selector-pseudo-element-no-unknown": [true,{ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]}]}}]
};}

^{在package.json中添加lint脚本}

^{// package.json
"scripts":{"lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix","lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"","lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/","lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js","lint:pretty": "pretty-quick --staged","lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
}}

^安装husky

^{npx husky-init   // 初始化husky
pnpm install}

^{# .husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"npm test
npm run lint:lint-staged
npm run lint:pretty}

^{// .husky/lintstagedrc.js
// 配置lint-stage
module.exports = {"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],"{!(package)*.json}": ["prettier --write--parser json"],"package.json": ["prettier --write"],"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],"*.{vue,css,scss,postcss,less}": ["stylelint --fix", "prettier --write"],"*.md": ["prettier --write"]
};}

^{添加commitlint}

^{安装commitlint}

^{pnpm install @commitlint/config-conventional @commitlint/cli -D}

^{配置commitlint}

^{// commitlint.config.js
module.exports = {ignores: [(commit) => commit.includes("init")],extends: ["@commitlint/config-conventional"],rules: {"body-leading-blank": [2, "always"],"footer-leading-blank": [1, "always"],"header-max-length": [2, "always", 108],"subject-empty": [2, "never"],"type-empty": [2, "never"],"type-enum": [2,"always",["feat","fix","perf","style","docs","test","refactor","build","ci","chore","revert","wip","workflow","types","release",],],},
};}

^{集成到husky}

^{# commit-msg
#!/bin/sh# shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh"npx --no-install commitlint --edit "$1"}

^{安装常用工具}

^{安装tailwind}

^{pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init}

^{// main.ts
import "tailwindcss/tailwind.css"}

^{配置tailwind⁴}

^{// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {darkMode: "class",corePlugins: {preflight: false},content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],theme: {extend: {colors: {bg_color: "var(--el-bg-color)",primary: "var(--el-color-primary)",primary_light_9: "var(--el-color-primary-light-9)",text_color_primary: "var(--el-text-color-primary)",text_color_regular: "var(--el-text-color-regular)",text_color_disabled: "var(--el-text-color-disabled)"}}},plugins: []
}}

^{安装element-plus⁵}

^{pnpm install element-plus}

^{配置volar提示}

^{// tsconfig.json
{"compilerOptions": {"types": ["element-plus/global"]},
}}

^{配置按需导入}

^{pnpm install -D unplugin-vue-components unplugin-auto-import}

^{// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],dts: "types/auto-imports.d.ts"}),Components({resolvers: [ElementPlusResolver()],dts: "types/components.d.ts"}),],
})}

^{// tsconfig.json
{"include": ["types/*.d.ts"],
}}

^引用

^{快速上手 | Vue.js (vuejs.org) ↩︎}
^{Commitizen (commitizen-tools.github.io) ↩︎}
^{Home | Stylelint 中文文档 (bootcss.com) ↩︎}
^{安装 - Tailwind CSS 中文文档 ↩︎}
^{快速开始 | Element Plus (gitee.io) ↩ ↩︎}

【Vue】Vue3脚手架相关推荐

前端框架vue04~~vue.cli脚手架的基本使用
文章目录 [1. Vue-CLI脚手架](https://cli.vuejs.org/zh/guide/) [2. 安装](https://cli.vuejs.org/zh/guide/install ...
vue.cli脚手架初次使用图文教程
vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...
vue使用脚手架的单文件组件环境搭建
每一次新下载配置一个新的东西都会出现各种奇奇怪怪的问题,配置好几次,以此记录. 组件把一个页面拆分成一堆组件,每个组件都有自己的html.css 作用:简化项目编程,复用编码,提高运行效率单文件组 ...
在vue新版脚手架中下载和使用jquery
1.在vue新版脚手架中下载jquery npm i jquery --save 2.在vue.config.js文件中加入以下代码: module.exports = {chainWebpack: ...
Vue项目脚手架搭建
Vue项目脚手架搭建 Vue 项目脚手架搭建需要的工具安装NodeJs 安装vue-cli 安装webpack 初始化项目启动项目 Vue 项目脚手架搭建需要的工具 NodeJs vue-cli ...
Vue2.x 核心基础（Vue概述，Vue基本使用，@vue/cli脚手架，Element-UI 的基本使用，Vue模板语法）
1. Vue概述尤雨溪:Vue.js的创建者 2014年2月,Vue.js正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue:渐进式JavaSc ...
springBoot前后端不分离Vue+elementUI脚手架
新建SpringBoot2.4.4项目. 目录结构如下新建html页面 login.js文件接口完整项目在我的资源中SpringBoot前后端不分离vue+element脚手架_springbo ...
vue创建脚手架时常见的报错
我们在创建脚手架结构时,会出现很多的报错:为此我搜集了一些常见的报错: 1. error Mixed spaces and tabs no-mixed-spaces-and-tabs 这个报错代表缩进 ...
2021-10-27 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在
这里写自定义目录标题 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 Vue安装脚手架npm install -g @vue/cli命令失败_因为文件已存在 1 ...
猿创征文｜【Vue五分钟】 Vue Cli脚手架创建一个项目
目录前言一.创建项目的操作步骤选择路由模式选择CSS预编译器选择如何存放配置自动下载项目所需的包文件二.启动vue项目 1.项目目录 2.启动项目 3.浏览器打开项目首页界面三.项目的 ...

【Vue】Vue3脚手架

创建项目¹

^{配置代码质量检测工具}

^{安装Commitizen²}

^安装eslint

^{安装prettier}

^{添加stylelint³}

^{在package.json中添加lint脚本}

^安装husky

^{添加commitlint}

^{安装commitlint}

^{配置commitlint}

^{集成到husky}

^{安装常用工具}

^{安装tailwind}

^{配置tailwind⁴}

^{安装element-plus⁵}

^{配置volar提示}

^{配置按需导入}

^引用

【Vue】Vue3脚手架相关推荐

最新文章

热门文章

【Vue】Vue3脚手架

创建项目1

配置代码质量检测工具

安装Commitizen2

安装eslint

安装prettier

添加stylelint3

在package.json中添加lint脚本

安装husky

添加commitlint

安装commitlint

配置commitlint

集成到husky

安装常用工具

安装tailwind

配置tailwind4

安装element-plus5

配置volar提示

配置按需导入

引用

【Vue】Vue3脚手架相关推荐

最新文章

热门文章

创建项目¹

^{配置代码质量检测工具}

^{安装Commitizen²}

^安装eslint

^{安装prettier}

^{添加stylelint³}

^{在package.json中添加lint脚本}

^安装husky

^{添加commitlint}

^{安装commitlint}

^{配置commitlint}

^{集成到husky}

^{安装常用工具}

^{安装tailwind}

^{配置tailwind⁴}

^{安装element-plus⁵}

^{配置volar提示}

^{配置按需导入}

^引用