记录一下，是前段时间整理的配置，不是特殊熟悉项目搭建，基本也就是各种文档抄抄。 vite用起来好快。 后面打包结果说要能直接点开index.html在浏览器运行（给测试使用的一个比较简单的一个页面项目），没弄出来，最后改用vue-cli来做的_(:з」∠)_ 后续慢慢维护整理自己平时项目用的初始化项目配置
# 体验vite + vue3 + ts搭建项目的全过程参考这个的代码规范
初始化
-
npm init @vitejs/app：输入项目名称，然后选了vue -> typescript -
package.json依赖：
"devDependencies": {
"@types/node": "^15.0.2",
"@typescript-eslint/eslint-plugin": "^4.15.1",
"@typescript-eslint/parser": "^4.15.1",
"@vitejs/plugin-vue": "^1.2.2",
"@vue/compiler-sfc": "^3.0.5",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^7.20.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.2.0",
"prettier": "^2.2.1",
"sass": "^1.32.12",
"typescript": "^4.1.3",
"vite": "^2.3.0",
"vue-tsc": "^0.0.24"
}
- .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended',
'@vue/prettier',
'@vue/prettier/@typescript-eslint',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'prettier/prettier': 'error',
},
}
- .prettierrc
{
"eslintIntegration": true,
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"vueIndentScriptAndStyle": true,
"singleQuote": true,
"quoteProps": "as-needed",
"bracketSpacing": true,
"trailingComma": "all",
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"arrowParens": "always",
"insertPragma": false,
"requirePragma": false,
"proseWrap": "never",
"htmlWhitespaceSensitivity": "strict",
"endOfLine": "lf"
}
-
eslintignore, .browserslistrc
-
main.ts中引入css/scss：
import './styles/common.scss' -
vite2配置：待更新
