Fromsko/soft-cloud-update

一款采用Vue3构建的软件库

Deploy Your Own

Deploying From Your Terminal

vercel

前期展示

• 主页面

• 登录页面

• 应用管理页面

• 后台管理页面

• 侧边栏

• 关于页面

演示

启动

bun dev

---

Vue3 管理系统开发

前置要求：

项目采用 bun 而不采用 npm | 兼容所有 node 的配置

Bun 官网

安装依赖

bun i -g @vue-cli

创建项目

# vue 脚手架创建
bun create vue manager-fe
# vite 创建
bun i -g vite@latest

安装插件

# 生产环境
bun i vue-router@next element-plus axios -D
# 开发环境
bun i sass -S

路由搭建

Composition API 跳转

<script setup>
import { useRouter } from 'vue-router'
let router = useRouter()
const goHome = () => {
  router.push('/dashboard')
}
</script>

传统跳转

<template>
  <h1>登陆页面</h1>
  <el-button @click="goHome">回去主页</el-button>
</template>

<script>
export default {
  name: 'dashboard',
  methods: {
    goHome() {
      this.$router.push('/dashboard')
    },
  },
}
</script>

bun 运行多个项目

安装依赖

bun i concurrently --save

配置启动命令

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview",
    "frontend": "vite",
    "backend": "bun run backend/server.js",
    "all": "concurrently \"bun run frontend\" \"bun run backend\""
  }
}