使用vite搭建vue3

手把手搭建教程

vite搭建

pnpm create vite

pnpm i element-plus -S

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

pnpm install -D sass

vite.config.ts配置

pnpm install -S unocss

uno.config.ts配置

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
      warn: true
    })
  ],
  transformers: [transformerDirectives(), transformerVariantGroup()]
})

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

pnpm i eslint

npm init @eslint/config@latest

添加.eslintignore忽略文件

export default [
    // ...other config
    {
        ignores: [
         "config/*",
         ".husky",
         ".local",
         "public/*",
         ".vscode",
         "node_modules"
       ]
    }
];

vscode安装ESLint插件

在你的 package.json 文件中添加一个脚本来运行 Eslint ：

{
  "scripts": {
    "lint:eslint": "eslint --cache --max-warnings 0  "{src,mock}/**/*.{vue,ts,tsx}" --fix",
  }
}

配置Prettier

npm install --save-dev prettier 创建一个.prettierrc文件，并添加基本配置：

json{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

如果你使用的是VSCode编辑器，你可以安装Prettier - Code formatter插件，并在VSCode设置中配置保存时自动格式化代码：

json{
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

对于持续集成（CI），你可以在你的package.json中添加一个脚本来运行Prettier：

json{
  "scripts": {
    "format": "prettier --write "src/**/*.{js,vue,ts}""
  }
}

配置代码提交规范 ESLint、Pretttier、Husky、CommitLint

blog.csdn.net/qq_44741577…

VSCode开发 Vue3 建议必备的插件

一、Vue-Official（即Volar）: 提供 Vue 文件的语法高亮。 支持 Vue 文件的智能感知和自动完成。 提供了 Vue 文件的格式化工具。

二、Vue 3 Snippets: 提供 Vue 3 相关的代码片段，方便快速输入常见代码结构。 支持 Vue 组件选项、指令、生命周期等。

三、ESLint: 用于代码风格检查和静态分析。 与 Vue 3 的 ESLint 插件一起使用，确保符合 Vue 3 的规范。

四、Prettier: 代码格式化工具，帮助保持代码风格的一致性。 与 Vue 3 的 Prettier 插件一起使用，确保与 Vue 3 的风格一致。

五、Debugger for Chrome: 与 Chrome 调试器集成，方便调试 Vue 3 应用程序。 支持断点、监视变量等调试功能。

六、Path Intellisense: 路径自动完成插件，方便在 import 语句中快速输入文件路径。 提高开发效率。

七、GitLens: 提供强大的 Git 功能，方便查看和比较代码的历史版本。 支持注释、贡献者信息等。

八、Auto Import: 自动导入插件，可帮助自动完成和自动导入模块。 提高开发效率，减少手动导入的繁琐过程。

九、Vue Peek: 允许从模板中跳转到相关的 Vue 文件。 支持在模板、样式和脚本之间轻松切换。

十、EditorConfig for VS Coder: 支持 EditorConfig 文件，用于在团队中维护一致的编辑器配置。

以上插件是在 Vue 3 开发过程中常用的一些工具，可以根据个人和团队的需求进行调整。安装这些插件可以提高代码质量、开发效率和协作体验。