vulcanjs 简单package 编写
vulcanjs 功能是以包进行管理,包里面包含了运行依赖的组件以及对于路由的注册
参考项目
- 项目结构
├── README.md
├── license.md
├── package-lock.json
├── package.json
├── packages
│ ├── _boilerplate-generator
│ │ ├── README.md
│ │ ├── generator.js
│ │ ├── package.js
│ │ ├── template-web.browser.js
│ │ ├── template-web.cordova.js
│ │ └── template.js
│ ├── _buffer
│ │ ├── buffer.js
│ │ └── package.js
│ └── dalong-demo
│ ├── lib
│ │ ├── client
│ │ │ └── main.js
│ │ ├── modules
│ │ │ ├── components
│ │ │ │ └── user.jsx
│ │ │ ├── index.js
│ │ │ └── routes.js
│ │ └── server
│ │ └── main.js
│ └── package.js
├── sample_settings.json
├── settings.json
└── yarn.lock
- 代码说明
代码从vulcanjs starter 获取,删除了默认的package
对于我们主要编写包的代码,就是在packages 目录下创建功能,然后就是在.meteor/packages 进行包的注册
packages/dalong-demo/package.js
Package.describe({
name: 'dalong-demo',
});
Package.onUse(function (api) {
api.use([
'promise',
// vulcan core
'vulcan:core@1.12.3',
]);
api.mainModule('lib/server/main.js', 'server');
api.mainModule('lib/client/main.js', 'client');
});
packages/dalong-demo/lib/client/main.js
packages/dalong-demo/lib/server/main.js
import '../modules/index.js';
packages/dalong-demo/lib/modules/index.js
import './routes.js';
packages/dalong-demo/lib/modules/routes.js
import { addRoute, Components } from 'meteor/vulcan:core';
import './components/user.jsx';
addRoute({ name: 'user', path: '/', componentName: 'dalonginfo' });
packages/dalong-demo/lib/modules/components/user.jsx
import {registerComponent } from 'meteor/vulcan:core';
import React from 'react';
const Header = props => {
return (
<div>
<p>dalong demo</p>
</div>
)
}
registerComponent('dalonginfo', Header);
注册包
.meteor/packages 文件
# see http://docs.vulcanjs.org/packages
vulcan:core@1.11.2
vulcan:i18n@1.12.3
############ Your Packages ############
dalong-demo
启动
yarn && yarn start
效果
说明
打开调试控制台,可能会有一些错误,当前可以不用管
参考资料
http://docs.vulcanjs.org/routing.html
http://docs.vulcanjs.org/
https://github.com/rongfengliang/vulcanjs-package-demo
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
2013-09-03 EXtJS Ext.data.Model