Vue3 Element Plus WindiCSS 项目开发环境搭建

2023-12-18 13:50:40

一 概述

MVVM 是 Model-View-ViewModel 的简写,它本质上是 MVC 的改进版。MVVM 将其中的 View 的状态和行为抽象化,并且将视图 UI 和业务逻辑分开。
(1)M:即 Model(模型),包括数据和一些基本操作。
(2)V:即 View(视图),指页面渲染结果。
(3)VM:即 View-Model,指模型与视图间的双向操作(无须开发者干涉)。

二 项目实战

2.1 安装 Node.js

根据研发环境类型,安装 Node.js,官网:https://nodejs.org

2.2 安装 Vue 并创建项目

访问 Vue 官网:https://cn.vuejs.org,将默认镜像切换为国内镜像:

npm config get registry
npm config set registry https://registry.npmmirror.com # 切换为国内淘宝镜像
# npm config set registry https://registry.npmjs.org # 切换回国外镜像
# npm config get registry # 查看当前系统源
# npm install -g nrm open@8.4.2 --save # 使用nrm管理源
# nrm ls # 列出当前可用包
# nrm use taobao # 将源切换为淘宝源

创建项目:

npm init vite@latest mapms -- --template vue # 当前工作目录 E:\workspace\web
cd mapms
npm install
npm run dev

2.3 安装 VSCode 插件

  1. Vue Language Features (Volar)
  2. Vue 3 Snippets
  3. Vue 3 Support - All In One

2.4 引入 Element Plus

引入 Element Plus,官网:https://element-plus.org, 安装:

npm install element-plus --save # https://element-plus.org/zh-CN/#/zh-CN

在 main.js 中导入:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

清空 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')

清空 App.vue 文件内的标签内的内容,在 Element Plus 指南找到 button 复制标签 template 代码:

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

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

2.5 安装 WindiCSS

Windi CSS 中文文档:https://cn.windicss.org,安装 Windi CSS:

npm i -D vite-plugin-windicss windicss

在你的 Vite 配置中添加插件:

import WindiCSS from 'vite-plugin-windicss' // 不能忘记

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

main.js 引入:

import 'virtual:windi.css'

在 vscode 安装插件:WindiCSS IntelliSense。

2.6 安装配置 Vue Router

访问:https://router.vuejs.org/zh;执行 npm 安装命令:

npm install vue-router@4 # https://router.vuejs.org/zh/introduction.html

引入 VueRouter,在src目录新建router目录,创建index.js文件,加入以下内容 :

import { createRouter, createWebHashHistory } from 'vue-router';
import Index from '~/pages/index.vue'
import About from '~/pages/about.vue'
import NotFound from '~/pages/404.vue'
import Login from '~/pages/login.vue'

const routers = [{
    path: '/',
    component: Index
},{
    path: '/about',
    component: About
},{
    path: '/login',
    component: Login
},{
    path: '/:pathMatch(.*)*',
    name: "NotFound",
    component: NotFound
}];

const router = createRouter({ history: createWebHashHistory(), routes: routers });

export default router;

注: 以上代码已完成"/“,”/about","/login"和一个404页面的路径。
在main.js中加入:

import router from './router'
app.use(router)

文章来源:https://blog.csdn.net/solaraceboy/article/details/135057745
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。