创建项目
运行以下命令
npm init vite@latest my-vue-app
复制代码
选择 vue
选择 vue-ts
生成的项目结构如下
项目框架搭建
配置 eslint
安装 eslint:npm install eslint --save-dev
生成 eslintrc.js 文件:npx eslint --init
配置 stylelint
安装依赖:
// package.json:
"devDependencies": {
"sass": "1.49.9",
"stylelint": "^14.5.3",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^25.0.0",
"stylelint-config-html": "^1.0.0",
"stylelint-order": "^5.0.0",
"stylelint-scss": "^4.1.0",
"postcss-html": "^1.3.0",
"postcss-scss": "^4.0.3",
},
复制代码
在项目根目录下新建 .stylelintrc.js
文件
// .stylelintrc.js:
module.exports = {
root: true,
customSyntax: "postcss-html",
extends: [
"stylelint-config-standard",
"stylelint-config-prettier",
"stylelint-config-html",
],
rules: {
"selector-class-pattern": null,
"unicode-bom": "never",
"no-descending-specificity": null,
},
};
复制代码
拓展:
vue3 + vite 项目搭建 - 配置 stylelint (vue scss)
vue项目添加stylelint
vue已有项目,添加stylelint,规范代码