搭建vue3+element-plus有两种方式:vue-cli和标签引入,本文主要讲解vue-cli方式。

一、安装Node.js

为什么要使用node.js
下载node.js 地址
在这里插入图片描述
安装的时候无脑下一步
node自己配置了环境变量,直接打开cmd查看版本

node -v
npm -v

在这里插入图片描述

二、安装Vue

更改npm的远程仓库地址:
cmd命令如下:

#更改地址为淘宝镜像
npm config set registry https://registry.npm.taobao.org
#查看更改后的地址
npm config get registry

安装脚手架vue/cli

#安装命令
npm install -g  @vue/cli
#查看vue版本(大写V)
vue -V 

三、WebStrom创建helloword项目
(1)创建项目
在这里插入图片描述
(2)等待项目自动初始化完成,点击运行在这里插入图片描述(3)启动完成,点击地址访问在这里插入图片描述
(4)出现下面页面,表示vue创建成功在这里插入图片描述

三、安装Element-Plus

cmd命令如下:

#npm
npm install element-plus --save
#或者yarn
yarn add element-plus
#或者pnpm
pnpm install element-plus

四、把Element-Plus引入到Vue项目中

在这里插入图片描述
打开src目录下的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')

在这里插入图片描述
在这里插入图片描述
在element-plus官网复制Button 按钮源代码 粘贴到HelloWord.vue中
在这里插入图片描述
在这里插入图片描述

再次启动项目,报如下错误,原因是上图复制的代码中script标签中有lang=“ts”
在这里插入图片描述
此时需要安装typescript和ts-loader

npm install typescript --save-dev
npm install ts-loader --save-dev

在项目目录中执行cmd命令

vue add typescript

在这里插入图片描述
再次把button代码复制到helloword文件中,启动项目
在这里插入图片描述

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐