├── .vscode           // 项目 vscode 插件配置
├── build             // 构建相关
├── library           // 公共依赖/公共组件 可打包独立组件
├── public            // 静态资源 该目录下静态资源应该避免被项目 js 引用
├── src               // 源代码
│   ├── apis          // 接口请求
│   ├── assets        // 图片，字体等静态资源
│   ├── class         // 业务类
│   ├── components    // 业务组件
│   ├── router        // 路由
│   ├── store         // 状态管理
│   ├── utils         // 项目公共方法
│   └── views         // 页面
│   ├── main.js       // 入口 加载组件 初始化
│   ├── App.vue       // 入口页面
├── .env              // 环境变量
├── .eslintrc.cjs     // eslint 配置项
├── .prettierrc.cjs   // prettier 配置项
├── jsconfig.json     // 项目编译器配置选项
├── package.json      // 依赖文件
└── vite.config.js    // 构建脚本
复制代码

{
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true,
        "source.fixAll.eslint": true
    },
    "editor.formatOnType": true
}
复制代码

├── alias.js    // 路径别名配置
├── resolve.js  // 导入配置
├── css.js      // 配置公共 css, px 自动转 vw
├── plugins.js  // 各种插件，自动引入依赖，环境变量注入 html 模板等
└── server.js   // 开发服务配置
复制代码

const alias = {
    '~': pathResolve('../library'),
    '@': pathResolve('../src')
}
复制代码

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"],
            "~/*": ["library/*"]
        },
        "jsx": "preserve"
    },
    "include": ["**/*.js", "**/*.vue"],
    "exclude": ["node_modeules", "dist"]
}
复制代码

// 我们把公司公共可复用的样式都维护到了 library/styles 目录下
preprocessorOptions: {
    scss: {
        additionalData: `@import "library/styles/variables/variables.module.scss";`
    }
}
复制代码

npm i postcss-px-to-viewport -D
复制代码

postcss: {
    plugins: [
        postcsspxtoviewport({
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            landscape: false // 是否处理横屏情况
        })
    ]
}
复制代码

npm i vite-plugin-html -D
复制代码

import { loadEnv } from 'vite'
// mode 变量可在 vite.config.js 暴露的方法中获取
const env = loadEnv(mode, process.cwd())
复制代码

const plugins = (mode) => {
    const env = loadEnv(mode, process.cwd())
    return [
        vue(),
        createHtmlPlugin({
            inject: {
                data: env // 这里可以根据你的项目需要添加更多数据
            }
        })
    ]
}
复制代码

<title><%- VITE_APP_TITLE %></title>
复制代码

npm i unplugin-auto-import -D
复制代码

import AutoImport from 'unplugin-auto-import/vite'
const plugins = (mode) => {
    return [
        vue(),
        AutoImport({
            imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue和vue-router相关函数
            eslintrc: {
                enabled: true, // Default `false`
                filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
                globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
            }
        }),
    ]
}
复制代码

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'plugin:vue/vue3-essential',
        'standard',
        'plugin:prettier/recommended',
        '.eslintrc-auto-import.json' // 添加配置
    ],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    plugins: ['vue'],
    rules: {
        'vue/multi-word-component-names': 'off' 
    }
}
复制代码

npm i unplugin-vue-components -D
复制代码

import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
const plugins = (mode) => {
    return [
        vue(),
        Components({
            resolvers: [VantResolver()],    // 自动加载 vant 组件
            dirs: ['./library/components']  // 自动加载 library/components 目录下的组件
        })
    ]
}
复制代码

const server = {
    host: '0.0.0.0',
    port: 3000,
    open: true,
    proxy: {
        '/proxyApi/': {
            target: 'https://target',
            changeOrigin: true,
            rewrite: (path) => path
        }
    }
}
复制代码

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'plugin:vue/vue3-essential',
        'standard',
        'plugin:prettier/recommended',
        '.eslintrc-auto-import.json'
    ],
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    plugins: ['vue'],
    rules: {
        'vue/multi-word-component-names': 'off' // 关闭名称校验
    }
}
复制代码

module.exports = {
    // 根据自己项目需要
    tabWidth: 4, //缩进长度
    semi: false, //句末使用分号
    singleQuote: true, //使用单引号
    trailingComma: 'none', // 句末逗号
    bracketSameLine: false, // 标签换行
}
复制代码