vue3+vite2+typescript+pinia 项目搭建

创建项目

运行以下命令

npm init vite@latest my-vue-app
复制代码

1657336881040.png

选择 vue

1657336923008.png

选择 vue-ts

1657336970434(1).png

生成的项目结构如下

1657337073071.png

项目框架搭建

配置 eslint

安装 eslint:npm install eslint --save-dev

1657337551324.png

生成 eslintrc.js 文件:npx eslint --init

1657337692023.png 1657337743558(1).png 1657344182965.png 配置 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,规范代码

分类:
前端
标签: