搭建并上传自定义前端代码

概述:

该章节将带领开发者创建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学习导航 (opens new window)

# 最终效果图

此章节将会提供创建好的vue3项目，以便于开发者进行核心业务的开发。直接下载

1.在指定目录下运行命令行执行 vue create XXX指令根据去需求选择插件或vue版本。

2.随后将会选择各插件的版本以及插件作用根据开发习惯或需求选择. 插件vue各插件含意及作用 (opens new window)

提示：文档的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 指令运行项目，并访问该项目。

将项目进行打包，并发布到开发者平台中，然后通过代理后的路径访问前端。

提示：路由且请使用History路由。路由设置为与开发者平台的代理路径。例如：/demo/demoCompanyRepair /demo/ 为开发者平台的代理路径随后拼接自定义路由路径

如遇代理后静态资源无法访问请在vue.config.js中将添加或修改以下配置：

  module.exports={
    publicPath:"./"
}

1
2
3

当项目中没有 vue.config.js文件则自行创建并拷贝上方配置即可解决静态资源无法访问等问题

完成以上配置即可通过代理路径访问项目

提示：该方式需要配置菜单且通过iframe嵌入至平台。