本文将会结合自己搭建经验一步一步展开,记录最新vue前端框架如何搭建。
1、安装vite
全局安装
npm init vite@latest
2、使用vite创建vue3工程
npm init @vitejs/app
第一步:工程文件名
第二步:选择框架
第三步:选择vue-ts组合
第四步:进入项目文件夹,安装依赖即可
3、配置eslint、prettier、编辑器
首先安装相关依赖,如下:
npm i prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
项目根目录新建.eslintrc.json,内容如下:
{
"root": true,
"env": {
"es2021": true,
"node": true,
"browser": true
},
"globals": {
"node": true
},
"extends": [
// "plugin:vue/essential",
/** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
// "plugin:@typescript-eslint/recommended",
// "eslint:recommended",
"plugin:vue/vue3-recommended",
/**@see https://github.com/prettier/eslint-plugin-prettier#recommended-configuration */
"plugin:prettier/recommended"
],
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["@typescript-eslint"],
"ignorePatterns": ["types/env.d.ts", "node_modules/**", "**/dist/**"],
"rules": {
"@typescript-eslint/no-unused-vars": "error",
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/explicit-module-boundary-types": "off",
"vue/singleline-html-element-content-newline": "off",
"vue/multiline-html-element-content-newline": "off",
"vue/no-v-html": "off",
// "space-before-blocks": "warn",
// "space-before-function-paren": "error",
// "space-in-parens": "warn",
// "no-whitespace-before-property": "off",
/**
* Having a semicolon helps the optimizer interpret your code correctly.
* This avoids rare errors in optimized code.
* @see https://twitter.com/alex_kozack/status/1364210394328408066
*/
"semi": ["error", "always"],
/**
* This will make the history of changes in the hit a little cleaner
*/
// "comma-dangle": ["warn", "always-multiline"],
/**
* Just for beauty
*/
"quotes": ["warn", "single"]
}
}
项目根目录新建.prettierrc.json,内容如下:
{
"printWidth": 100,
"tabWidth": 4,
"useTabs": false,
"semi": true,
"vueIndentScriptAndStyle": true,
"singleQuote": true,
"quoteProps": &