VitePress

Appearance

Metter Admin 环境搭建说明 ​

1. Vue 3 相关安装 ​

主要安装以下 package

  • vue
  • vue-router
  • pinia
  • typescript
  • vite

安装 vue 及相关 package ​

bash
> npm init vue@latest

注意

在安装界面，请按下图所示，对额外 package 进行选择安装

vite

进入开发模式 ​

bash
> cd metter-admin
> npm install
> npm run dev

启动成功，显示访问地址 ​

vite

通过浏览器访问 ​

通过 chrome 浏览器访问 http://localhost:5173/, 显示如下界面表示安装成功

vite

目录结构如下 ​

vite

package.json 内容如下 ​

json
{
  "name": "metter-admin",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
  },
  "dependencies": {
    "pinia": "^2.0.36",
    "vue": "^3.3.2",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@tsconfig/node18": "^2.0.1",
    "@types/node": "^18.16.8",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/tsconfig": "^0.4.0",
    "npm-run-all": "^4.1.5",
    "typescript": "~5.0.4",
    "vite": "^4.3.5",
    "vue-tsc": "^1.6.4"
  }
}

2. UnoCSS 及相关 preset 安装 ​

安装 UnoCss ​

bash
> npm install -D unocss

安装默认 Preset ​

TIP

默认 Preset 等同于 @unocss/preset-wind 继承于 @unocss/preset-wind 和 @unocss/preset-mini.

bash
> npm install -D @unocss/preset-uno
  • vite.config.ts 内容如下
ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import UnoCSS from 'unocss/vite'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    UnoCSS()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
  • uno.config.ts 内容如下
ts
// uno.config.ts
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'

export default defineConfig({
  presets: [
    presetUno(),
  ],
})
  • main.ts 添加内容如下
ts
// main.ts
import 'virtual:uno.css'

在 VSC 里安装 UnoCSS 插件 ​

在 Visual Studio Code 的插件市场搜索 UnoCSS 并安装

vite

验证是否安装成功 ​

  • 修改 components/HelloWorld.vue，加入 !text-red
vue
    <h1 class="green !text-red">{{ msg }}</h1>

修改后的代码如下图所示（注意添加样式底部出现的下划线，表示插件安装成功）

vite

浏览器页面内容会实时更新，字体变为红色，表示 UnoCSS 安装成功

vite

安装 Icons Preset ​

TIP

推荐阅读 《聊聊纯 CSS 图标》

bash
npm i -D @unocss/preset-icons @iconify/json
  • uno.config.ts 修改如下
ts
// uno.config.ts
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetIcons from '@unocss/preset-icons'

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons({ /* options */ }),
  ],
})
  • HelloWorld.vue 代码修改如下
vue
<template>
  <div class="greetings">
    <h1 class="green !text-red">{{ msg }}</h1>
    <div class="flex m-10">      
      <div class="i-ph-anchor-simple-thin" />      
      <div class="i-mdi-alarm text-orange-400" />      
      <div class="i-logos-vue text-3xl" />      
      <button class="i-carbon-sun dark:i-carbon-moon" />      
      <div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />
    </div>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
    </h3>
  </div>
</template>
  • 页面出现下图所示图标，即表示安装成功

vite

安装 reset.css ​

bash
npm install @unocss/reset
  • 修改 main.ts，加入以下代码
ts
import '@unocss/reset/tailwind.css'

支持指令转换 ​

bash
npm install -D @unocss/transformer-directives
  • uno.config.ts 修改如下
ts
// uno.config.ts
import { defineConfig } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
  // ...
  transformers: [
    transformerDirectives(),
  ],
})
  • @apply
css
.custom-div {
  @apply text-center my-0 font-medium;
}

将被转换为:

css
.custom-div {
  margin-top: 0rem;
  margin-bottom: 0rem;
  text-align: center;
  font-weight: 500;
}

3. 安装 Element Plus ​

bash
> npm install element-plus --save

为实现按需自动导入，需要安装下面两款插件

bash
> npm install -D unplugin-vue-components unplugin-auto-import
  • vite.config.ts 需做如下修改
ts
// 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()],
    }),
  ],
})
  • HelloWorld.vue 代码修改如下
vue
<template>
  <div class="greetings">
    <h1 class="green !text-red">{{ msg }}</h1>
    <div class="flex m-10">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <div class="flex m-10">
      <!-- A basic anchor icon from Phosphor icons -->
      <div class="i-ph-anchor-simple-thin" />
      <!-- An orange alarm from Material Design Icons -->
      <div class="i-mdi-alarm text-orange-400" />
      <!-- A large Vue logo -->
      <div class="i-logos-vue text-3xl" />
      <!-- Sun in light mode, Moon in dark mode, from Carbon -->
      <button class="i-carbon-sun dark:i-carbon-moon" />
      <!-- Twemoji of laugh, turns to tear on hovering -->
      <div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />
    </div>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
    </h3>
  </div>
</template>
  • 页面出现下图所示按钮组，即表示安装成功

vite