基于Strview.js项目脚手架StrviewApp是怎么搭建起来的？

npm i strview-cli -g

strview-cli -v

strview-cli init <projectName>

strview-cli i <projectName>

- webpack.base.js  // 基础配置
- webpack.dev.js  // 开发环境配置
- webpack.pro.js  // 生产环境配置

- favicon.ico  // 网站标识
- index.html  // 模板文件

- assets //存放静态文件
- components // 组件文件夹
- data // 公用状态文件夹
- methods // 方法文件夹
- style // 样式文件夹
- template // 模板文件夹
- App.js // 页面入口
- main.js // 项目入口文件

import { createView } from 'strview';
import data from './data';
import App from './App';
import methods from './methods';
createView({
  el: "#app",
  template: App,
  data
});
// The event is handled after the createview API
methods();

import myParagraph from './components/myParagraph';
import card from './components/card';
import helloTemplate from './template/helloTemplate';
import './style/index.css';
const App = `
${helloTemplate}
<div class="content">
    <button class="color-red">点击</button>
    <p class="txt">{a}，{b}，（a和b都改变）</p>
    <ul class="list">
      <li>{age}</li>
      <li>{name}</li>
      <li>{msg}</li>
    </ul>
    <p class="txt">{a}，（a会改变）</p>
    <p class="txt">{b}，（b会改变）</p>
    <input value="{msg}"></input>
    <p>{obj.a.b}</p>
    <p>{arr}</p>
    <p>{ob.name}</p>
</div>
${myParagraph}
${card}<my-card><span slot="my-card-txt">{b}</span></my-card>
`
export default App

- helloTemplate.css
- helloTemplate.js

.container {
  text-align: center;
  margin-top: 100px;
  line-height: 46px;
}
.container > img {
  margin-bottom: 40px;
}

import logo from '../assets/logo.png';
import './helloTemplate.css';
export default `
<div class="container">
  <img src="${logo}"/>
  <h1>Hello Strview.js</h1>
</div>
`;

- card.js
- myParagraph.js

customElements.define('my-paragraph',
    class extends HTMLElement {
        constructor() {
            super();
            const template = document.getElementById('my-paragraph');
            const templateContent = template.content;
            this.attachShadow({ mode: 'open' }).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
);
const myParagraph = `<template id="my-paragraph">
<style>
    p {
        color: white;
        background-color: #666;
        padding: 5px;
    }
</style>
<p>
    <slot name="my-text">My default text</slot>
</p>
</template>
<my-paragraph>
<span slot="my-text">Let's have some different text!</span>
</my-paragraph>
<my-paragraph>
<ul slot="my-text">
    <li>Let's have some different text!</li>
    <li>In a list!</li>
</ul>
</my-paragraph>`
export default myParagraph

https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

<template id="my-paragraph">
<style>
    p {
        color: white;
        background-color: #666;
        padding: 5px;
    }
</style>
<p>
    <slot name="my-text">My default text</slot>
</p>
</template>

<my-paragraph>
<span slot="my-text">Let's have some different text!</span>
</my-paragraph>
<my-paragraph>
<ul slot="my-text">
    <li>Let's have some different text!</li>
    <li>In a list!</li>
</ul>
</my-paragraph>

customElements.define('my-card',
    class extends HTMLElement {
        constructor() {
            super();
            const template = document.getElementById('my-card');
            const templateContent = template.content;
            this.attachShadow({ mode: 'open' }).appendChild(
                templateContent.cloneNode(true)
            );
        }
    }
);
const card = `<template id="my-card">
<style>
    div {
        color: #333;
        background-color: #f4f4f4;
        padding: 5px;
    }
</style>
<div>
    <slot name="my-card-txt"></slot>
</div>
</template>
`
export default card

- index.js
- ob.js

import ob from './ob';
export default {
    a: "Hello",
    b: 18,
    name: "maomin",
    age: 9,
    msg: 'Strview',
    arr: ['0'],
    obj: {
        a: {
            b: 1
        }
    },
    ob
}

export default {
    name: 'kk'
}

import methods from './methods';
// The event is handled after the createview API
methods();

- index.js
- item.js

import { reactive, ref } from 'strview'
function executes() {
    reactive().obj.a.b = 3;
    ref().name = 'Strview.js';
}
function useItem() {
    ref().b = 100;
}
export {
    executes,
    useItem
}

import { eventListener } from 'strview';
import { executes, useItem } from './item';
const eventList = [
    ['.color-red', 'click', executes],
    ['.list>li:nth-child(2)', 'click', useItem]
]
function methods() {
    for (let index = 0; index < eventList.length; index++) {
        const element = eventList[index];
        eventListener(...element);
    }
}
export default methods

* {
  margin: 0;
  padding: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.content {
  text-align: center;
  margin-top: 50px;
}

yarn install

npm install

yarn start

npm run start

yarn build

npm run build