[VUE学习】从头搭建权限管理系统前端-初始化

「爱情、让人受尽委屈。」 2024-04-20 22:09 60阅读 0赞

## 1.安装Node ##

## 2.安装Vue Cli ##

vue的一个脚手架

npm install -g @vue/cli

## 3.**vue ui搭建vue项目** ##

cmd 运行

vue ui

然后创建新项目 选择npm

选择配置

![df87f3ce73b14e6fb6990089a812f252.png][]

Babel 是编译的

Router 是路由

vuex 是状态保存的

Linter/fomatter 代码检测和格式化

![88d97045e30d4226971d239d32c2886f.png][]

创建完成![c1e10bd35c2d44ceb8da888e8f8d0769.png][]

这个时候 代码在我们本地就创建好了 把它导入到webstorm里面 vscode也行都可以

npm run serve 启动项目

![733011d6e48440a8ad4519998a59446d.png][]

## 4.安装依赖 ##

### 1.回到我们vue ui里面 ###

![83cbc29f5def44b5a8b1e54ce9ae569a.png][]

### 2.安装axios依赖 ###

是用来发送请求的一个框架 与后端通信更加方便

### ![f27ab8fc010d4ffd831e4a2562e083e1.png][] 3.安装element-plus ###

组件库![0874d3ff453545e18328c3451c9bab8a.png][]

导入element-plus

这是官网

[快速开始 | Element Plus][_ Element Plus]

![f281573ec72c46aa869a9dcaf8e49472.png][]

然后我们测试一下 ![4d59acf49cb54fb8a1407623157e5767.png][]

![dd7a6bbcc8614fb5bee1e37dfc72ca1b.png][]

![260e9dc636e140f0aec960c4c4a8ebce.png][]

OK 导入成功

## 前端初始化完成 ##

##  ##

[df87f3ce73b14e6fb6990089a812f252.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ca6e4506dbd940b5a606d76c15685122.png
[88d97045e30d4226971d239d32c2886f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f22d3c3b5f854e178467c55ec2460d38.png
[c1e10bd35c2d44ceb8da888e8f8d0769.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/b88b5d7edebe411eb854af12bba89186.png
[733011d6e48440a8ad4519998a59446d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5964d0b0574e473694e525f15d2d1f2b.png
[83cbc29f5def44b5a8b1e54ce9ae569a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/392babd1c059451981845440d4aa6652.png
[f27ab8fc010d4ffd831e4a2562e083e1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/2b3d0e4d913c48ff9f6c0713a3c9ee06.png
[0874d3ff453545e18328c3451c9bab8a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/d0460da071c24aef92b1ee3741d69dcb.png
[_ Element Plus]: https://element-plus.gitee.io/zh-CN/guide/quickstart.html
[f281573ec72c46aa869a9dcaf8e49472.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/d35729686e0d40a09e9830b52a021841.png
[4d59acf49cb54fb8a1407623157e5767.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/02c905c15a55473f83f0ee22c7bc397c.png
[dd7a6bbcc8614fb5bee1e37dfc72ca1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/07beee9971304bd8968f9dd796856f24.png
[260e9dc636e140f0aec960c4c4a8ebce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/1eb69fd627f94b93842b744c0f33d4d7.png