Vue3 Element Plus WindiCSS 项目开发环境搭建
Vue3 Element Plus WindiCSS 项目开发环境搭建
耕耘实录
发布于 2023-12-18 03:59:33
发布于 2023-12-18 03:59:33
代码可运行
运行总次数：0
代码可运行
一 概述
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 dev2.3 安装 VSCode 插件
- Vue Language Features (Volar)
- Vue 3 Snippets
- 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)本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-12-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
【Vue3】用Element Plus实现列表界面
更多 >
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀
腾讯云开发者
