# family-admin

**Repository Path**: sufeiweb/family-admin

## Basic Information

- **Project Name**: family-admin
- **Description**: 开放给同事参考，代码学习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-31
- **Last Updated**: 2025-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目搭建

```text
1. pnpm create vite family-admin

2. pnpm install element-plus
按需加载 `element-plus`
pnpm install -D unplugin-vue-components unplugin-auto-import
修改 `vite.config.ts`
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
   // ...
   plugins: [
      // ...
      AutoImport({
         resolvers: [ElementPlusResolver()],
      }),
      Components({
         resolvers: [ElementPlusResolver()],
      }),
   ],
})

3. eslint + prettier
pnpm install -D eslint
npx eslint --init

        ? How would you like to use ESLint? ... To check syntax onlyTo check syntax and find problems
> To check syntax, find problems, and enforce code style
---------------------------------------------------------------- 选择强制代码风格
√ How would you like to use ESLint? · style
        ? What type of modules does your project use? ...
> JavaScript modules (import/export)CommonJS (require/exports)None of these
---------------------------------------------------------------- 选择ESM规范
√ How would you like to use ESLint? · style 
√ What type of modules does your project use? · esm
        ? Which framework does your project use? ... React
> Vue.jsNone of these
---------------------------------------------------------------- 选择VUE框架
√ How would you like to use ESLint? · style 
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
        ? Does your project use TypeScript? » No / Yes
---------------------------------------------------------------- 使用TS yes
√ How would you like to use ESLint? · style 
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
        ? Where does your code run? ...(Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
---------------------------------------------------------------- 空格增选Node 回车
√ How would you like to use ESLint? · style 
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
        ? How would you like to define a style for your project? ... Use a popular style guide
> Answer questions about your style
---------------------------------------------------------------- 用过A&Q来配置规则
√ How would you like to define a style for your project? · prompt
        ? What format do you want your config file to be in? ...
> JavaScriptYAMLJSON
---------------------------------------------------------------- 配置文件使用js文件
这里直接回车，因为这些格式化配置最后都要删掉，采用prettier规定格式
----------------------------------------------------------------
√ What style of indentation do you use? · tab
√ What quotes do you use for strings? · double
√ What line endings do you use? · unix
√ Do you require semicolons? · No / Yes
The config that you‘ve selected requires the following dependencies:
        eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
        ? Would you like to install them now? » No / Yes
---------------------------------------------------------------- 选择yes现在立即初始化配置文件
√ Would you like to install them now? · No / Yes
        ? Which package manager do you want to use? ...
> npmyarnpnpm
---------------------------------------------------------------- 包管理器选择npm

安装vite-plugin-eslint（eslint结合vite使用）
// 说明: 该包是用于配置vite运行的时候自动检测eslint规范 不符合页面会报错
pnpm install -D vite-plugin-eslint

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';

// https://vitejs.dev/config/
export default defineConfig({
   plugins: [
      vue(),
      eslintPlugin({
         include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
      }),
   ],
   resolve: {
      // 配置路径别名
      alias: {
         '@': '/src',
      },
   },
});

pnpm install -D prettier
pnpm install -D eslint-config-prettier #eslint兼容的插件
pnpm install -D eslint-plugin-prettier #eslint的prettier
        
** .eslintrc.cjs
extends: [
   'eslint-config-prettier',
   'eslint:recommended', // 使用推荐的eslint
   'plugin:@typescript-eslint/recommended',
   'plugin:vue/vue3-recommended', // 使用插件支持vue3
   'plugin:vue/vue3-essential',
   //1.继承.prettierrc.js文件规则2.开启rules的 "prettier/prettier": "error"3.eslint fix的同时执行prettier格式化
   'plugin:prettier/recommended',
], 
parser: 'vue-eslint-parser',

4. pnpm install lodash-es # lodash

5. pnpm install vue-router # 路由
pnpm install nprogress # 路由动画


6. pnpm install pinia # 状态管理
pnpm install pinia-plugin-persistedstate # 数据持久化

7. pnpm install axios # 数据通信

7. pnpm install vue-i18n # 国家化数据

```
# 运行项目
```text
tips: node > 16

< 16? 

npm i -g n

n lts 

npm i -g pnpm 

pnpm install

pnpm run dev --host --debug
```