WebStrom创建Vue3+Element-Plus项目

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

一、安装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文件中，启动项目