Vite Backstage Registro real del proyecto (1)

1. Introducción del proyecto

Este proyecto se basa en el sistema de gestión de fondo de la ciudad del desarrollador de combate real Vue3 + ElementPlus + Vite, incluido el de Vite

Use, la nueva sintaxis de <script setup> de Vue3 , Vuex4, Vue-router4, use ElementPlus

Biblioteca, gestión de múltiples autoridades, realización de múltiples especificaciones de productos, entrega de pedidos, pedido de exportación, módulo de galería, módulo de distribución, intercambio

Carteles y conocimiento en línea del servidor de implementación, etc.

2. Construcción del entorno

Instalación del entorno 2.1 nodejs

Sitio web oficial: https://nodejs.org/zh-cn/

Compruebe si la instalación se ha realizado correctamente y el número de versión: nodo -v

Instalación de espejo Taobao de 2,2 npm

Código de instalación: npm install -g cnpm --registry = https://registry.npm.taobao.org

Compruebe si la instalación se ha realizado correctamente: $ cnpm -v

3. Vite la construcción del proyecto

3.1 sitio web oficial

http://www.vitejs.net/

3.2 Crear proyecto vite-vue

npm init vite@latest my-vue-app -- --template vue

3.3 Iniciar el proyecto

npm ejecutar dev

 Haga clic en la dirección local para ejecutar

 

4. Introducción de la biblioteca de interfaz de usuario de Element Plus

4.1 Sitio web oficial

https://element-plus.gitee.io/zh-CN/

 

4.2 Instalación

npm instalar elemento-plus --save

4.3 Importar archivo ui

principal.js

import { createApp } from 'vue'
import './style.css'
// 引入element依赖文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

4.4 Experiencia de usuario

aplicación.vue

<template>
  <div>
    <el-row class="mb-4">
      <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>
    </el-row>
  </div>
</template>

Cinco, marco windicss 

5.1 Sitio web oficial

https://windicss.org/

 

5.2 Instalación

(1) Haga clic en el menú "Instalar"

 (2) Haga clic en el "icono de invitación"

 (3) Instrucciones de instalación

npm i -D vite-plugin-windicss windicss

(4) Agregar complementos a la configuración de Vite

archivo vite.config.js

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS()
 ],
})

archivo principal.js

import { createApp } from 'vue'
import './style.css'
// 引入element依赖文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
// 引入windi.css
import 'virtual:windi.css'
app.mount('#app')

(5) Experiencia de usuario

<script setup>
</script>
<template>
  <div>
    <button
      class="
        bg-purple-500
        text-red-600
        px-10
        py-5
        rounded-full
        transition-all
        hover:bg-red-800
      "
    >
     点击1
    </button>
    <button class="btn2">点击2</button>
6.vue-router 路由
6.1 官网
https://router.vuejs.org/zh/
  </div>
</template>
<style scoped>
.btn2 {
  /* @apply 引用样式类 */
  @apply bg-purple-500
        text-red-600
        px-10
        py-5
        rounded-full
        transition-all
        hover:bg-red-800;
}
</style>