SpeeDev Admin 环境搭建说明

1. vue 安装

npm create vue@latest

Need to install the following packages:
create-vue@3.10.2
Ok to proceed? (y)

Vue.js - The Progressive JavaScript Framework

√ Project name: ... SpeeDev Admin
√ Package name: ... speedev-admin
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in C:\p2024\speedev\SpeeDev Admin...

Done. Now run:

  cd "SpeeDev Admin"
  npm install
  npm run format
  npm run dev

2. unocss 安装

npm install -D unocss

Install the plugin:

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

Create a uno.config.ts file:

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

Add virtual:uno.css to your main entry:

// main.ts
import 'virtual:uno.css'

If you prefer to install all the icon sets available on Iconify at once (~130MB):

npm install -D @iconify/json

// uno.config.ts
import { defineConfig } from 'unocss'
import presetIcons from '@unocss/preset-icons'

export default defineConfig({
  presets: [
    presetIcons({ /* options */ }),
    // ...other presets
  ],
})

注意

This preset is included in the unocss package, you can also import it from there:

Directives transformer UnoCSS transformer for @apply, @screen and theme() directives: @unocss/transformer-directives.

import { presetIcons } from 'unocss'

npm install -D @unocss/transformer-directives

// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})

3. Element Plus 安装

npm install element-plus --save

自动导入

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

Vite

// vite.config.ts
import { defineConfig } from 'vite'
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()],
    }),
  ],
})