前后端分离之Vue

发表于 2023-03-28 更新于 2024-04-12 阅读次数：本文字数： 271 阅读时长 ≈ 1 分钟

使用Vue进行前端框架搭建

环境配置

1	vue creat (vuename)

具体选项如下

然后可以将服务运行起来看一下是否成功，cd到(vuename)文件夹，使用命令

1	npm run serve

给创建好的页面添加一些元素

浏览器界面长这样

这里推荐使用npm安装

1	npm i element-ui -S

此时可以在package.json文件里看到有element-ui的依赖

在Home.vue文件的div块中添加一个button来测试element-ui是否可用

1	<el-button>{{ msg }}</el-button>

如图，标签出现

接下来参考element官网的内容对页面布局进行自定义的配置，在对页面细节进行修改后得到一个页面的雏形，如下图所示

以下是我的相关配置文件
global.css

App.vue

Home.vue（主要修改处已用红色框标出）

具体网页美化请参照Element组件官网并结合自己审美进行修改。