vue与idea实现前后端项目分离与交互①

╰+攻爆jí腚メ 2024-04-06 14:55 98阅读 0赞

#### 基础篇-vue项目搭建 ####

*  1.项目搭建
 *   *  1.1：在新建的文件夹下打开命令界面输入cmd,输入命令打开vue图形化页面
     *  1.2创建一个vue项目框架步骤如下：
 *  2.进入vscode打开当前文件夹
 *   *  2.1目录结构
     *  2.2运行试试
 *  3.可以修改当前端口号
 *  4.安装ElmentUI组件库
 *  5.新建一个vue页面文件
 *   *  5.1在Vpp.vue中引入该页面
     *  5.2到组件官网找对应的样式复制代码

vue：
    概述：Vue是一款前端渐进式框架，可以提高前端开发效率。
    
    特点：
    
     Vue通过MVVM模式,能够实现视图与模型的双向绑定。
    
     简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

## 1.项目搭建 ##

### 1.1：在新建的文件夹下打开命令界面输入cmd,输入命令打开vue图形化页面 ###

![在这里插入图片描述][0ca00c07fe0040b8930447338519812e.png]  
![在这里插入图片描述][6ec3d06385734129ab7b8d1c19efaaf2.png]  
页面如下：  
![在这里插入图片描述][69f9c912acc049d68f2b91c1ca099e2b.png]

### 1.2创建一个vue项目框架步骤如下： ###

![在这里插入图片描述][96543cdd243a43c58f831fda922e5aa8.png]  
![在这里插入图片描述][f61944c64a4149f8a5b264c0d6438463.png]  
![在这里插入图片描述][b53cd6d10a5b46f3a4b00a02680e9f99.png]![在这里插入图片描述][23354d91e9954226bf17cffc02ad5eb7.png]  
![在这里插入图片描述][c52269b688a74f17939f5a5907cf6d16.png]  
![在这里插入图片描述][2ee93948a4684956b36407308a011e09.png]  
耐心等待一会，就创建成功啦！  
![在这里插入图片描述][49b1864c0e6d47448439d7fd497a6b75.png]

## 2.进入vscode打开当前文件夹 ##

### 2.1目录结构 ###

![在这里插入图片描述][8c74c35fb59a4fc0809c852325277ccc.png]  
![在这里插入图片描述][534bca668db74d06b1920e86e6f42653.png]

### 2.2运行试试 ###

![在这里插入图片描述][08399760b3be4cf593c3ddef5e498f82.png]  
== 除了图形化运行 我们也可以在终端写入npm run serve命令运行项目，如下图：==  
![在这里插入图片描述][ce1601349245443a935987a9b9588eb8.png]

## 3.可以修改当前端口号 ##

![在这里插入图片描述][67a03c42647140779c3f6df351e8c723.png]

## 4.安装ElmentUI组件库 ##

![在这里插入图片描述][7e3db6f5317b4f2c94980de38563abbd.png]

**安装组件库：npm install element-ui@2.15.3**  
![在这里插入图片描述][ab84612bcda7449babae78f66610c3ac.png]  
**引入组件**  
![在这里插入图片描述][003ef68c5abb4e71b6282fd8ba54881a.png]

## 5.新建一个vue页面文件 ##

![在这里插入图片描述][129a79a4e65f4f0e9b0ced223ddd9cd9.png]

### 5.1在Vpp.vue中引入该页面 ###

![在这里插入图片描述][9968d6c035c14b6397c52610011642a6.png]

### 5.2到组件官网找对应的样式复制代码 ###

[https://element.eleme.cn/\#/zh-CN/component/quickstart][https_element.eleme.cn_zh-CN_component_quickstart]  
![在这里插入图片描述][f25cbd114f5347cd99d8f7b18654510e.png]  
运行  
![在这里插入图片描述][3a6843ead5b84323aee23204cccacef3.png]

页面展示：  
![在这里插入图片描述][cbdbb5f0a47d404a9b262f68134d6347.png]  
基本的前端页面已经实现！！！

[0ca00c07fe0040b8930447338519812e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3782267ee51c480486d9e875d7bc128f.png
[6ec3d06385734129ab7b8d1c19efaaf2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/173cf8a5a65143b5834b0f92c196c639.png
[69f9c912acc049d68f2b91c1ca099e2b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a041200743bd4edbad726e71b9fa674c.png
[96543cdd243a43c58f831fda922e5aa8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/177a6e7324cc4e90bc8a1d5cf9e0991a.png
[f61944c64a4149f8a5b264c0d6438463.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b0b8448f2eb849e190b59130a1dab4d3.png
[b53cd6d10a5b46f3a4b00a02680e9f99.png]: https://img-blog.csdnimg.cn/b53cd6d10a5b46f3a4b00a02680e9f99.png
[23354d91e9954226bf17cffc02ad5eb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6155f827fbbd4efca6d5503ca6adc46f.png
[c52269b688a74f17939f5a5907cf6d16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1e89bcc23bcd47feba55cb7c7c2d656f.png
[2ee93948a4684956b36407308a011e09.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ff3c981324004a0199ed0a1fbcd1c59a.png
[49b1864c0e6d47448439d7fd497a6b75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2b56662f9e3a4a54b0ca4836a4f17586.png
[8c74c35fb59a4fc0809c852325277ccc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3d0acc18459e43028a8f160274b04d10.png
[534bca668db74d06b1920e86e6f42653.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/68a68638cfc6484194558918de0fbe68.png
[08399760b3be4cf593c3ddef5e498f82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/570f0989fc984708b7af4e15759cddcb.png
[ce1601349245443a935987a9b9588eb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1d7693ebde564a8bbfbcfec66b4239d6.png
[67a03c42647140779c3f6df351e8c723.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/89394199319c41f296c6922ff9fc912e.png
[7e3db6f5317b4f2c94980de38563abbd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3aef78a873fe4ef39b99f625259b2b98.png
[ab84612bcda7449babae78f66610c3ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/f5ece33541ea4026aaa96ac58276921e.png
[003ef68c5abb4e71b6282fd8ba54881a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d7f33e139e4b49fda4d418a852144cbe.png
[129a79a4e65f4f0e9b0ced223ddd9cd9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/aff585459f294d0881bd7dbcad21912c.png
[9968d6c035c14b6397c52610011642a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0b78e8662baa444283f7c541c973031d.png
[https_element.eleme.cn_zh-CN_component_quickstart]: https://element.eleme.cn/#/zh-CN/component/quickstart
[f25cbd114f5347cd99d8f7b18654510e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/ae6fa875c4fd4f6daadb5f9fdef3dde9.png
[3a6843ead5b84323aee23204cccacef3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/5d75f2410c1b42758d53a0fe442cabd4.png
[cbdbb5f0a47d404a9b262f68134d6347.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/d00e1b21c05c4389bb1a1f8897291710.png