开始使用solidjs

开始 solidjs

本文章不介绍 solidjs 和其他开发框架的异同，只讲怎么使用。内容比较简易化。

开始

搭建脚手架

# 安装脚手架
npx degit solidjs/templates/js my-app
# 安装依赖
npm i
# 启动项目
npm run dev
# 打包
npm run build

ui 界面开发

这里用下 xy-ui，它是一套使用原生Web Components规范开发的跨框架UI组件库。
但是社区力量不足，不像 vue有antv、element,react有antd什么的，很多组件都没有，需要自己补充组件。

# 安装
npm i xy-ui

项目中引用

import 'xy-ui';//推荐
//如需单独使用
import 'xy-ui/components/xy-button.js';

export default ()=>{
    return <xy-button onclick="alert(5)">button</xy-button>
};

IE不支持原生customElements，webcomponentsjs可以实现对IE的兼容，不过很多CSS特性仍然无效，所以放弃

写一个类似于 xy-ui 的库 加叫 x-ui

新建文件夹：packages
新建文件夹：packages/x-ui
代码实现参考：https://gitee.com/petter_pan/soidjs-demo

在这里面写我们的 x-ui 组件

改文件：package.json

加以下配置

  "workspaces":[
    "./packages/*"
  ],

执行命令

将 workplace 下的包安装到 node_modules

npm install 
# 或 （如果使用 yarn 来进行依赖管理的话）
# yarn install 

在 src/index.jsx 中引用

import 'x-ui';

在其他 文件中就可以直接使用：

const App = ()=>{
return <x-tag type={"success"}>{11}</x-tag>
}

参考：

https://www.npmjs.com/package/solid-js/v/1.3.9
https://xy-ui.codelabo.cn/docs/#/README
https://gitee.com/petter_pan/soidjs-demo