django33全栈班2025年028 Vue3快速入门

前言

通过前面的学习，我们已经学会了使用django33开发前后端不分离的项目。

不过在现代web开发中，主流的还是前后端分离的开发。

所以，我们接下来继续学习vue3这个前端框架，学习如何使用vue3开发前端项目。

安装nodejs

要学习vue3就需要先安装node.js。

下载地址：https://nodejs.cn/download

创建项目

使用下面的命令，我们可以创建一个vue3的项目。

npm init vite

接着进入项目，安装依赖。

cd vue3_dmeo

pnpm i

最后启动服务。

pnpm dev

浏览器访问：http://localhost:5173/

接着可以使用webstorm打开，看一下代码结构。

第一个vue程序

修改：src/main.js

import {createApp} from 'vue'

import App from './App.vue'

const app = createApp(App)

app.mount('#app')

修改：src/App.vue

<div>

  <h1>你好，vue3</h1>

</div>

配置路径别名

给vite配置路径别名是一种非常重要的技巧，有了路径别名以后，我们就可以使用路径别名引入绝对路径了。

这在大型项目进行维护的时候会非常的方便。

配置也非常简单，我们修改vite.config.js

import {defineConfig} from 'vite'

import vue from '@vitejs/plugin-vue'

import {resolve} from 'path';

export default defineConfig({

  plugins: [

      vue(),

  ],

  resolve: {

      alias: {

          "@": resolve(__dirname, 'src'),

      }

  }

})

引入zdpui

zdpui是一个现代化的低代码的前端ui框架，最先在vue3上进行了支持。

zdpui的使用非常简单，我们修改App.vue。

import "@/zdpui/css/init.css"

<h1>你好世界</h1>

全屏容器样式

在进行前端布局之前，我们要把浏览器的界面想象成一张画布，我们在画布上进行绘画之前，需要定义这个画布的大小，宽高等等。

接下来，我们来学习一些zdpui提供的画布样式。

首先，我们来学习全屏容器样式。

import "@/zdpui/css/init.css"

import "@/zdpui/css/container.css"

import "@/zdpui/css/background.css"

<div class="container-full bg bg-blue">

  <h1>你好世界</h1>

</div>

卡片样式

import "@/zdpui/css/init.css"

import "@/zdpui/css/container.css"

import "@/zdpui/css/space.css"

import "@/zdpui/css/background.css"

import "@/zdpui/css/card.css"

<div class="container-full bg bg-gray flex-center">

  <div class="card mt3 card-red">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 card-green">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 card-blue">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 card-yellow">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 card-orange">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 card-pink">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 card-purple">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 card-dark">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 card-light">

    <h1>你好世界</h1>

  </div>

</div>

背景样式

在zdpui中，我们同样提供了丰富的炫酷背景样式，可以供大家选择。

import "@/zdpui/css/init.css"

import "@/zdpui/css/container.css"

import "@/zdpui/css/space.css"

import "@/zdpui/css/background.css"

import "@/zdpui/css/card.css"

<div class="container-full bg bg-gray flex-center">

  <div class="card mt3 bg-red">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 bg-green">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 bg-blue">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 bg-yellow">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 bg-orange">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 bg-pink">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 bg-purple">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 bg-dark">

    <h1>你好世界</h1>

  </div>

  <div class="card mt3 bg-light">

    <h1>你好世界</h1>

  </div>

</div>

渐变背景样式

import "@/zdpui/css/init.css"

import "@/zdpui/css/container.css"

import "@/zdpui/css/space.css"

import "@/zdpui/css/background.css"

import "@/zdpui/css/card.css"

<div class="container-full bg bg-gray flex-center">

  <div class="card mt3 bg-gred">

    <h1>红色渐变背景</h1>

  </div>

  <div class="card mt3 bg-gblue">

    <h1>蓝色渐变背景</h1>

  </div>

  <div class="card mt3 bg-ggreen">

    <h1>绿色渐变背景</h1>

  </div>

  <div class="card mt3 bg-gpurple">

    <h1>紫色渐变背景</h1>

  </div>

  <div class="card mt3 bg-gorange">

    <h1>橙色渐变背景</h1>

  </div>

  <div class="card mt3 bg-gpink">

    <h1>粉色渐变背景</h1>

  </div>

  <div class="card mt3 bg-gcyan">

    <h1>青色渐变背景</h1>

  </div>

  <div class="card mt3 bg-gdark">

    <h1>深色渐变背景</h1>

  </div>

  <div class="card mt3 bg-glight">

    <h1>浅色渐变背景</h1>

  </div>

  <div class="card mt3 bg-ggold">

    <h1>金色渐变背景</h1>

  </div>

  <div class="card mt3 bg-grainbow">

    <h1>彩虹渐变背景</h1>

  </div>

</div>

渐变卡片样式

将bg-gred换成card-gred。

import "@/zdpui/css/init.css"

import "@/zdpui/css/container.css"

import "@/zdpui/css/space.css"

import "@/zdpui/css/background.css"

import "@/zdpui/css/card.css"

<div class="container-full bg bg-gray flex-center">

  <div class="card mt3 card-gred">

    <h1>红色渐变背景</h1>

  </div>

  <div class="card mt3 card-gblue">

    <h1>蓝色渐变背景</h1>

  </div>

  <div class="card mt3 card-ggreen">

    <h1>绿色渐变背景</h1>

  </div>

  <div class="card mt3 card-gpurple">

    <h1>紫色渐变背景</h1>

  </div>

  <div class="card mt3 card-gorange">

    <h1>橙色渐变背景</h1>

  </div>

  <div class="card mt3 card-gpink">

    <h1>粉色渐变背景</h1>

  </div>

  <div class="card mt3 card-gcyan">

    <h1>青色渐变背景</h1>

  </div>

  <div class="card mt3 card-gdark">

    <h1>深色渐变背景</h1>

  </div>

  <div class="card mt3 card-glight">

    <h1>浅色渐变背景</h1>

  </div>

  <div class="card mt3 card-ggold">

    <h1>金色渐变背景</h1>

  </div>

  <div class="card mt3 card-grainbow">

    <h1>彩虹渐变背景</h1>

  </div>

</div>

动画背景样式

将bg-red换成bg-ared就行了，a代表animate动画的意思。

import "@/zdpui/css/init.css"

import "@/zdpui/css/container.css"

import "@/zdpui/css/space.css"

import "@/zdpui/css/background.css"

import "@/zdpui/css/card.css"

<div class="container-full bg bg-gray flex-center">

  <div class="card mt3 bg-ared">

    <h1>红色动画背景</h1>

  </div>

  <div class="card mt3 bg-ablue">

    <h1>蓝色动画背景</h1>

  </div>

  <div class="card mt3 bg-agreen">

    <h1>绿色动画背景</h1>

  </div>

  <div class="card mt3 bg-apurple">

    <h1>紫色动画背景</h1>

  </div>

  <div class="card mt3 bg-aorange">

    <h1>橙色动画背景</h1>

  </div>

  <div class="card mt3 bg-apink">

    <h1>粉色动画背景</h1>

  </div>

  <div class="card mt3 bg-acyan">

    <h1>青色动画背景</h1>

  </div>

  <div class="card mt3 bg-adark">

    <h1>深色动画背景</h1>

  </div>

  <div class="card mt3 bg-alight">

    <h1>浅色动画背景</h1>

  </div>

  <div class="card mt3 bg-agold">

    <h1>金色动画背景</h1>

  </div>

  <div class="card mt3 bg-arainbow">

    <h1>彩虹动画背景</h1>

  </div>

</div>

卡片动画背景样式

将bg-ared换成card-ared就可以了。

按钮样式

渐变按钮样式

将btn-red换成btn-gred就可以了，g表示渐变的意思。

动画按钮样式

将btn-red换成btn-ared就行了，a表示动画的意思。

总结

本节课咱们主要学习了vue环境搭建，容器，卡片，背景，按钮等样式效果。