WebStrom创建Vue3+Element-Plus项目

最新推荐文章于 2025-05-13 11:42:35 发布

原创最新推荐文章于 2025-05-13 11:42:35 发布 · 7.8k 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui #webstorm #前端框架

本文介绍如何使用Vue CLI快速搭建Vue3结合Element-Plus的项目环境，包括安装Node.js、Vue CLI及Element-Plus，配置项目并解决常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搭建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文件中，启动项目