newx
TypeScript icon, indicating that this package has built-in type declarations

0.2.2 • Public • Published

Newx.js

About

Reuse code as modules or components in static web pages and building readable codes.

Built with

Also refer to Poi.

Getting Started

Before we get started, ensure that you have installed Yarn (or npm) on your machine.

$ yarn add -D newx

Then create the files:

src/layout/base.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <block name="body"></block>
  </div>
</body>
</html>

src/components/info.html

<div class="info">
  <span>Newx.js</span>
</div>

src/pages/index.html

<extends src="../layouts/base.html">
  <block name="body">
    <import from="info.html"></import>
    <p>Welcome~~</p>
  </block>
</extends>

And just run the command to start a development server:

$ newx dev
√ Wrote index.html
✨ The development server runs on http://localhost:8080.

Visit the site and you will get:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div class="info">
      <span>Newx.js</span>
    </div>
    <p>Welcome~~</p>
  </div>
</body>
</html>

Newx can also make static pages load vue components on demand.

Usage

Coming soon...

License

Distributed under the MIT License. See LICENSE for more information.

Readme

Keywords

none

Package Sidebar

Install

npm i newx

Weekly Downloads

0

Version

0.2.2

License

MIT

Unpacked Size

52.9 kB

Total Files

15

Last publish

Collaborators

  • asuka109