页面可视化搭建框架的页面模板 -- 基于 vue

# 初始化项目(安装依赖包)
npm i

npm start

• 生成后台渲染所需代码

$ npm run server

打包结果在server目录中。

• 验证后台渲染可用

后台渲染对代码写法是有一些要求的, 比如不允许使用 window/document 这种浏览器特有对象. 所以可以本地执行后台渲染来验证后台渲染是否正常.

$ npm run render

• 生成模板压缩包

$ npm run server
$ npm run template

打包结果为pipeline-template.zip, 提交模板时, 提交该 zip 文件.

拉取一个独立分支或一份独立源码, 然后

$ npm run build

打包结果在dist目录中。

路径 server/node.js

用于在 node 后台渲染出带 DOM 元素的 index.html.

$ node server/node.js release

嵌入了模板生成页面的调试脚本

$ node server/node.js preview

• 基础样式的引入方式
• 模板打包为压缩包脚本
• schema 和 data 的验证工具: schema-tool
• 组件开发套件
• 组件抽离为 npm 包

因为页面基本配置base-config.json, 是在获取 webpack 构建参数时候引入给 html-webpack-plugin 的, 属于 webpack-dev-tool 的一部分, 所以文件变化时, webpack-dev-tool 并不会重新引入该文件.

好在: 需要调试页面基本配置的场景比较少.