1.1 集成editorconfig配置
http://editorconfig.org
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
1.2 使用prettier工具
Prettier是一款强大的格式化工具
- 安装开发式（-D）依赖prettier
npm install prettier -D
- 配置.prettierrc文件：
-
useTabs：使用tab缩进还是空格缩进，选择false；
-
tabWidth：tab是空格的情况下，是几个空格，选择2个；
-
printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
-
singleQuote：使用单引号还是双引号，选择true，使用单引号；
-
trailingComma：在多行输入的尾逗号是否添加，设置为 none；
-
semi：语句末尾是否要加分号，默认值true，选择false表示不加；
{
“useTabs”: false,
“tabWidth”: 2,
“printWidth”: 80,
“singleQuote”: true,
“trailingComma”: “none”,
“semi”: false
}
- 创建.prettierignore忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
-
VSCode需要安装prettier的插件：
Prettier-Code formatter -
在package.json中配置一个scripts
“prettier”: “prettier --write .”
- 执行脚本：
npm run prettier
1.3 使用ESLint检测
-
VSCode安装ESLint插件：
ESLint -
解决eslint和prettier冲突的问题
npm i eslint-plugin-prettier eslint-config-prettier -D
- 添加prettier插件
extends: [
“plugin:vue/vue3-essential”,
“eslint:recommended”,
“@vue/typescript/recommended”,
“@vue/prettier”,
“@vue/prettier/@typescript-eslint”,
‘plugin:prettier/recommended’
],
二、项目搭建规范-第三方库集成
2.1 vue.config.js配置（修改vue-cli封装好的内部webpack）
const path require(‘path’)
module.exports = {
// 1. 配置方式一：CLI提供的属性
outputDir: ‘./build’,
publicPath: ‘./’, // 打包后文件是相对路径
// 2. 配置方式二：和Webpack属性完全一致，最后会进行合并
configureWebpack: {
resolve: {
alias: {
components: ‘@/components’
}
}
},
// configure是函数形式：直接覆盖原Webpack配置
configureWebpack: (config) => {
config.resolve.alias = {
“@”: path.resolve(__dirname, ‘src’),
components: ‘@/components’
}
},
// 3. 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 配置方式三：chainWebpack链式形式
chainWebpack: (config) => {
config.resolve.alias.set(‘@’, path.resolve(__dirname, ‘src’).set(‘components’, ‘@/components’))
}
}
2.2 vue-router集成
- 安装vue-router最新版本
npm install vue-router@next
defineComponent：定义组件，更好的支持ts
2. 创建router对象
import { createRouter, createWebHashHistory } from ‘vue-router’;
import type { RouteRecordRaw } from ‘vue-router’; // 声明导入的是一个type，可不加
const routes: RouteRecordRaw[] = [
{
path: ‘/’,
redirect: ‘/login’
},
{
path: ‘/login’,
component: () => import(‘@/views/login/index.vue’)
},
{
path: ‘/main’,
component: () => import(‘@/views/main/index.vue’)
}
]
const router = createRouter({
routes,
history: createWebHashHistory()
})
export default router
2.3 element-plus集成
- 全局引用：所有组件全部集成
import ElementPlus from ‘element-plus’;
import ‘element-plus/theme-chalk/index.css’;
app.use(ElementPlus)
- 按需引用
哈哈哈哈
import { ElButton } from ‘element-plus’
import ‘element-plus/theme-chalk/base.css’;
import ‘element-plus/theme-chalk/el-button.css’;
components: {
ElButton
}
npm install babel-plugin-import -D
// babel.config.js
module.exports = {
plugins: [
[
‘import’,
{
libraryName: ‘element-plus’,
// 引入组件
customName: (name) => {
name = name.slice(3)
return element-plus/lib/components/${name}
