WebStrom创建Vue3+Element-Plus项目
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
搭建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 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)