# vue3-starter

**Repository Path**: kenann/vue3-starter

## Basic Information

- **Project Name**: vue3-starter
- **Description**: 从零搭建vue3后台模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-10
- **Last Updated**: 2022-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 搭建步骤

- yarn create vite
- yarn
- yarn dev
- pnpm add vue-router@4
- pnpm i prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue vue-eslint-parser @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
- pnpm add sass
- pnpm add pinia

## 配置prettier和eslint

- .eslintrc.json

```json
{
  "root": true,
  "env": {
    "es2021": true,
    "node": true,
    "browser": true
  },
  "globals": {
    "node": true
  },
  "extends": [
    //    "plugin:vue/essential",
    /** @see https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#recommended-configs */
    //    "plugin:@typescript-eslint/recommended",
    //    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    /**@see https://github.com/prettier/eslint-plugin-prettier#recommended-configuration */
    "plugin:prettier/recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "ignorePatterns": [
    "types/env.d.ts",
    "node_modules/**",
    "**/dist/**"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/consistent-type-imports": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    "vue/no-v-html": "off",
    //    "space-before-blocks": "warn",
    //    "space-before-function-paren": "error",
    //    "space-in-parens": "warn",
    //    "no-whitespace-before-property": "off",
    /**
     * Having a semicolon helps the optimizer interpret your code correctly.
     * This avoids rare errors in optimized code.
     * @see https://twitter.com/alex_kozack/status/1364210394328408066
     */
    "semi": [
      "error",
      "always"
    ]
    /**
     * This will make the history of changes in the hit a little cleaner
     */
    //    "comma-dangle": ["warn", "always-multiline"],
    /**
     * Just for beauty
     */
    //    "quotes": ["warn", "single"]
  }
}
```
- prettierrc.json

```json
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "vueIndentScriptAndStyle": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "trailingComma": "es5",
  "jsxBracketSameLine": true,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "insertPragma": false,
  "requirePragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "rangeStart": 0
}
```

- .editorconfig

```
root = true

[*]
charset = utf-8
# end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
ij_html_quote_style = double
max_line_length = 120
tab_width = 2
trim_trailing_whitespace = true
```

## 导入文件

- Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：
[Glob导入](https://vitejs.cn/guide/features.html#json)

```javascript
const routes: RouteRecordRaw[] = [];

const modules = import.meta.globEager('./module/*.ts');
for (const path in modules) {
  routes.push(...modules[path].default);
}

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
});
```


## pinia持久化

```javascript
// save
const instance = useCountStore();
instance.$subscribe((_, state) => {
  localStorage.setItem('count-store', JSON.stringify({ ...state }));
});

// get
const old = localStorage.getItem('count-store');
if (old) {
  instance.$state = JSON.parse(old);
}

```

## vite配置@别名
- vite.config.ts
```typescript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import * as path from 'path';

const resolve = (p: string) => {
  return path.resolve(__dirname, p);
};

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve('./src'),
    },
  },
  plugins: [vue()],
});
```

- tsconfig.json

```json
 "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }
```

## 配置tailwindcss + element-plus

- npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
- npx tailwindcss init -p


## 安装element-plus
- pnpm install element-plus
- npm install -D unplugin-vue-components unplugin-auto-import

- vite.config.ts配置

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

export default {
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
```

## iconify配置和使用
- [iconify](https://icon-sets.iconify.design/)

- pnpm add @iconify/iconify
- pnpm add vite-plugin-purge-icons @iconify/json -D

```javascript
import PurgeIcons from 'vite-plugin-purge-icons';
 plugins: [
    vue(),
    PurgeIcons({
      content: ['**/*.html', '**/*.js', '**/*.vue'],
    }),
  ],
```

- main.ts
```typescript
import '@purge-icons/generated';
```


## vite相对于webpack的区别
- webpack -> 普遍的工程,就只要你想打包编译任何东西，自行配置就行。自行配置的,就有点麻烦。通用性更强。
- vite->提供工程化的开发服务器 es module的方式,很快,
- sass
```
scss pnpm add sass

而不需要scss-loader node-sass
```

## 后台模板首页的搭建
- element-plus布局模板
- tailwindcss的原子类 transition-all
- pnpm install @element-plus/icons