vue-cli搭建vue3+ts项目1.创建项目先在cmd中输入出现如图选择Manually select fea

1.创建项目

先在cmd中输入

vue create 项目名字

出现如图

选择Manually select features

2.代码规范

- 集成.editorconfig配置   
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格

# 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

设置这个规范时我们要先在vscode安装一个插件：EditorConfig for VS Code

使用prettier工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。
1. 安装prettier

npm install prettier -D

配置.prettierrc文件：

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

VSCode需要安装prettier的插件

5. 在package.json中配置一个scripts：

"prettier": "prettier --write ."

4. 使用ESLint检测

1.VSCode需要安装ESLint插件：

2.解决eslint和prettier冲突的问题：

npm i eslint-plugin-prettier eslint-config-prettier -D

3.在.eslintrc.js添加prettier插件

  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    'plugin:prettier/recommended'
  ],

5. 提交git代码规范

虽然我们已经要求项目使用eslint了，但是不能保证组员提交代码之前都将eslint中的问题解决掉了：

也就是我们希望保证代码仓库中的代码都是符合eslint规范的；
那么我们需要在组员执行 git commit 命令的时候对其进行校验，如果不符合eslint规范，那么自动通过规范进行修复；

那么如何做到这一点呢？可以通过Husky工具：

husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push

如何使用husky呢？

这里我们可以使用自动配置命令：

//在window电脑中要在cmd中输入，不然不识别&&
npx husky-init && npm install

我们还需要改变一个地方

1.安装Commitizen

npm install commitizen -D

2.安装cz-conventional-changelog，并且初始化cz-conventional-changelog：

npx commitizen init cz-conventional-changelog --save-dev --save-exact

我们也可以在scripts中构建一个命令来执行 cz：

6. vue.config.js配置

const path = require('path')

module.exports = {
  outputDir: './build',
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('views', '@/views')
  }
}

7. element-plus集成

全局引入

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

import router from './router'
import store from './store'

createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

局部引入安装插件

npm install -D unplugin-vue-components unplugin-auto-import

// main.ts文件
import { createApp } from 'vue'
import { globalRegister } from './global'
import 'normalize.css'
import './assets/css/index.less'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(globalRegister)
app.use(router)
app.use(store)
app.mount('#app')

在src文件下创建一下文件

在index.ts下

import { App } from 'vue'
import registerElement from './register-element'

export function globalRegister(app: App): void {
  app.use(registerElement)
}

在register-element.ts文件下

import { App } from 'vue'
import 'element-plus/dist/index.css'
import * as ElIconModules from '@element-plus/icons-vue'

import {
  ElButton
} from 'element-plus'

const components = [
  ElButton
]

export default function (app: App): void {
  for (const component of components) {
    app.component(component.name, component)
  }
  for (const iconName in ElIconModules) {
    if (Reflect.has(ElIconModules, iconName)) {
      const item = ElIconModules[iconName]
      app.component(iconName, item)
    }
  }
}

在tsconfig.json的设置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noImplicitThis": true, 
    "baseUrl": ".",
    "types": ["webpack-env", "element-plus/global"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

vue-cli搭建vue3+ts项目