const app=Vue.createApp(App)
        app.use(router)
        app.mount('#app')
4.vuex
    4.1.安装指令：npm install vuex@latest --save
    4.2.在src下创建目录store文件夹，然后在其下创建index.js文件
    4.3.编写index.js内容
    4.4.修改main.js文件，引入vuex
        import * as Vue from 'vue'
        import App from './App.vue'
        import store from './store/index'

        const app=Vue.createApp(App)
        app.use(store)
        app.mount('#app')
5.elementplus
    5.1.安装指令：npm install element-plus --save
    5.2.修改main.js文件，引入elementplus
        import * as Vue from 'vue'
        import App from './App.vue'
        import ElementPlus from 'element-plus'
        import 'element-plus/theme-chalk/index.css'
        import zhCn from 'element-plus/es/locale/lang/zh-cn'

        const app=Vue.createApp(App)
        app.use(ElementPlus,{locale:zhCn})
        app.mount('#app')
    5.3.Icon图标
        a.安装指令：npm install @element-plus/icons-vue
        b.注册图标，在main.js文件中
            import * as ElementPlusIconsVue from '@element-plus/icons-vue'
            const app = createApp(App)
            for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
                app.component(key, component)
            }
6.axios
    6.1.安装指令：npm install axios
    6.2.配置跨域请求事项，修改vite.config.js文件
        import {defineConfig} from 'vite'
        import vue from '@vitejs/plugin-vue'
        import path from 'path'   // 需安装此模块
        import cfgSetting from './src/configs/settings'
        export default defineConfig({
            plugins: [
                vue()
            ],
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, 'src')
                }
            },
            server: {
                host: cfgSetting.spaAddress,
                port: cfgSetting.spaPort,
                strictPort: false,              //设为true时端口被占用则直接退出，不会尝试下一个可用端口
                cors: true,                     //为开发服务器配置CORS, 默认启用并允许任何源
                open: true,                     //服务启动时自动在浏览器中打开应用
                hmr: false,                     //禁用或配置 HMR 连接
                //传递给 chockidar 的文件系统监视器选项
                watch: {
                    ignored:["!**/node_modules/your-package-name/**"]
                },
                proxy: {
                    [cfgSetting.apiType]: {
                            target: cfgSetting.svcAddress,   //实际请求地址
                            changeOrigin: true,
                            ws: true,
                            rewrite: (path) => path.replace(cfgSetting.apiType, '')
                    }
                },
                https: cfgSetting.svcIsHttps
            }
        })
7.i18n
    7.1.安装指令：npm install vue-i18n
    7.2.在src目录下创建locales目录，并添加index.js，zh_cn.js，en_us.js三个文件
    7.3.编辑index.js文件
            import { createI18n } from 'vue-i18n' //引入vue-i18n组件
            import zh_cn from './zh_cn'  //中文语言包
            import en_us from './en_us'  //英文语言包
            // 实例化I18n
            const i18n = createI18n({
                legacy: false,
                globalInjection: true,
                locale: "zh_cn", // 初始化配置语言
                messages: {
                    zh_cn,
                    en_us
                }
            })
            export default i18n
    7.4.编辑zh_cn.js文件
            export default {
                message: {
                    Home: '首页',
                    About: '关于'
                }
            }
    7.5.编辑en_us.js文件
            export default {
                message: {
                    Home: 'Home',
                    About: 'About'
                }
            }
    7.6.修改main.js文件，引入vue-i18n
            import * as Vue from 'vue'
            import App from './App.vue'
            import i18n from './locales/index'

            const app=Vue.createApp(App)
            app.use(i18n)
            app.mount('#app')
    7.7.测试效果，修改App.vue文件
            <template>
                <img alt="Vue logo" src="@/assets/logo.png" />
                <a href="javascript:void(0)" @click="change('zh_cn')">中文</a> --
                <a href="javascript:void(0)" @click="change('en_us')">English</a>
                <div>{{$t("message.Home")}}---{{$t("message.About")}}</div>
                <router-view />
            </template>
            <script>
                import { useI18n } from 'vue-i18n'
                export default ({
                    name: "App",
                    setup() {
                        const { locale } = useI18n()
                        function change(type) {
                            locale.value = type;
                        }
                        return {
                            change
                        }
                    }
                })
            </script>
8.mock
    8.1.安装指令
        a.安装mockjs：npm install mockjs --save-dev
        b.安装vite-plugin-mock：npm i vite-plugin-mock cross-env -D
    8.2.在 package.json 中设置环境变量
        将"dev": "vite"改为“"dev": "cross-env NODE_ENV=development vite"”
    8.3.在 vite.config.js 中添加 mockjs 插件
        import { defineConfig } from "vite"
        import vue from "@vitejs/plugin-vue"
        import { viteMockServe } from "vite-plugin-mock"

        export default defineConfig({
            plugins: [
                vue(),
                viteMockServe({
                    supportTs: false     //如果使用typescript开发，则需要配置supportTs为true
                })
            ]
        })
    8.4.在根目录创建 mock 文件夹，建立getData.js在其中创建需要的数据接口
        export default [
            {
                url: "/api/getUsers",
                method: "get",
                response: () => {
                    return {
                        code: 0,
                        message: "ok",
                        data: ["张三", "李四"],
                    }
                }
            }
        ]
9.sass
    9.1.安装指令：npm i sass -D
    9.2.使用sass，语法：<style lang="scss"></style>
10.gzip
    10.1.安装指令：npm i vite-plugin-compression -D
    10.2.修改vite.config.js文件，引入插件
        import { defineConfig } from 'vite'
        import vue from '@vitejs/plugin-vue'
        import viteCompression from 'vite-plugin-compression'
        import path from 'path'
        export default defineConfig({
            plugins: [
                vue(),
                viteCompression({
                    threshold: 10240,      //体积大于10kb压缩
                    filter: /\.(js|mjs|json|css|html)$/i,
                    algorithm: 'gzip',          //压缩算法，gzip|brotliCompress|deflate|deflateRaw
                    disable: false,
                    deleteOriginFile: false   //是否删除源文件
                })
            ],
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, 'src')
                }
            }
        })
11.copy
    11.1.安装指令：npm install rollup-plugin-copy -D
    11.2.修改vite.config.js文件，引入插件
        import { defineConfig } from 'vite'
        import vue from '@vitejs/plugin-vue'
        import copy from 'rollup-plugin-copy'
        import path from 'path'
        export default defineConfig({
            plugins: [
                vue(),
                copy({
                    targets: [
                        { src: 'src/static', dest: 'dist' }, //执行拷贝
                    ],
                    hook: 'writeBundle' // notice here
                })
            ],
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, 'src')
                }
            }
        })
12.eslint+prettier
    12.1.eslint
        12.1.1.安装指令：npm i eslint -D
        12.1.2.配置eslint：执行npx eslint --init命令，然后按照提示完成一系列操作来创建配置文件
        12.1.3.修改.eslintrc.cjs文件，编写配置信息
        12.1.4.在VSCode使用ESlint，需要安装插件：ESLint
        12.1.5.使用eslint格式化代码
                a.在package.json的scripts属性里配置 格式化 命令
                    "scripts": {
                        "lint": "eslint --fix --ext .js,.vue src"
                    }
                b.终端执行命令
                    npm run lint
    12.2.prettier
        12.2.1.安装指令：npm i prettier -D
        12.2.2.配置prettier
                {
                    "useTabs": false, //使用tab缩进，默认false
                    "tabWidth": 2, //tab缩进大小,默认为2空格数
                    "printWidth": 100, //换行长度，默认80
                    "singleQuote": true, //使用单引号代替双引号
                    "trailingComma": "none", //是否在多行逗号分隔语法中，在最后一个元素后面加逗号
                    "bracketSpacing": true, //在对象，数组括号与文字之间加空格 "{ foo: bar }"
                    "semi": false, //每行末尾自动添加分号
                    "endOfLine": "auto" //换行符类型
                }
        12.2.3.VSCode编辑器，安装Prettier插件：Prettier - Code formatter
        12.2.4.使用其命令格式化代码文件
                #格式化所有文件（. 表示所有文件）
                npx prettier --write .
    12.3.兼容问题
        12.3.1.解决eslint和prettier冲突
                a.安装插件：npm i eslint-plugin-prettier eslint-config-prettier -D
                b.修改.eslintrc.js配置文件，添加prettier插件
                        module.exports = {
                            extends: [
                                'plugin:vue/essential',
                                'airbnb-base',
                                'plugin:prettier/recommended' // 添加 prettier 插件
                            ],
                        }
13.postcss
    13.1.安装指令：npm install postcss postcss-preset-env -D
    13.2.配置vite.config.js文件
            import { defineConfig } from 'vite'
            import vue from '@vitejs/plugin-vue'
            import postcssPresetEnv from 'postcss-preset-env'

            export default defineConfig({
                base: './',
                publicDir: 'public', // 静态资源服务的文件夹
                logLevel: 'info', // 控制台输出的级别 info 、warn、error、silent
                clearScreen: true, // 设为false 可以避免 vite 清屏而错过在终端中打印某些关键信息
                css: {
                    postcss: {
                        plugins: [postcssPresetEnv]
                    }
                }
            })
14.svgIcon
    14.1.创建目录和文件结构
            目录：./src/styles
            目录：./src/styles/svg
            目录：./src/styles/svg/svgs
            文件：./src/styles/svg/index.vue
            文件：./src/styles/svg/svgBuilder.js
    14.2.安装svg插件
            指令：npm install svg-sprite-loader -D
    14.3.编写./src/styles/svg/index.vue文件
    14.4.编写./src/styles/svg/svgBuilder.js文件，需要安装fs模块：npm install fs
    14.5.编辑main.js文件，引入./src/styles/svg/index.vue文件
            import * as Vue from 'vue'
            import SvgIcon from './icons/index.vue'
            import App from './App.vue'

            const app = Vue.createApp(App)
            app.component('svg-icon', SvgIcon)
            app.mount('#app')
    14.6.配置vite.config.js文件，使svgBuilder.js文件功能启用
            import { defineConfig } from 'vite'
            import vue from '@vitejs/plugin-vue'
            import { svgBuilder } from './src/styles/svg/svgBuilder'

            export default defineConfig({
                base: './',
                plugins: [
                    vue(),
                    svgBuilder('./src/styles/svg/svgs/') // 这里已经将src/styles/svg/svgs/下的svg全部导入
                ]
            })
    14.7.使用效果
            <svg-icon icon-class="login-user" />
            或
            <svg-icon :icon-class="passwordType === 'password' ? 'password-eye' : 'password-eye-open'" />
15.nprogress
    15.1.安装指令：npm install nprogress -S
    15.2.在/src/utils文件夹下，创建nprogress.js文件，编写内容。
16.js-cookie
    16.1.安装指令：npm install js-cookie
    16.2.使用方式：
        import Cookies from "js-cookie"
        // 写入cookie
        Cookies.set('name', 'value') // 创建简单的cookie
        Cookies.set('key', 'value', { expires: 10 }) // 通常会以当前时间+多少毫秒，如const newDate=new Date(new Date().getTime() + 20 * 60 * 1000)
        Cookies.set('key', 'value', { path: '', domain: '' }) //可以通过配置path等
        Cookies.set('key', 'value', { expires: 10, path: '', domain: '' })
        // 读取
        Cookies.get('name')
        // 删除某项cookie值
        Cookies.remove('name') // 删除普通的cookie
        Cookies.remove('name', { path: '' }) // 删除存了指定页面path的cookie

17.echarts
    17.1.安装指令：npm install echarts vue-echarts
    17.2.使用方式：用 npm 与 Vue Loader 基于 ES Module 引入（按需引用）
        import ECharts from 'vue-echarts'
        //手动引入 ECharts 各模块来减小打包体积
        import 'echarts/lib/chart/bar'
        import 'echarts/lib/component/tooltip'
        // 注册组件后即可使用
        import Vue from 'vue'
        Vue.component('v-chart', ECharts)
        或
        export default {
            components: {
                'v-chart': ECharts
            }
        }