Element基本使用 (Vue项目打包部署)

一、什么是Element

二、快速入门

1. 创建组件文件,并写好初始代码

2. 粘贴ElementUI的组件代码

在template 里面粘贴(相当于HTML部分):

3. 根组件中引用刚才编写的组件文件的内容

写刚才的组件文件的名字,VSCode可以自动帮忙补全引用:

4. 自动补全后的根组件内容

此时已经在script中导入这个组件,并且vue中已经把这个组件加入进来。这样就可以在根组件中展示刚才创建的组件文件内容了:

5. 运行界面展示

三、常见组件

1. 表格

直接去官网复制粘贴代码:

界面显示:

2. 分页

3. 对话框

4. 表单

四、案例

1. 创建新组件

2. 修改App.vue(使能够跳转)

3. 官网找合适的布局,复制粘贴代码

4. 找好布局代码之后,再找示例代码,粘贴进对应的布局就行

5. 接着做布局内代码

6. 渲染数据

1)先安装axios

在哪个页面使用,就在哪个页面导入:

2. 在对应页面导入

因为数据都是后台传递,所以这里数据模型里面只用定义数据类型就可以:

3. 写异步请求

在这里把获取到的数据传给数据模型中定义的数据类型:

4. 响应数据展示

5. 初始页面展示

赋值给一个数据模型tableData之后,会根据其中的属性名对应的填充表格数据:

 

6. 设置插槽(改变性别和图像的显示 )

7. 结果展示

五、vue路由(页面跳转)

1. Vue Router

2. 配置路由信息 (index.js)

同时给默认初始页面,加一个重定向,使其初始页面不是空:

 3. 增加router-link-to(需要增加链接的地方)

4. 增加router-view(App.vue)

5. 结果展示

六、打包部署

1. VSCode打包前端项目

2. 将打包后的文件部署在Nginx服务器上

1)安装Nginx

我们打包后的文件放在Nginx安装包解压缩之后的html文件夹中:(安装路径不要有中文

2)启动Nginx服务器

3)更改Nginx默认端口号(它默认端口号是80,要修改)

找到nginx.conf文件,点击进去修改:

将默认端口号从80 改为 90:(listen         90

4)再次双击启动nginx.exe

还是没反应(这是正常的),进入任务管理器,查看nginx是否成功运行(若有nginx进程则代表服务器已经启动

3. 查看nginx中部署的前端工程

用修改后的端口90打开:(http://localhost:90

可以正常访问: