先决条件：
(1)该文件创建的项目开发：基于vue-cli4构建vue项目。
(2)项目源代码的地址(根据对应的教程，标注对应的标签，根据标签下载源代码就可以对应教程中的代码)
https://gitee.com/hard Li/light cloud-web/repository/archive/v 0 . 0 . 1
(3)节点环境：web前端环境配置
1、集成element-ui；
正式文件：
https://element.eleme.cn/#/zh-CN/component/installation
简介：纱线添加元素-ui
使用：在main.js中引入代码
图：
注意：默认vue项目有一个外部边框，可以根据需要移除。
移除方法：在App.vue文件或公共css文件中添加样式代码；
车身{ margin: 0 auto}
2、使用element相关组件
(1)删除原项目；组件文件夹下的HelloWord.vue文件
(2)在组件目录中创建新的索引文件夹，存储索引页的相关组件。
(4)创建导航栏文件MenuBar.vue，使用element-ui中的导航组件代码。
(具体代码参考源文件目录：src/components/index/menubar . vue)
(5)新建一个index.vue文件作为单页应用入口文件，并引入导航栏组件，如下图所示
(6)保存后，启动项目并复制地址以访问浏览器。
3、使用less和postcss
简要说明：
正式文件：https://less.bootcss.com/
(2)它是CSS的扩展，是一种动态样式表语言，CSS预处理器。
(3)对css进行扩展，使样式编写更加灵活，编译更加方便快捷。
安装更少的依赖性：纱线添加更少-更少的加载器-开发
在postss插件中安装自动混音器：纱线添加postss-Loader自动混音器
添加vue.config.js(详细参见源代码)
代码如下：
注意：如果在过程中出现以下错误，可以通过相应的方法解决。如果没有错误，就不能处理。
错误：提示降低PostCSS插件的autoprefixer版本；
可以在package.json文件的依赖项中修改autoprefixer的版本号：8.0.0，
安装在纱线处。
错误：getOptions函数方法由于less的高版本不兼容，需要降级。
将package.json文件中找到的少加载程序版本修改为5.0.0，然后执行yarn来执行安装。
4、配置别名
(1)在1)vue.config.js中添加配置；@已在@vue-cli中默认配置为src目录。
该图如下：
5、改造导航栏（详细代码见源码）
(1)增加logo图标栏，介绍图标图片。
(2)调整导航栏样式
(3)结果图
6、router安装使用
(1)安装：纱线添加vue路由器
(2)使用：
简介(main.js中介绍):从'导入路由器。/router '；
(3)安装
(4)创建路由器文件夹并添加index.js文件。
7、首页轮播图
(1)创建页面/主文件夹；添加home.vue文件
(2)轮播图的核心代码
8、公司简介（详细看源码）
9、办公环境（详细看源码）
10、页脚
(1)索引文件夹已经调整了文件名。
(2)添加页脚组件；Footer.vue文件，具体代码见源代码。
(4)页脚的介绍和使用；在index.vue文件中引入并使用
运行项目预览：纱线服务
