vue3+vite+elementPlus+windiCSS开发后台管理系统——项目构建

发布于：2022-11-01 ⋅ 阅读:(979) ⋅ 点赞:(0)

vue3+vite+elementPlus+windiCSS开发后台管理系统——项目构建

创建vite项目并安装vscode插件

先说说vite

在这里插入图片描述

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

搭建一个vite项目

# 使用NPM
npm create vite@latest

# 使用YARN
yarn create vite

#使用PNPM
pnpm create vite


# 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。
# 例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

这里我要创建我自己的后台管理项目

# myapp是项目名称
npm create vite@latest myapp -- --template vue

# 紧接着
cd myapp # 进入项目文件夹
npm i # 安装项目的依赖

安装完成
运行项目

npm run dev

在这里插入图片描述
单击链接
在这里插入图片描述

VS Code插件

我这里直接用来一个集合包

Vue Volar extension Pack

在这里插入图片描述

引入ElementPlus和基本使用

安装

先看看elementPlus的环境支持
在这里插入图片描述

使用包管理器安装

选一种你习惯的就好，小生这里就用npm

# 进入你项目的文件夹，win11的话，可以右键打开终端输入下面的命令
# 当然，在编译器（vscode）中输入也行
npm install element-plus --save

在项目中引入

//main.js
import { createApp } from 'vue'
// 组件库
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')

在组件中测试一下，基本使用

在这里插入图片描述
复制到组件中


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

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </el-row>

有样式，则代表哦成功引入
在这里插入图片描述

引入windicss工具库和配置和代码提示

Windi CSS 是下一代工具优先的 CSS 框架。
在这里插入图片描述

安装

npm i -D vite-plugin-windicss windicss

然后在vite.config.js配置中添加插件

//vite.config.js

import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

最后，在你的 Vite 入口文件中导入 virtual:windi.css：

//main.js
import 'virtual:windi.css'

基础用法

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">
  <img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">Erin Lindford</p>
      <p class="text-gray-500 font-medium">产品经理</p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)">
      消息
    </button>
  </div>
</div>

在这里插入图片描述

windicss小案例和@apply简化代码

在这里插入图片描述
由此可见，这样写确实方便，但是加重了class，这样读代码很不方便 ，于是我们可以简化一下

 <div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">//对这个div新起一个类名 class=“container”
      //其他代码
    </div>

 <div class=“container”>//对这个div新起一个类名 
      //其他代码
  </div>
  
  <style>
	//然后再组件中的style标签中
	.container{
	@apply py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)
}
</style>

样式依然生效
在这里插入图片描述

引入vue-router4

介绍

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

·嵌套路由映射
·动态路由选择
·模块化、基于组件的路由配置
·路由参数、查询、通配符
·展示由 Vue.js 的过渡系统提供的过渡效果
·细致的导航控制
·自动激活 CSS 类的链接
·HTML5 history 模式或 hash 模式
·可定制的滚动行为
·URL 的正确编码

安装

# npm
npm install vue-router@4
# yarn
yarn add vue-router@4

在src文件夹下新建router文件夹
新建一个index.js文件
在这里插入图片描述
在此之前，需要先配置一下vite

当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。

//vite.config.js
import path, { resolve } from "path";
export default defineConfig({
  // 配置绝对路径，指定src文件夹
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "src"),
    },
  },
 });

这样的话，就可以通过使用“~”来代替src文件夹

例如，如果想引入某某组件，就可以这样使用

//router/index.js

  {
    path: "/about",
    name: "name",
    meta: {
      title: "关于我们",
    },
    component: () => import("~/pages/about.vue"),//直接用“~”代替了src
  },

好的，接下来配置我们的路由文件（要先准备好三个测试组件index，about，login）

//router/index.js
import { createRouter, createWebHashHistory } from "vue-router";

// 1. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  {
    path: "/",
    meta: {
      title: "首页",
    },
    component: () => import("~/pages/login.vue"),
  },
  {
    path: "/about",
    name: "about",
    meta: {
      title: "关于我们",
    },
    component: () => import("~/pages/about.vue"),
  },
  {
    path: "/login",
    name: "login",
    meta: {
      title: "登录",
    },
    component: () => import("~/pages/login.vue"),
  },
]

// 2. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 3. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

然后在mian.js中引入router/index.js

//main.js
// 引入路由文件
import router from "./router";

路由配置和404页面捕获

参看vue路由的官网文档

const routes = [
//其他
//如下配置即可
  {
    path: "/:pathMatch(.*)*",
    name: "NotFound",
    meta: {
      title: "可莉不知道哦",
    },
    component: () => import("~/pages/404.vue"),//要自己提前准备好404
  },
]

以上，一个最基础的单页面应用构建完成，本专栏会持续更新，下期制作响应式登录页

在这里插入图片描述
在这里插入图片描述

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布