+ );
+}
+
+Inula.render(, document.getElementById('root'));
diff --git a/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/vite.config.js b/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/vite.config.js
new file mode 100644
index 00000000..43065ece
--- /dev/null
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/vite/vite.config.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import react from '@vitejs/plugin-react';
+
+let alias = {
+ react: 'openinula', // 新增
+ 'react-dom': 'openinula', // 新增
+ 'react/jsx-dev-runtime': 'openinula/jsx-dev-runtime',
+};
+
+export default {
+ plugins: [react()],
+ resolve: {
+ alias,
+ },
+};
diff --git a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/package.json b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/package.json
new file mode 100644
index 00000000..783f626a
--- /dev/null
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "inula-webpack-app",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "webpack serve --mode development",
+ "build": "webpack --mode production"
+ },
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+ "openinula": "0.0.0-experimental-20231201"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.21.4",
+ "@babel/preset-env": "^7.21.4",
+ "@babel/preset-react": "^7.18.6",
+ "babel-loader": "^9.1.2",
+ "css-loader": "^6.7.3",
+ "file-loader": "^6.2.0",
+ "html-webpack-plugin": "^5.5.0",
+ "style-loader": "^3.3.2",
+ "url-loader": "^4.1.1",
+ "webpack": "^5.77.0",
+ "webpack-cli": "^5.0.1",
+ "webpack-dev-server": "^4.13.2"
+ }
+}
diff --git a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/App.js b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/App.js
new file mode 100644
index 00000000..5a294011
--- /dev/null
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/App.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula from 'openinula';
+import ReactiveComponent from './ReactiveComponent';
+import './styles.css';
+
+class App extends Inula.Component {
+ render() {
+ return (
+
+ );
+ }
+}
+
+export default App;
diff --git a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/ReactiveComponent.js b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/ReactiveComponent.js
new file mode 100644
index 00000000..cca83f05
--- /dev/null
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/ReactiveComponent.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula, { useComputed, useReactive, useRef } from 'openinula';
+
+function ReactiveComponent() {
+ const renderCount = ++useRef(0).current;
+
+ const data = useReactive({ count: 0 });
+ const countText = useComputed(() => {
+ return `计时: ${data.count.get()}`;
+ });
+
+ setInterval(() => {
+ data.count.set(c => c + 1);
+ }, 1000);
+
+ return (
+
+
{countText}
+
组件渲染次数:{renderCount}
+
+ );
+}
+
+export default ReactiveComponent;
diff --git a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.html b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.html
new file mode 100644
index 00000000..c966e725
--- /dev/null
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ Inula App
+
+
+
+
+
+
diff --git a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.js b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.js
new file mode 100644
index 00000000..c384f05a
--- /dev/null
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/index.js
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+import Inula from 'openinula';
+import App from './App';
+
+Inula.render(, document.getElementById('root'));
diff --git a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/styles.css b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/styles.css
new file mode 100644
index 00000000..f08fdb8a
--- /dev/null
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/src/styles.css
@@ -0,0 +1,57 @@
+* {
+ box-sizing: border-box;
+}
+
+body,
+html {
+ margin: 0;
+ padding: 0;
+ font-family: 'Montserrat', sans-serif;
+ line-height: 1.6;
+ color: #fff;
+ background: linear-gradient(120deg, #6a11cb 0%, #2575fc 100%);
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.container {
+ text-align: center;
+}
+
+.hero-title {
+ font-size: 3em;
+ margin-bottom: 20px;
+}
+
+.hero-subtitle {
+ font-size: 1.5em;
+ margin-bottom: 50px;
+}
+
+.content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 1vh;
+}
+
+.card {
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 5px;
+ padding: 20px;
+ width: 100%;
+ box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(4px);
+}
+
+.card h2,
+.card p {
+ color: #fff;
+}
+
+.card a {
+ color: #fff;
+ text-decoration: underline;
+}
diff --git a/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/webpack.config.js b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/webpack.config.js
new file mode 100644
index 00000000..9056a484
--- /dev/null
+++ b/packages/create-inula/lib/generators/Simple-reactive-app/templates/webpack/webpack.config.js
@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ * http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+ entry: './src/index.js',
+ output: {
+ path: path.resolve(__dirname, 'dist'),
+ filename: 'bundle.js',
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: [
+ '@babel/preset-env',
+ [
+ '@babel/preset-react',
+ {
+ runtime: 'automatic', // 新增
+ importSource: 'openinula', // 新增
+ },
+ ],
+ ],
+ },
+ },
+ },
+ {
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader'],
+ },
+ {
+ test: /\.(png|jpe?g|gif)$/i,
+ use: [
+ {
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]',
+ outputPath: 'images/',
+ publicPath: 'images/',
+ },
+ },
+ ],
+ },
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ use: ['file-loader'],
+ },
+ ],
+ },
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: path.resolve(__dirname, 'src/index.html'),
+ filename: 'index.html',
+ }),
+ ],
+ devServer: {
+ static: path.join(__dirname, 'dist'),
+ compress: true,
+ port: 9000,
+ open: true,
+ },
+ resolve: {
+ extensions: ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'],
+ },
+};
diff --git a/packages/create-inula/package.json b/packages/create-inula/package.json
index 27f2bbee..6dabc8c0 100644
--- a/packages/create-inula/package.json
+++ b/packages/create-inula/package.json
@@ -1,6 +1,6 @@
{
"name": "create-inula",
- "version": "0.0.3",
+ "version": "0.0.5",
"description": "",
"main": "index.js",
"bin": {