第一步，下载安装 Node.js

打开 http://nodejs.cn/网站，下载「长期支持版」，咱就看中文版的吧，一样的

拿到一个 pkg 文件后，咔咔就一顿装就好了

我用的是 Mac，所以我打开「终端」

等安装好后，在终端分别输入 node -v和 npm -v命令，用来验证是否安装成功。

第二步，安装 Yarn

npm install -g yarn

因为 yarn 比 npm 快，用 yarn 来安装、删除东西也方便

yarn add / remove 模块名

终端输入 yarn命令，用来验证是否安装成功

第三步，安装 Vue CLI 脚手架

npm install -g @vue/cli
或
yarn global add @vue/cli

终端输入 vue -V命令，用来验证是否安装成功

第四步，安装 Element UI 库

vue add element-plus
或
npm install --save element-plus

第五步，编辑 main.js 文件

import { createApp } from 'vue'
import App from './App.vue'
//import router from './router'
//import store from './store'
import element from 'element-plus';
import 'element-plus/theme-chalk/index.css'
//import installElementPlus from './plugins/element'const app = createApp(App)
// app.use(store)
// app.use(router)
app.use(element).mount('#app')

第六步，搞一搞

在 HelloWorld.vue 文件里，我加了几个 button

<template><div class="hello"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row></div>
</template>

启动项目后，访问 http://localhost:8080/ 就可以看到如下页面了

要是也帮到你，点个赞，关注一下再走咯～

终于被我搞掂了 Vue3 + Element 的正确打开方式（直接拿来就用）相关推荐

vue3 element plus el-input 无法输入问题
最近用vue3 element plus 进行开发,发现el-input 无法输入,代码如下: <template><el-card><template #header& ...
使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件引言初始Vue项目的创建 Element-Plus组件的安装及导入其他文件配置 .eslintrc.js文件 vue.config.js ...
Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标 Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不 ...
Vue3.0路由跳转方式
Vue3.0路由跳转方式 1.编程式路由导航第一步创建route文件夹以及index.js 上代码 import { createRouter, createWebHistory } from 'v ...
vue3 + element plus + vite 迁移实践
背景最近入职了一家新公司,需要搭建一个后台管理系统,我想着这太简单啦,react antd pro一把梭.然后领导喜欢vue,说vue简单,写起来快-我说行嘛,刚好没写过vue3,那就全用最新技术, ...
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件＜el-table＞跨页后已前勾选的行自动消失问题）详细示例解决教程
前言在 Vue3 项目中,使用 Element Plus 组件库的表格组件时,出现了跨页勾选复选框消失的问题. 本文实现了 vue3 中 element plus 表格组件 <el-table ...
vue3+Element Plus+Thinkphp6的开源免费的后台快速开发框架
分享一款完全开源免费的内容管理快速开发框架VueCMF.采用前后端分离模式搭建,2.0+版本前端使用vue3.Element Plus和TypeScript构建,支持PC.平板及手机等终端显示:后端A ...
vue3 + element plus实现侧边栏
一般前端项目少不了侧边栏.如图所示这些鬼东西特别繁琐,所以我们喜欢找些现成.开源的所谓后台管理的前端框架,开箱即用.方便是方便,而且做得还挺好,问题是,有学习成本,要按照它的规则行事.一些功能是怎么 ...
【新知实验室-TRTC开发】实时音视频之web端云监工系统（Vue3+Element plus+TS+Pinia）
在线上线下一体化.虚拟现实加速融合的趋势下,音视频已经演进成一种基本能力,深刻变革了社会的交互方式.未来,音视频作为全真互联时代的重要基石,将持续推动互联网和实体产业的数字化创新与升级. 今天我们将体 ...

终于被我搞掂了 Vue3 + Element 的正确打开方式（直接拿来就用）

第一步，下载安装 Node.js

第二步，安装 Yarn

第三步，安装 Vue CLI 脚手架

第四步，安装 Element UI 库

第五步，编辑 main.js 文件

第六步，搞一搞

要是也帮到你，点个赞，关注一下再走咯～

终于被我搞掂了 Vue3 + Element 的正确打开方式（直接拿来就用）相关推荐

最新文章

热门文章

终于被我搞掂了 Vue3 + Element 的正确打开方式（直接拿来就用）

第一步，下载安装 Node.js

第二步，安装 Yarn

第三步，安装 Vue CLI 脚手架

第四步，安装 Element UI 库

第五步，编辑 main.js 文件

第六步，搞一搞

要是也帮到你，点个赞，关注一下再走咯～ insertAdIfNeeded();

终于被我搞掂了 Vue3 + Element 的正确打开方式（直接拿来就用）相关推荐

最新文章

热门文章

要是也帮到你，点个赞，关注一下再走咯～