VUE3项目初始化

一、eslint & prettier 风格配置

        1. 安装Eslint插件，禁用prettier插件

        2. 配置文件.eslintrc.cjs

rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }

        3. 调整项目目录，修改内容

                1.删除文件，里面初始化的一些文件

                2. 修改内容，

//router
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router


//App.vue
<script setup></script>

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style scoped></style>


//main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.mount('#app')

                3. 新增需要的目录 api  utils

                4. 将项目需要的全局样式 和 图片文件，复制到 assets 文件夹中,  并将全局样式        在                       在main.js中引入          import '@/assets/main.scss'   

                    安装scss依赖    pnpm add sass -D    或      npm install sass -D

        4. 引入element-ui组件库

                1. 官方文档  https://element-plus.org/zh-CN/

                2. 安装    

                        pnpm add element-plus

                        npm install element-plus --save

                3. 自动按需

                        1. 安装插件

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

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

                        2. 然后把下列代码插入到你的 `Vite` 或 `Webpack` 的配置文件中   插入到                                          vite.config.js   对比原来的添加没有的

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

                        3. 直接使用      完成以上操作，官方组件库里的组件可以直接使用，自定义的组件                             也可以直接使用，不用再导入

<template>
  <div>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    ...
  </div>
</template>