先决条件：
(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
导入：纱线添加元素-用户界面
使用：将代码引入main.js
如图所示：
注意：默认vue项目有一个外部边框，可以根据需要移除
移除方法：在App.vue文件或公共css文件中添加样式代码；
车身{ margin: 0 auto}
2、使用element相关组件
(1)删除原项目；组件文件夹下的HelloWord.vue文件
(2)在组件目录下创建一个新的索引文件夹，以存储索引页面的相关组件
(4)创建菜单栏导航栏文件，使用元素界面中的导航组件代码
(具体代码请参考源文件目录：src/components/index/menubar . vue)
(5)新建一个index.vue文件作为单页应用入口文件，并引入导航栏组件，如下图所示
(6)保存后，启动项目并复制地址以访问浏览器
3、使用less和postcss
简要说明：
正式文件：https://less.bootcss.com/
(2)它是CSS的扩展，是一种动态样式表语言，CSS预处理器
(3)扩展了css，使样式编写更加灵活，编译更加方便快捷
安装更少的依赖性：纱线添加更少-更少的加载器-开发
安装autoprefixer:在postss插件中添加postss-loader autoprefixer。
添加配置vue.config.js(有关详细信息，请参见源代码)
代码如下：
img src="http://p5.toutiaoimg.com/large/pgc-image/673d4d8e339d41c18f1a3a929edca6bd" />注意：若过程中出现以下错误，可通过对应方式解决，没有错误可不处理
错误①：提示要降低PostCSS插件 autoprefixer 版本；
可通过修改package.json文件中dependencies中的autoprefixer版本号：8.0.0，
在执行yarn进行安装
错误②：由于less版本过高，导致getOptions函数方法不兼容，需降级处理
通过修改package.json文件中找到less-loader版本修改为5.0.0 ，再执行yarn执行安装即可
4、配置别名
（1）vue.config.js中增加配置； 在@vue-cli中，@已经被默认配置为src目录
图如下：
5、改造导航栏（详细代码见源码）
（1）增加logo图标列，引入图标图片
（2）调整导航栏样式
（3）结果图
6、router安装使用
（1）安装：yarn add vue-router
（2）使用：
①引入（main.js中引入）：import router from './router'；
（3）挂载（main.js中）
（4）创建router文件夹，新增index.js文件
7、首页轮播图
（1）创建page/home文件夹；新增home.vue文件
（2）轮播图核心代码
8、公司简介（详细看源码）
9、办公环境（详细看源码）
10、页脚
（1）index文件夹已经调整过文件名
（2）新增页脚组件；Footer.vue文件，具体代码看源码
（4）页脚引入与使用； 在index.vue文件中引入并使用
运行项目预览：yarn serve
