Web篇_05 搭建Vue项目（Vue3+Element Plus+Vue-cli+Webstorm）

---

VUE3的文档 https://v3.cn.vuejs.org/

使用Vue UI搭建项目

我使用Vue ui搭建项目，原因是简单，易于管理，图形化易操作。

1. 安装node

首先你应该有一个node.js，如果没有可以参考安装和使用：

2. 安装Vue CLI

Vue CLI的文档 https://cli.vuejs.org/zh/

vue-cli是官方发布的vue项目脚手架，可以用来快速创建项目，我们本文所用到的vue ui就是基于vue cli封装的。

安装：

npm install -g @vue/cli
1

3. 创建项目
创建一个项目：

vue ui
1

这个命令输入后，稍等，它会打开Vue项目管理器

在“创建”输入创建项目的目录：

点击在此创建项目，输入项目名，建议初始化git

如果你已经很熟悉使用这个工具了，那你可以通过预设创建项目，提供效率。
第一次用的话，建议手动配置熟悉一下


选择vue3项目，然后点击创建项目

是否保存预设看你自己

创建项目时，命令窗口有日志

创建成功后自动进入到项目仪表盘

之后这个项目还需要引入axios、elementUI plus等我们需要的依赖，注意安装的依赖是安装在当前这个项目中的。


安装好后，我们可以在这个项目的package.json文件查看安装的依赖：

element UI plus也是这样安装的，选择2版本的就好

使用Webstrom创建Vue项目

我这里使用IDE创建的方式与上面的原理一致，一样需要安装vue cli

在这里选择Vue.js，还有vue cli脚手架，这个需要你安装的，上文有介绍

等会就创建好了

由于是使用vuecli3来构建的项目相较于vuecli2来说少了cnfig目录
要是想配置端口转发的话，需要自己在项目根目录创建一个 vue.config.js 的文件在里面做端口转发操作

接下来引入测试ElementPlus，首先你应该确保整合了该框架

在main.js中，引入Element Plus

文档地址

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'


const app = createApp(App)

app.use(store).use(router).use(ElementPlus).mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12

然后启动运行项目：

然后在如下文件中粘贴文档中的一些元素效果

测试：
在terminal中运行命令npm run serve
然后它展示链接，可以使用链接访问