搭建并上传自定义前端代码
> 概述:
>
> 该章节将带领开发者创建vue项目、配置路由、代码打包、代码上传、创建菜单，实现自定义前端页面嵌入至平台中。
>
> 流程如下：
>
> 1.创建vue项目执行【```vue create XXXdemo```】指令，根据需求选择插件
>
> 2.下载依赖执行【```npm install```】指令
>
> 3.打包vue项目执行【```npm run build```】指令
>
> 4.将dist目录中的代码进行压缩为zip格式
>
> 5.在开发者平台创建/选择一个模块进行代码上传。（已有请点击 -> [打包并上传项目](#打包并上传项目)）
>
> 提示：此方式需node.js、vue/cil为基础。未下载请点击 -> [平台内置前端代码开发]()
>
> 注意：文档将使用 JavaScript(JS) 语法。阅读/编写需一定的JavaScript基础 -> [JavaScript学习导航](https://zh.javascript.info/intro)
## 最终效果图
## 搭建项目
此章节将会提供创建好的vue3项目，以便于开发者进行核心业务的开发。[直接下载](#资源下载)
1.在指定目录下运行命令行 执行 ```vue create XXX```指令根据去需求选择插件或vue版本。
2.随后将会选择各插件的版本以及插件作用根据开发习惯或需求选择. [插件vue各插件含意及作用](https://www.cnblogs.com/kgwei520blog/p/15679957.html)
提示：文档的vue版本及插件选择:= [```vue3```， ```Choose Vue version```， ```Babel```， ```Router```， ```vuex```， ```CSS Pre-processors```， ```Linter / Formatter```]
3.将创建好的vue项目进行整理删除，创建自己的vue代码并引入ElementPlus组件依赖。
3.1. 删除```views```目录中的示例 VUE 文件创建自己的 vue 代码。
3.2. 删除 ```components``` 中的示例组件。
3.3. 删除或修改```router```目录下的 ```index.js``` 路由文件中的路由配置引入自己的```vue```代码，并配置路由。
3.4. 下载```ElementPlus```，在终端执行 ```npm install element-plus --save``` 指令，并在```main.js```中挂载```element-plus```及```index.css```样式
4.将```views```目录下的文件进行编写并运行执行 ```npm run serve``` 指令运行项目，并访问该项目。
## 打包并上传项目
将项目进行打包，并发布到开发者平台中，然后通过代理后的路径访问前端。
1. 在终端中执行 ```npm run build``` 将项目打包。
2. 把打包完成后的```dist```目录下的代码文件，进行压缩为```.zip```格式。
3. 在开发者平台创建/选择一个模块进行代码上传并设置代理路径。
4. 通过代理路径访问项目
> 提示：路由且请使用```History```路由。
> 路由设置为与开发者平台的代理路径。
> 例如：/demo/demoCompanyRepair /demo/ 为开发者平台的代理路径随后拼接自定义路由路径
> 如遇代理后静态资源无法访问请在```vue.config.js```中将添加或修改以下配置：
```js
module.exports={
publicPath:"./"
}
```
> 当项目中没有 ```vue.config.js```文件则自行创建并拷贝上方配置即可解决静态资源无法访问等问题
完成以上配置即可通过代理路径访问项目
## 将自定义项目嵌入平台，通过平台菜单访问项目
> 提示：该方式需要配置菜单且通过```iframe```嵌入至平台。
1. 添加自定义菜单并与项目建立关联。
1.1. 添加一级分类菜单。
1.2. 点击一级菜单右侧添加按钮添加二级```iframe```菜单，将项目的代理路径输入。
2. 从业务平台访问项目。
## 资源下载
[自定义前端源码包](http://iotcloud.work/iotcloud/developer/resource/WEB-code/04.搭建并上传自定义前端代码.zip)