Vite Backstage Actual Project Record (1)

1. Project introduction

This project is based on Vue3 + ElementPlus + Vite actual combat developer city background management system, including Vite's

Use, Vue3 brand new <script setup> syntax, Vuex4, Vue-router4, use ElementPlus

Library, multi-authority management, product multi-specification realization, order delivery, export order, gallery module, distribution module, sharing

Posters and deployment server online knowledge, etc.

2. Environment construction

2.1 nodejs environment installation

Official website: https://nodejs.org/zh-cn/

Check whether the installation is successful and the version number: node -v

2.2 npm Taobao mirror installation

Installation code: npm install -g cnpm --registry = https://registry.npm.taobao.org

Check whether the installation is successful: $ cnpm -v

3. Vite project construction

3.1 official website

http://www.vitejs.net/

3.2 Create vite-vue project

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

3.3 Start the project

npm run dev

Click the Local address to run

4. Introduction of Element Plus UI library

4.1 Official website

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

4.2 Installation

npm install element-plus --save

4.3 Import ui file

main.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 User experience

app.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>

Five, windicss framework

5.1 Official website

https://windicss.org/

5.2 Installation

(1) Click the menu "Install"

(2) Click the "vite icon"

(3) Installation instruction

npm i -D vite-plugin-windicss windicss

(4) Add plugins to Vite configuration

vite.config.js file

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()
 ],
})

main.js file

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) User experience

<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>

Vite Backstage Actual Project Record (1)

Guess you like