create-blocklet 0.2.3 → 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -6
- package/common/.prettierrc +1 -0
- package/common/_gitignore +1 -0
- package/index.js +29 -1
- package/package.json +4 -4
- package/{common → template-dapp/react}/public/index.html +0 -0
- package/template-dapp/vue/.env +1 -0
- package/template-dapp/vue/README.md +147 -0
- package/template-dapp/vue/blocklet.md +3 -0
- package/template-dapp/vue/blocklet.yml +62 -0
- package/template-dapp/vue/index.html +18 -0
- package/template-dapp/vue/package.json +43 -0
- package/template-dapp/vue/server/hooks/pre-start.js +33 -0
- package/template-dapp/vue/server/index.js +55 -0
- package/template-dapp/vue/server/libs/auth.js +31 -0
- package/template-dapp/vue/server/libs/env.js +12 -0
- package/template-dapp/vue/server/libs/logger.js +3 -0
- package/template-dapp/vue/server/middlewares/user.js +10 -0
- package/template-dapp/vue/server/routes/index.js +6 -0
- package/template-dapp/vue/src/App.vue +35 -0
- package/template-dapp/vue/src/assets/logo.png +0 -0
- package/template-dapp/vue/src/components/HelloWorld.vue +38 -0
- package/template-dapp/vue/src/libs/api.js +14 -0
- package/template-dapp/vue/src/main.js +4 -0
- package/template-dapp/vue/vite.config.js +26 -0
- package/template-dapp/vue2/.env +1 -0
- package/template-dapp/vue2/README.md +147 -0
- package/template-dapp/vue2/babel.config.js +3 -0
- package/template-dapp/vue2/blocklet.md +3 -0
- package/template-dapp/vue2/blocklet.yml +60 -0
- package/template-dapp/vue2/package.json +68 -0
- package/template-dapp/vue2/public/index.html +24 -0
- package/template-dapp/vue2/server/hooks/pre-start.js +33 -0
- package/template-dapp/vue2/server/index.js +55 -0
- package/template-dapp/vue2/server/libs/auth.js +31 -0
- package/template-dapp/vue2/server/libs/env.js +12 -0
- package/template-dapp/vue2/server/libs/logger.js +3 -0
- package/template-dapp/vue2/server/middlewares/user.js +10 -0
- package/template-dapp/vue2/server/routes/index.js +6 -0
- package/template-dapp/vue2/src/App.vue +22 -0
- package/template-dapp/vue2/src/assets/logo.png +0 -0
- package/template-dapp/vue2/src/components/HelloWorld.vue +74 -0
- package/template-dapp/vue2/src/libs/api.js +14 -0
- package/template-dapp/vue2/src/main.js +10 -0
- package/template-dapp/vue2/src/pages/About.vue +13 -0
- package/template-dapp/vue2/src/pages/Home.vue +37 -0
- package/template-dapp/vue2/src/router.js +24 -0
- package/template-dapp/vue2/vue.config.js +11 -0
- package/template-static/react/public/index.html +37 -0
- package/template-static/vue/.env +1 -0
- package/template-static/vue/README.md +147 -0
- package/template-static/vue/blocklet.md +3 -0
- package/template-static/vue/blocklet.yml +50 -0
- package/template-static/vue/index.html +18 -0
- package/template-static/vue/package.json +23 -0
- package/template-static/vue/src/App.vue +21 -0
- package/template-static/vue/src/assets/logo.png +0 -0
- package/template-static/vue/src/components/HelloWorld.vue +38 -0
- package/template-static/vue/src/main.js +4 -0
- package/template-static/vue/vite.config.js +23 -0
- package/template-static/vue2/.env +1 -0
- package/template-static/vue2/README.md +147 -0
- package/template-static/vue2/babel.config.js +3 -0
- package/template-static/vue2/blocklet.md +3 -0
- package/template-static/vue2/blocklet.yml +50 -0
- package/template-static/vue2/package.json +48 -0
- package/template-static/vue2/public/index.html +24 -0
- package/template-static/vue2/src/App.vue +22 -0
- package/template-static/vue2/src/assets/logo.png +0 -0
- package/template-static/vue2/src/components/HelloWorld.vue +74 -0
- package/template-static/vue2/src/main.js +10 -0
- package/template-static/vue2/src/pages/About.vue +13 -0
- package/template-static/vue2/src/pages/Home.vue +20 -0
- package/template-static/vue2/src/router.js +24 -0
- package/template-static/vue2/vue.config.js +6 -0
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<img alt="Vue logo" src="../assets/logo.png" />
|
|
4
|
+
<div>
|
|
5
|
+
<router-link to="/about">About page</router-link>
|
|
6
|
+
</div>
|
|
7
|
+
<HelloWorld msg="Welcome to Your Vue.js App" />
|
|
8
|
+
<div :style="{ display: 'flex', justifyContent: 'center' }">
|
|
9
|
+
<pre :style="{ textAlign: 'left' }">
|
|
10
|
+
<code>{{ JSON.stringify(envData, null, 2) }}</code>
|
|
11
|
+
</pre>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
import HelloWorld from '../components/HelloWorld.vue';
|
|
18
|
+
import api from '../libs/api';
|
|
19
|
+
|
|
20
|
+
export default {
|
|
21
|
+
components: {
|
|
22
|
+
HelloWorld,
|
|
23
|
+
},
|
|
24
|
+
data() {
|
|
25
|
+
return {
|
|
26
|
+
envData: {},
|
|
27
|
+
};
|
|
28
|
+
},
|
|
29
|
+
mounted() {
|
|
30
|
+
api.get('/api/env').then(({ data }) => {
|
|
31
|
+
this.envData = data;
|
|
32
|
+
});
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<style></style>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import Vue from 'vue';
|
|
2
|
+
import VueRouter from 'vue-router';
|
|
3
|
+
|
|
4
|
+
import Home from './pages/Home';
|
|
5
|
+
import About from './pages/About';
|
|
6
|
+
|
|
7
|
+
Vue.use(VueRouter);
|
|
8
|
+
const basename = window?.blocklet?.prefix || '/';
|
|
9
|
+
|
|
10
|
+
export default new VueRouter({
|
|
11
|
+
base: basename,
|
|
12
|
+
routes: [
|
|
13
|
+
{
|
|
14
|
+
path: '/',
|
|
15
|
+
name: 'home',
|
|
16
|
+
component: Home,
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
path: '/about',
|
|
20
|
+
name: 'about',
|
|
21
|
+
component: About,
|
|
22
|
+
},
|
|
23
|
+
],
|
|
24
|
+
});
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
|
|
6
|
+
<link rel="alternate icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
7
|
+
<link rel="mask-icon" href="%PUBLIC_URL%/favicon.svg" color="#4F6AF5" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|
9
|
+
<meta name="theme-color" content="#4F6AF5" />
|
|
10
|
+
<meta name="description" content="Web site created using create-blocklet" />
|
|
11
|
+
<script src="__meta__.js"></script>
|
|
12
|
+
<!--
|
|
13
|
+
Notice the use of %PUBLIC_URL% in the tags above.
|
|
14
|
+
It will be replaced with the URL of the `public` folder during the build.
|
|
15
|
+
Only files inside the `public` folder can be referenced from the HTML.
|
|
16
|
+
|
|
17
|
+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
18
|
+
work correctly both with client-side routing and a non-root public URL.
|
|
19
|
+
Learn how to configure a non-root public URL by running `npm run build`.
|
|
20
|
+
-->
|
|
21
|
+
<title>%REACT_APP_TITLE%</title>
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
25
|
+
<div id="root"></div>
|
|
26
|
+
<!--
|
|
27
|
+
This HTML file is a template.
|
|
28
|
+
If you open it directly in the browser, you will see an empty page.
|
|
29
|
+
|
|
30
|
+
You can add webfonts, meta tags, or analytics to this file.
|
|
31
|
+
The build step will place the bundled scripts into the <body> tag.
|
|
32
|
+
|
|
33
|
+
To begin the development, run `npm start` or `yarn start`.
|
|
34
|
+
To create a production bundle, use `npm run build` or `yarn build`.
|
|
35
|
+
-->
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
APP_TITLE=''
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# Getting Started with Create Blocklet
|
|
2
|
+
|
|
3
|
+
This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
|
|
4
|
+
|
|
5
|
+
This blocklet is a static project, which means this is a frontend application. It's contained `client` code.
|
|
6
|
+
|
|
7
|
+
## File Structure
|
|
8
|
+
|
|
9
|
+
- public/ - static files
|
|
10
|
+
- favicon.ico - favicon
|
|
11
|
+
- favicon.svg - favicon
|
|
12
|
+
- index.html - main html file, template for vite vue
|
|
13
|
+
- screenshots/ - Screenshots
|
|
14
|
+
- src/ - Client side code (A standard vue app structure)
|
|
15
|
+
- .env - Environment variables
|
|
16
|
+
- .env.local - Local environment variables
|
|
17
|
+
- .eslintrc.js - ESLint configuration
|
|
18
|
+
- .gitignore - Git ignore file
|
|
19
|
+
- .prettierrc - Prettier configuration
|
|
20
|
+
- blocklet.md - Blocklet README
|
|
21
|
+
- blocklet.yml - Blocklet configuration
|
|
22
|
+
- LICENSE - License file
|
|
23
|
+
- logo.png - Blocklet logo file
|
|
24
|
+
- Makefile - Makefile
|
|
25
|
+
- package.json - Npm package file
|
|
26
|
+
- README.md - A guide for this blocklet
|
|
27
|
+
- version - Version file
|
|
28
|
+
|
|
29
|
+
## Development
|
|
30
|
+
|
|
31
|
+
1. Make sure you have [@abtnode/cli](https://www.npmjs.com/package/@abtnode/cli) installed
|
|
32
|
+
|
|
33
|
+
Blocklet needs abtnode as a dependency. So you need to install it first.
|
|
34
|
+
`npm install -g @abtnode/cli`
|
|
35
|
+
See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution)
|
|
36
|
+
|
|
37
|
+
2. Init abtnode & start abtnode
|
|
38
|
+
|
|
39
|
+
Before starting an abtnode, you need to init abtnode.
|
|
40
|
+
`abtnode init --mode=debug`
|
|
41
|
+
`abtnode start`
|
|
42
|
+
See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node)
|
|
43
|
+
|
|
44
|
+
3. Go to the project directory `cd [name]`
|
|
45
|
+
4. Install dependencies: `npm install` or `yarn`
|
|
46
|
+
5. Start development server: `blocklet dev`
|
|
47
|
+
|
|
48
|
+
## Bundle
|
|
49
|
+
|
|
50
|
+
After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
|
|
51
|
+
|
|
52
|
+
## Deploy
|
|
53
|
+
|
|
54
|
+
- If you want to deploy this blocklet to local abtnode, you can use `blocklet deploy .blocklet/bundle` command(Make sure the blocklet is bundled before deployment.)
|
|
55
|
+
> Or you can simply use `npm run deploy` command.
|
|
56
|
+
- If you want to deploy this blocklet to remote abtnode, you can use the command below.
|
|
57
|
+
|
|
58
|
+
```shell
|
|
59
|
+
blocklet deploy .blocklet/bundle --endpoint {your abtnode url} --access-key {abtnode access key} --access-secret {abtnode access secret}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
> Make sure the blocklet is bundled before deployment.
|
|
63
|
+
|
|
64
|
+
## Upload to blocklet registry
|
|
65
|
+
|
|
66
|
+
- If you want to upload the blocklet to any registry for other users to download and use, you can following the following instructions.
|
|
67
|
+
|
|
68
|
+
Bump version at first.
|
|
69
|
+
|
|
70
|
+
```shell
|
|
71
|
+
make bump-version
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Then config blocklet registry url.
|
|
75
|
+
You can use those registry url in below.
|
|
76
|
+
|
|
77
|
+
1. [https://registry.arcblock.io/](https://registry.arcblock.io/)
|
|
78
|
+
2. [https://dev.registry.arcblock.io/](https://dev.registry.arcblock.io/)
|
|
79
|
+
3. A blocklet registry started by yourself.
|
|
80
|
+
> Make sure you have installed a `blocklet registry` on your own abtnode. Check it on here: [https://registry.arcblock.io/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://registry.arcblock.io/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
|
|
81
|
+
|
|
82
|
+
```shell
|
|
83
|
+
blocklet config set registry {registry url}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Get a `accessToken` from blocklet registry.
|
|
87
|
+
|
|
88
|
+
> Why we need a `accessToken`?
|
|
89
|
+
> A `accessToken` is genrate by blocklet registry, which help us upload our blocklet to any registry.
|
|
90
|
+
|
|
91
|
+
Set `accessToken` to blocklet config
|
|
92
|
+
|
|
93
|
+
```shell
|
|
94
|
+
blocklet config set accessToken {accessToken}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Upload a new version to a registry.
|
|
98
|
+
|
|
99
|
+
> Make sure the blocklet is bundled before upload.
|
|
100
|
+
|
|
101
|
+
```shell
|
|
102
|
+
blocklet upload
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Or you can simply use `npm run upload` command.
|
|
106
|
+
|
|
107
|
+
- You also can upload a new version to blocklet registry by Github CI.
|
|
108
|
+
Bump version at first.
|
|
109
|
+
|
|
110
|
+
```shell
|
|
111
|
+
make bump-version
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Push your code to Github main/master branch, or make a pull request to the main/master branch.
|
|
115
|
+
The CI workflow will automatically upload a new version to a registry.
|
|
116
|
+
|
|
117
|
+
## Q & A
|
|
118
|
+
|
|
119
|
+
1. Q: How to change a blocklet's name?
|
|
120
|
+
|
|
121
|
+
A: Change the `name` field in the `package.json` file, change the `name` field in the `blocklet.yml` file.
|
|
122
|
+
|
|
123
|
+
You can also change the `title` field and `description` field in the `blocklet.yml` file.
|
|
124
|
+
|
|
125
|
+
Run `blocklet meta` command, you will get a `did` config, copy the `did` value.
|
|
126
|
+
|
|
127
|
+
Replace this command `"bundle": "vite build --base /.blocklet/proxy/<%= did %>",` in `package.json`
|
|
128
|
+
|
|
129
|
+
Replace `did` field in the `blocklet.yml`
|
|
130
|
+
|
|
131
|
+
2. Q: How to change a blocklet's logo?
|
|
132
|
+
|
|
133
|
+
Change the `logo.png` file root folder.
|
|
134
|
+
|
|
135
|
+
Or you can change the `logo` field in the `blocklet.yml` file.
|
|
136
|
+
|
|
137
|
+
> Make sure you have added the logo path to the `blocklet.yml` file `files` field.
|
|
138
|
+
|
|
139
|
+
## Learn More
|
|
140
|
+
|
|
141
|
+
- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
|
|
142
|
+
- Full document of AbtNode & blocklet development: [https://docs.arcblock.io/abtnode/en/introduction](https://docs.arcblock.io/abtnode/en/introduction)
|
|
143
|
+
|
|
144
|
+
## License
|
|
145
|
+
|
|
146
|
+
The code is licensed under the Apache 2.0 license found in the
|
|
147
|
+
[LICENSE](LICENSE) file.
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
name: template-vue
|
|
2
|
+
title: Blocklet Template Vue
|
|
3
|
+
description: ABT Node blocklet project
|
|
4
|
+
keywords:
|
|
5
|
+
- blocklet
|
|
6
|
+
- vue
|
|
7
|
+
group: static
|
|
8
|
+
did: ''
|
|
9
|
+
main: dist
|
|
10
|
+
author:
|
|
11
|
+
name: zhanghan
|
|
12
|
+
email: zhanghan@arcblock.io
|
|
13
|
+
repository:
|
|
14
|
+
type: git
|
|
15
|
+
url: 'git+https://github.com/blocklet/create-blocklet.git'
|
|
16
|
+
specVersion: 1.1.1
|
|
17
|
+
version: 0.1.0
|
|
18
|
+
logo: logo.png
|
|
19
|
+
files:
|
|
20
|
+
- logo.png
|
|
21
|
+
- README.md
|
|
22
|
+
- blocklet.md
|
|
23
|
+
- screenshots
|
|
24
|
+
interfaces:
|
|
25
|
+
- type: web
|
|
26
|
+
name: publicUrl
|
|
27
|
+
path: /
|
|
28
|
+
prefix: '*'
|
|
29
|
+
port: BLOCKLET_PORT
|
|
30
|
+
protocol: http
|
|
31
|
+
community: ''
|
|
32
|
+
documentation: ''
|
|
33
|
+
homepage: ''
|
|
34
|
+
license: ''
|
|
35
|
+
charging:
|
|
36
|
+
price: 0
|
|
37
|
+
tokens: []
|
|
38
|
+
shares: []
|
|
39
|
+
timeout:
|
|
40
|
+
start: 60
|
|
41
|
+
requirements:
|
|
42
|
+
abtnode: '>=1.4.0'
|
|
43
|
+
os: '*'
|
|
44
|
+
cpu: '*'
|
|
45
|
+
scripts:
|
|
46
|
+
dev: npm run start
|
|
47
|
+
environments: []
|
|
48
|
+
capabilities: {}
|
|
49
|
+
screenshots: []
|
|
50
|
+
children: []
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="<%- base %>favicon.svg" />
|
|
6
|
+
<link rel="alternate icon" href="<%- base %>favicon.ico" />
|
|
7
|
+
<link rel="mask-icon" href="<%- base %>favicon.svg" color="#4F6AF5" />
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
|
9
|
+
<meta name="theme-color" content="#4F6AF5" />
|
|
10
|
+
<meta name="description" content="Web site created using create-blocklet" />
|
|
11
|
+
<title><%- title %></title>
|
|
12
|
+
<script src="__meta__.js"></script>
|
|
13
|
+
</head>
|
|
14
|
+
<body>
|
|
15
|
+
<div id="app"></div>
|
|
16
|
+
<script type="module" src="/src/main.js"></script>
|
|
17
|
+
</body>
|
|
18
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "template-vue",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"dev": "vite",
|
|
6
|
+
"start": "vite --host",
|
|
7
|
+
"build": "vite build",
|
|
8
|
+
"serve": "vite preview",
|
|
9
|
+
"clean": "rm -rf .blocklet",
|
|
10
|
+
"bundle": "npm run clean && vite build --base /.blocklet/proxy/<%= did %> && blocklet bundle --zip --create-release",
|
|
11
|
+
"deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
|
|
12
|
+
"upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json"
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"vite-plugin-html": "^2.1.1",
|
|
16
|
+
"vue": "^3.2.16"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@vitejs/plugin-vue": "^1.9.3",
|
|
20
|
+
"vite": "^2.6.4",
|
|
21
|
+
"prettier": "^2.3.2"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
// This starter template is using Vue 3 <script setup> SFCs
|
|
3
|
+
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
|
|
4
|
+
import HelloWorld from './components/HelloWorld.vue';
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<template>
|
|
8
|
+
<img alt="Vue logo" src="./assets/logo.png" />
|
|
9
|
+
<HelloWorld msg="Hello Vue 3 + Vite" />
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<style>
|
|
13
|
+
#app {
|
|
14
|
+
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
15
|
+
-webkit-font-smoothing: antialiased;
|
|
16
|
+
-moz-osx-font-smoothing: grayscale;
|
|
17
|
+
text-align: center;
|
|
18
|
+
color: #2c3e50;
|
|
19
|
+
margin-top: 60px;
|
|
20
|
+
}
|
|
21
|
+
</style>
|
|
Binary file
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue';
|
|
3
|
+
|
|
4
|
+
defineProps({
|
|
5
|
+
msg: String,
|
|
6
|
+
});
|
|
7
|
+
|
|
8
|
+
const count = ref(0);
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<template>
|
|
12
|
+
<h1>{{ msg }}</h1>
|
|
13
|
+
|
|
14
|
+
<p>
|
|
15
|
+
Recommended IDE setup:
|
|
16
|
+
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
|
|
17
|
+
+
|
|
18
|
+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
|
|
19
|
+
</p>
|
|
20
|
+
|
|
21
|
+
<p>
|
|
22
|
+
<a href="https://vitejs.dev/guide/features.html" target="_blank"> Vite Documentation </a>
|
|
23
|
+
|
|
|
24
|
+
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
|
|
25
|
+
</p>
|
|
26
|
+
|
|
27
|
+
<button type="button" @click="count++">count is: {{ count }}</button>
|
|
28
|
+
<p>
|
|
29
|
+
Edit
|
|
30
|
+
<code>components/HelloWorld.vue</code> to test hot module replacement.
|
|
31
|
+
</p>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<style scoped>
|
|
35
|
+
a {
|
|
36
|
+
color: #42b983;
|
|
37
|
+
}
|
|
38
|
+
</style>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { defineConfig, loadEnv } from 'vite';
|
|
2
|
+
import vue from '@vitejs/plugin-vue';
|
|
3
|
+
import { minifyHtml, injectHtml } from 'vite-plugin-html';
|
|
4
|
+
|
|
5
|
+
// https://vitejs.dev/config/
|
|
6
|
+
export default ({ mode }) => {
|
|
7
|
+
const envMap = loadEnv(mode, process.cwd());
|
|
8
|
+
return defineConfig({
|
|
9
|
+
plugins: [
|
|
10
|
+
vue(),
|
|
11
|
+
minifyHtml(),
|
|
12
|
+
injectHtml({
|
|
13
|
+
data: {
|
|
14
|
+
base: process.env.BASE_URL || '/',
|
|
15
|
+
title: envMap.VITE_APP_TITLE,
|
|
16
|
+
},
|
|
17
|
+
}),
|
|
18
|
+
],
|
|
19
|
+
server: {
|
|
20
|
+
port: process.env.BLOCKLET_PORT,
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
APP_TITLE=''
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# Getting Started with Create Blocklet
|
|
2
|
+
|
|
3
|
+
This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
|
|
4
|
+
|
|
5
|
+
This blocklet is a static project, which means this is a frontend application. It's contained `client` code.
|
|
6
|
+
|
|
7
|
+
## File Structure
|
|
8
|
+
|
|
9
|
+
- public/ - static files
|
|
10
|
+
- favicon.ico - favicon
|
|
11
|
+
- favicon.svg - favicon
|
|
12
|
+
- index.html - main html file, template for vue
|
|
13
|
+
- screenshots/ - Screenshots
|
|
14
|
+
- src/ - Client side code (A standard vue app structure)
|
|
15
|
+
- .env - Environment variables
|
|
16
|
+
- .env.local - Local environment variables
|
|
17
|
+
- .eslintrc.js - ESLint configuration
|
|
18
|
+
- .gitignore - Git ignore file
|
|
19
|
+
- .prettierrc - Prettier configuration
|
|
20
|
+
- blocklet.md - Blocklet README
|
|
21
|
+
- blocklet.yml - Blocklet configuration
|
|
22
|
+
- LICENSE - License file
|
|
23
|
+
- logo.png - Blocklet logo file
|
|
24
|
+
- Makefile - Makefile
|
|
25
|
+
- package.json - Npm package file
|
|
26
|
+
- README.md - A guide for this blocklet
|
|
27
|
+
- version - Version file
|
|
28
|
+
|
|
29
|
+
## Development
|
|
30
|
+
|
|
31
|
+
1. Make sure you have [@abtnode/cli](https://www.npmjs.com/package/@abtnode/cli) installed
|
|
32
|
+
|
|
33
|
+
Blocklet needs abtnode as a dependency. So you need to install it first.
|
|
34
|
+
`npm install -g @abtnode/cli`
|
|
35
|
+
See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution)
|
|
36
|
+
|
|
37
|
+
2. Init abtnode & start abtnode
|
|
38
|
+
|
|
39
|
+
Before starting an abtnode, you need to init abtnode.
|
|
40
|
+
`abtnode init --mode=debug`
|
|
41
|
+
`abtnode start`
|
|
42
|
+
See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node)
|
|
43
|
+
|
|
44
|
+
3. Go to the project directory `cd [name]`
|
|
45
|
+
4. Install dependencies: `npm install` or `yarn`
|
|
46
|
+
5. Start development server: `blocklet dev`
|
|
47
|
+
|
|
48
|
+
## Bundle
|
|
49
|
+
|
|
50
|
+
After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
|
|
51
|
+
|
|
52
|
+
## Deploy
|
|
53
|
+
|
|
54
|
+
- If you want to deploy this blocklet to local abtnode, you can use `blocklet deploy .blocklet/bundle` command(Make sure the blocklet is bundled before deployment.)
|
|
55
|
+
> Or you can simply use `npm run deploy` command.
|
|
56
|
+
- If you want to deploy this blocklet to remote abtnode, you can use the command below.
|
|
57
|
+
|
|
58
|
+
```shell
|
|
59
|
+
blocklet deploy .blocklet/bundle --endpoint {your abtnode url} --access-key {abtnode access key} --access-secret {abtnode access secret}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
> Make sure the blocklet is bundled before deployment.
|
|
63
|
+
|
|
64
|
+
## Upload to blocklet registry
|
|
65
|
+
|
|
66
|
+
- If you want to upload the blocklet to any registry for other users to download and use, you can following the following instructions.
|
|
67
|
+
|
|
68
|
+
Bump version at first.
|
|
69
|
+
|
|
70
|
+
```shell
|
|
71
|
+
make bump-version
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Then config blocklet registry url.
|
|
75
|
+
You can use those registry url in below.
|
|
76
|
+
|
|
77
|
+
1. [https://registry.arcblock.io/](https://registry.arcblock.io/)
|
|
78
|
+
2. [https://dev.registry.arcblock.io/](https://dev.registry.arcblock.io/)
|
|
79
|
+
3. A blocklet registry started by yourself.
|
|
80
|
+
> Make sure you have installed a `blocklet registry` on your own abtnode. Check it on here: [https://registry.arcblock.io/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://registry.arcblock.io/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
|
|
81
|
+
|
|
82
|
+
```shell
|
|
83
|
+
blocklet config set registry {registry url}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Get a `accessToken` from blocklet registry.
|
|
87
|
+
|
|
88
|
+
> Why we need a `accessToken`?
|
|
89
|
+
> A `accessToken` is genrate by blocklet registry, which help us upload our blocklet to any registry.
|
|
90
|
+
|
|
91
|
+
Set `accessToken` to blocklet config
|
|
92
|
+
|
|
93
|
+
```shell
|
|
94
|
+
blocklet config set accessToken {accessToken}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
Upload a new version to a registry.
|
|
98
|
+
|
|
99
|
+
> Make sure the blocklet is bundled before upload.
|
|
100
|
+
|
|
101
|
+
```shell
|
|
102
|
+
blocklet upload
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Or you can simply use `npm run upload` command.
|
|
106
|
+
|
|
107
|
+
- You also can upload a new version to blocklet registry by Github CI.
|
|
108
|
+
Bump version at first.
|
|
109
|
+
|
|
110
|
+
```shell
|
|
111
|
+
make bump-version
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Push your code to Github main/master branch, or make a pull request to the main/master branch.
|
|
115
|
+
The CI workflow will automatically upload a new version to a registry.
|
|
116
|
+
|
|
117
|
+
## Q & A
|
|
118
|
+
|
|
119
|
+
1. Q: How to change a blocklet's name?
|
|
120
|
+
|
|
121
|
+
A: Change the `name` field in the `package.json` file, change the `name` field in the `blocklet.yml` file.
|
|
122
|
+
|
|
123
|
+
You can also change the `title` field and `description` field in the `blocklet.yml` file.
|
|
124
|
+
|
|
125
|
+
Run `blocklet meta` command, you will get a `did` config, copy the `did` value.
|
|
126
|
+
|
|
127
|
+
Replace this command `"bundle": "PUBLIC_PATH=/.blocklet/proxy/<%= did %> npm run build",` in `package.json`
|
|
128
|
+
|
|
129
|
+
Replace `did` field in the `blocklet.yml`
|
|
130
|
+
|
|
131
|
+
2. Q: How to change a blocklet's logo?
|
|
132
|
+
|
|
133
|
+
Change the `logo.png` file root folder.
|
|
134
|
+
|
|
135
|
+
Or you can change the `logo` field in the `blocklet.yml` file.
|
|
136
|
+
|
|
137
|
+
> Make sure you have added the logo path to the `blocklet.yml` file `files` field.
|
|
138
|
+
|
|
139
|
+
## Learn More
|
|
140
|
+
|
|
141
|
+
- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
|
|
142
|
+
- Full document of AbtNode & blocklet development: [https://docs.arcblock.io/abtnode/en/introduction](https://docs.arcblock.io/abtnode/en/introduction)
|
|
143
|
+
|
|
144
|
+
## License
|
|
145
|
+
|
|
146
|
+
The code is licensed under the Apache 2.0 license found in the
|
|
147
|
+
[LICENSE](LICENSE) file.
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
name: template-vue2
|
|
2
|
+
title: Blocklet Template Vue2
|
|
3
|
+
description: ABT Node blocklet project
|
|
4
|
+
keywords:
|
|
5
|
+
- blocklet
|
|
6
|
+
- vue
|
|
7
|
+
group: static
|
|
8
|
+
did: ''
|
|
9
|
+
main: dist
|
|
10
|
+
author:
|
|
11
|
+
name: zhanghan
|
|
12
|
+
email: zhanghan@arcblock.io
|
|
13
|
+
repository:
|
|
14
|
+
type: git
|
|
15
|
+
url: 'git+https://github.com/blocklet/create-blocklet.git'
|
|
16
|
+
specVersion: 1.1.1
|
|
17
|
+
version: 0.1.0
|
|
18
|
+
logo: logo.png
|
|
19
|
+
files:
|
|
20
|
+
- logo.png
|
|
21
|
+
- README.md
|
|
22
|
+
- blocklet.md
|
|
23
|
+
- screenshots
|
|
24
|
+
interfaces:
|
|
25
|
+
- type: web
|
|
26
|
+
name: publicUrl
|
|
27
|
+
path: /
|
|
28
|
+
prefix: '*'
|
|
29
|
+
port: BLOCKLET_PORT
|
|
30
|
+
protocol: http
|
|
31
|
+
community: ''
|
|
32
|
+
documentation: ''
|
|
33
|
+
homepage: ''
|
|
34
|
+
license: ''
|
|
35
|
+
charging:
|
|
36
|
+
price: 0
|
|
37
|
+
tokens: []
|
|
38
|
+
shares: []
|
|
39
|
+
timeout:
|
|
40
|
+
start: 60
|
|
41
|
+
requirements:
|
|
42
|
+
abtnode: '>=1.4.0'
|
|
43
|
+
os: '*'
|
|
44
|
+
cpu: '*'
|
|
45
|
+
scripts:
|
|
46
|
+
dev: npm run start
|
|
47
|
+
environments: []
|
|
48
|
+
capabilities: {}
|
|
49
|
+
screenshots: []
|
|
50
|
+
children: []
|