create-blocklet 0.7.9 → 0.8.1

package/templates/vue-dapp/src/App.vue

@@ -1,29 +1,36 @@
 <script setup>
-import { ref } from 'vue';
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 import HelloWorld from './components/HelloWorld.vue';
-
-const msg = ref('Hello Vue 3 + Vite');
 </script>
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld :msg="msg" />
-  <div :style="{ display: 'flex', justifyContent: 'center' }">
-    <pre :style="{ textAlign: 'left' }">
-<code>{{ JSON.stringify(window?.blocklet, null, 2) }}</code>
-    </pre>
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="./assets/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://vuejs.org" target="_blank">
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+    <a href="https://www.arcblock.io/docs/blocklet-developer/getting-started" target="_blank">
+      <img src="./assets/blocklet.svg" class="logo blocklet" alt="Blocklet logo" />
+    </a>
   </div>
+  <HelloWorld msg="Vite + Vue + Blocklet" />
 </template>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+.logo.blocklet:hover {
+  filter: drop-shadow(0 0 2em #22cdcdaa);
 }
 </style>

package/templates/vue-dapp/src/assets/blocklet.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.152 10.6417L31.72 0L13.288 10.6417V24.7942L1 31.8887V53.1722L19.432 63.8139L31.6902 56.7366L31.72 56.7538L31.7498 56.7366L44.008 63.8139L62.44 53.1722V31.8887L50.152 24.7942V10.6417ZM60.52 32.9972L48.232 25.9027V11.7502L31.72 2.21703L15.208 11.7502V25.9028L2.92 32.9972V52.0636L19.432 61.5968L31.6902 54.5196L31.72 54.5368L31.7498 54.5196L44.008 61.5968L60.52 52.0636V32.9972Z" fill="url(#paint0_linear_2412_13557)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.1521 24.8307L31.7201 14.189L13.2881 24.8307V46.1141L31.7201 56.7558L50.1521 46.1141V24.8307ZM15.2081 25.9392L31.7201 16.406L48.2321 25.9392V45.0056L31.7201 54.5388L15.2081 45.0056V25.9392ZM28.5464 23.0464C28.6641 22.6342 29.0408 22.3501 29.4695 22.3501H33.9707C34.3993 22.3501 34.776 22.6342 34.8938 23.0464L35.7504 26.0447L37.8696 27.2681L40.8945 26.5109C41.3103 26.4068 41.7447 26.591 41.959 26.9622L44.2096 30.8604C44.424 31.2316 44.3662 31.6998 44.0682 32.0079L41.8999 34.2489V36.6959L44.0682 38.9369C44.3662 39.245 44.424 39.7133 44.2096 40.0845L41.959 43.9827C41.7447 44.3539 41.3103 44.538 40.8945 44.4339L37.8696 43.6767L35.7504 44.9002L34.8938 47.8984C34.776 48.3106 34.3993 48.5947 33.9707 48.5947H29.4695C29.0408 48.5947 28.6641 48.3106 28.5464 47.8984L27.6897 44.9002L25.5706 43.6767L22.5457 44.4339C22.1299 44.538 21.6955 44.3539 21.4812 43.9827L19.2305 40.0845C19.0162 39.7133 19.0739 39.245 19.372 38.9369L21.5402 36.6959V34.2489L19.372 32.0079C19.0739 31.6998 19.0162 31.2316 19.2305 30.8604L21.4812 26.9622C21.6955 26.591 22.1299 26.4068 22.5457 26.5109L25.5706 27.2681L27.6897 26.0447L28.5464 23.0464ZM28.9861 27.5132C29.2018 27.3887 29.3607 27.1851 29.4292 26.9456L30.1936 24.2701H33.2466L34.011 26.9456C34.0794 27.1851 34.2383 27.3887 34.4541 27.5132L37.2459 29.1251C37.4617 29.2497 37.7174 29.2855 37.9591 29.225L40.6583 28.5493L42.1848 31.1932L40.25 33.193C40.0768 33.372 39.9799 33.6114 39.9799 33.8605V37.0843C39.9799 37.3334 40.0768 37.5728 40.25 37.7518L42.1848 39.7516L40.6583 42.3955L37.9591 41.7198C37.7174 41.6593 37.4617 41.6951 37.2459 41.8197L34.4541 43.4316C34.2383 43.5561 34.0794 43.7597 34.011 43.9992L33.2466 46.6747H30.1936L29.4292 43.9992C29.3607 43.7597 29.2018 43.5561 28.9861 43.4316L26.1942 41.8197C25.9785 41.6951 25.7228 41.6593 25.4811 41.7198L22.7819 42.3955L21.2554 39.7516L23.1902 37.7518C23.3634 37.5728 23.4602 37.3334 23.4602 37.0843V33.8605C23.4602 33.6114 23.3634 33.372 23.1902 33.193L21.2554 31.1932L22.7819 28.5493L25.4811 29.225C25.7228 29.2855 25.9785 29.2497 26.1942 29.1251L28.9861 27.5132ZM31.7201 41.6407C28.3134 41.6407 25.5517 38.8791 25.5517 35.4724C25.5517 32.0657 28.3134 29.3041 31.7201 29.3041C35.1268 29.3041 37.8884 32.0657 37.8884 35.4724C37.8884 38.8791 35.1268 41.6407 31.7201 41.6407ZM35.9684 35.4724C35.9684 37.8187 34.0664 39.7207 31.7201 39.7207C29.3738 39.7207 27.4717 37.8187 27.4717 35.4724C27.4717 33.1261 29.3738 31.2241 31.7201 31.2241C34.0664 31.2241 35.9684 33.1261 35.9684 35.4724Z" fill="url(#paint1_linear_2412_13557)"/>
+<defs>
+<linearGradient id="paint0_linear_2412_13557" x1="31.72" y1="95.7208" x2="95.488" y2="34.3249" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0FA4B7"/>
+<stop offset="0.494757" stop-color="#1DC1C7"/>
+<stop offset="1" stop-color="#2BE0D7"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2412_13557" x1="28.4374" y1="99.2464" x2="98.7613" y2="44.9372" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0FA4B7"/>
+<stop offset="0.494757" stop-color="#1DC1C7"/>
+<stop offset="1" stop-color="#2BE0D7"/>
+</linearGradient>
+</defs>
+<div xmlns="" mx-name="view-image-info"/></svg>

package/templates/vue-dapp/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/vue-dapp/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/templates/vue-dapp/src/components/HelloWorld.vue

@@ -1,38 +1,48 @@
 <script setup>
 import { ref } from 'vue';
+import api from '../libs/api';
 
 defineProps({
   msg: String,
 });
 
 const count = ref(0);
+
+async function getApiData() {
+  const { data } = await api.get('/api/data');
+  const { message } = data;
+  alert(`Message from api: ${message}`);
+}
 </script>
 
 <template>
   <h1>{{ msg }}</h1>
 
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <br />
+    <br />
+    <button type="button" @click="getApiData">Get API Data</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
 
   <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank"> Vite Documentation </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
+    starter
   </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
+    Learn more about IDE Support for Vue in the
+    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue Docs Scaling up Guide</a>.
   </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>
 
 <style scoped>
-a {
-  color: #42b983;
+.read-the-docs {
+  color: #888;
 }
 </style>

package/templates/vue-dapp/src/libs/api.js

@@ -1,14 +1,7 @@
-import axios from 'axios';
+import { createAxios } from '@blocklet/js-sdk';
 
-axios.interceptors.request.use(
-  (config) => {
-    const prefix = window.blocklet ? window.blocklet.prefix : '/';
-    config.baseURL = prefix || '';
-    config.timeout = 200000;
+const api = createAxios({
+  baseURL: window?.blocklet?.prefix || '/',
+});
 
-    return config;
-  },
-  (error) => Promise.reject(error)
-);
-
-export default axios;
+export default api;

package/templates/vue-dapp/src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
+import './style.css';
 import App from './App.vue';
 
 createApp(App).mount('#app');

package/templates/vue-dapp/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/vue-dapp/template-info.json

@@ -8,5 +8,5 @@
   "composable": true,
   "languages": "JavaScript",
   "useCase": "Starter",
-  "author": "ZhangHan"
-}
+  "author": "Blocklet"
+}

package/templates/vue-static/README.md

@@ -31,14 +31,14 @@ This blocklet is a static project, which means this is a frontend application. I
 
    Blocklet needs blocklet server as a dependency. So you need to install it first.
    `npm install -g @blocklet/cli`
-   See details in [https://developer.blocklet.io/docs/en/quick-start/blocklet-server#use-the-binary-distribution](https://developer.blocklet.io/docs/en/quick-start/blocklet-server#use-the-binary-distribution)
+   See details in [https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli](https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli)
 
 2. Init blocklet server & start blocklet server
 
    Before starting an blocklet server, you need to init blocklet server.
    `blocklet server init --mode=debug`
    `blocklet server start`
-   See details in [https://developer.blocklet.io/docs/en/quick-start/blocklet-server](https://developer.blocklet.io/docs/en/quick-start/blocklet-server)
+   See details in [https://www.arcblock.io/docs/blocklet-developer/getting-started](https://www.arcblock.io/docs/blocklet-developer/getting-started)
 
 3. Go to the project directory `cd [name]`
 4. Install dependencies: `npm install` or `yarn`
@@ -138,7 +138,7 @@ After developing a blocklet, you may need to bundle it. Use `npm run bundle` com
 ## Learn More
 
 - 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)
-- Full document of Blocklet Server & blocklet development: [https://developer.blocklet.io/docs/en](https://developer.blocklet.io/docs/en)
+- Full document of Blocklet Server & blocklet development: [https://www.arcblock.io/docs/blocklet-developer](https://www.arcblock.io/docs/blocklet-developer)
 
 ## License
 

package/templates/vue-static/blocklet.yml

@@ -13,7 +13,7 @@ author:
 repository:
   type: git
   url: 'git+https://github.com/blocklet/create-blocklet.git'
-specVersion: 1.1.1
+specVersion: 1.2.8
 version: 0.1.0
 logo: logo.png
 files:

package/templates/vue-static/index.html

@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico?imageFilter=convert&f=png&w=32" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-    <meta name="theme-color" content="#4F6AF5" />
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico?imageFilter=convert&f=png&w=32" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#4F6AF5" />
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
 </html>

package/templates/vue-static/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "template-vue",
+  "name": "template-vue-static",
   "version": "0.1.0",
   "scripts": {
     "dev": "blocklet dev",
@@ -7,32 +7,30 @@
     "lint": "eslint src --ext .mjs,.js,.vue",
     "lint:fix": "npm run lint -- --fix",
     "serve": "vite preview",
-    "clean": "node scripts/build-clean.js",
+    "clean": "node scripts/build-clean.mjs",
     "bundle": "npm run clean && vite build && blocklet bundle --zip --create-release",
     "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
     "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
     "deploy:child": "npm run bundle && blocklet deploy .blocklet/bundle --app-did=<%= did %>",
     "dev:child": "blocklet dev --component --app-did=<%= did %>",
-    "prepare": "husky install",
+    "prepare": "npx simple-git-hooks",
     "bump-version": "zx --quiet scripts/bump-version.mjs"
   },
-  "dependencies": {
-    "vue": "^3.3.13"
-  },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.2",
-    "bumpp": "^8.2.1",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-prettier": "^5.1.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "husky": "^8.0.3",
-    "lint-staged": "^12.5.0",
-    "prettier": "^3.1.1",
-    "rimraf": "^3.0.2",
-    "vite": "^5.0.10",
-    "vite-plugin-blocklet": "^0.7.9",
-    "zx": "^7.2.3"
+    "@vitejs/plugin-vue": "^5.0.5",
+    "bumpp": "^9.4.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.26.0",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "rimraf": "^5.0.7",
+    "simple-git-hooks": "^2.11.1",
+    "vite": "^5.3.2",
+    "vite-plugin-blocklet": "^0.8.1",
+    "vue": "^3.4.31",
+    "zx": "^8.1.3"
   },
   "lint-staged": {
     "*.{mjs,js,vue}": [
@@ -42,5 +40,8 @@
     "*.{css,less,scss,json,graphql}": [
       "prettier --write"
     ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
   }
 }

package/templates/vue-static/src/App.vue

@@ -1,21 +1,36 @@
 <script setup>
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 import HelloWorld from './components/HelloWorld.vue';
 </script>
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="./assets/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://vuejs.org" target="_blank">
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+    <a href="https://www.arcblock.io/docs/blocklet-developer/getting-started" target="_blank">
+      <img src="./assets/blocklet.svg" class="logo blocklet" alt="Blocklet logo" />
+    </a>
+  </div>
+  <HelloWorld msg="Vite + Vue + Blocklet" />
 </template>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+.logo.blocklet:hover {
+  filter: drop-shadow(0 0 2em #22cdcdaa);
 }
 </style>

package/templates/vue-static/src/assets/blocklet.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.152 10.6417L31.72 0L13.288 10.6417V24.7942L1 31.8887V53.1722L19.432 63.8139L31.6902 56.7366L31.72 56.7538L31.7498 56.7366L44.008 63.8139L62.44 53.1722V31.8887L50.152 24.7942V10.6417ZM60.52 32.9972L48.232 25.9027V11.7502L31.72 2.21703L15.208 11.7502V25.9028L2.92 32.9972V52.0636L19.432 61.5968L31.6902 54.5196L31.72 54.5368L31.7498 54.5196L44.008 61.5968L60.52 52.0636V32.9972Z" fill="url(#paint0_linear_2412_13557)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.1521 24.8307L31.7201 14.189L13.2881 24.8307V46.1141L31.7201 56.7558L50.1521 46.1141V24.8307ZM15.2081 25.9392L31.7201 16.406L48.2321 25.9392V45.0056L31.7201 54.5388L15.2081 45.0056V25.9392ZM28.5464 23.0464C28.6641 22.6342 29.0408 22.3501 29.4695 22.3501H33.9707C34.3993 22.3501 34.776 22.6342 34.8938 23.0464L35.7504 26.0447L37.8696 27.2681L40.8945 26.5109C41.3103 26.4068 41.7447 26.591 41.959 26.9622L44.2096 30.8604C44.424 31.2316 44.3662 31.6998 44.0682 32.0079L41.8999 34.2489V36.6959L44.0682 38.9369C44.3662 39.245 44.424 39.7133 44.2096 40.0845L41.959 43.9827C41.7447 44.3539 41.3103 44.538 40.8945 44.4339L37.8696 43.6767L35.7504 44.9002L34.8938 47.8984C34.776 48.3106 34.3993 48.5947 33.9707 48.5947H29.4695C29.0408 48.5947 28.6641 48.3106 28.5464 47.8984L27.6897 44.9002L25.5706 43.6767L22.5457 44.4339C22.1299 44.538 21.6955 44.3539 21.4812 43.9827L19.2305 40.0845C19.0162 39.7133 19.0739 39.245 19.372 38.9369L21.5402 36.6959V34.2489L19.372 32.0079C19.0739 31.6998 19.0162 31.2316 19.2305 30.8604L21.4812 26.9622C21.6955 26.591 22.1299 26.4068 22.5457 26.5109L25.5706 27.2681L27.6897 26.0447L28.5464 23.0464ZM28.9861 27.5132C29.2018 27.3887 29.3607 27.1851 29.4292 26.9456L30.1936 24.2701H33.2466L34.011 26.9456C34.0794 27.1851 34.2383 27.3887 34.4541 27.5132L37.2459 29.1251C37.4617 29.2497 37.7174 29.2855 37.9591 29.225L40.6583 28.5493L42.1848 31.1932L40.25 33.193C40.0768 33.372 39.9799 33.6114 39.9799 33.8605V37.0843C39.9799 37.3334 40.0768 37.5728 40.25 37.7518L42.1848 39.7516L40.6583 42.3955L37.9591 41.7198C37.7174 41.6593 37.4617 41.6951 37.2459 41.8197L34.4541 43.4316C34.2383 43.5561 34.0794 43.7597 34.011 43.9992L33.2466 46.6747H30.1936L29.4292 43.9992C29.3607 43.7597 29.2018 43.5561 28.9861 43.4316L26.1942 41.8197C25.9785 41.6951 25.7228 41.6593 25.4811 41.7198L22.7819 42.3955L21.2554 39.7516L23.1902 37.7518C23.3634 37.5728 23.4602 37.3334 23.4602 37.0843V33.8605C23.4602 33.6114 23.3634 33.372 23.1902 33.193L21.2554 31.1932L22.7819 28.5493L25.4811 29.225C25.7228 29.2855 25.9785 29.2497 26.1942 29.1251L28.9861 27.5132ZM31.7201 41.6407C28.3134 41.6407 25.5517 38.8791 25.5517 35.4724C25.5517 32.0657 28.3134 29.3041 31.7201 29.3041C35.1268 29.3041 37.8884 32.0657 37.8884 35.4724C37.8884 38.8791 35.1268 41.6407 31.7201 41.6407ZM35.9684 35.4724C35.9684 37.8187 34.0664 39.7207 31.7201 39.7207C29.3738 39.7207 27.4717 37.8187 27.4717 35.4724C27.4717 33.1261 29.3738 31.2241 31.7201 31.2241C34.0664 31.2241 35.9684 33.1261 35.9684 35.4724Z" fill="url(#paint1_linear_2412_13557)"/>
+<defs>
+<linearGradient id="paint0_linear_2412_13557" x1="31.72" y1="95.7208" x2="95.488" y2="34.3249" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0FA4B7"/>
+<stop offset="0.494757" stop-color="#1DC1C7"/>
+<stop offset="1" stop-color="#2BE0D7"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2412_13557" x1="28.4374" y1="99.2464" x2="98.7613" y2="44.9372" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0FA4B7"/>
+<stop offset="0.494757" stop-color="#1DC1C7"/>
+<stop offset="1" stop-color="#2BE0D7"/>
+</linearGradient>
+</defs>
+<div xmlns="" mx-name="view-image-info"/></svg>

package/templates/vue-static/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/vue-static/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/templates/vue-static/src/components/HelloWorld.vue

@@ -11,28 +11,28 @@ const count = ref(0);
 <template>
   <h1>{{ msg }}</h1>
 
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
 
   <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank"> Vite Documentation </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
+    starter
   </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
+    Learn more about IDE Support for Vue in the
+    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue Docs Scaling up Guide</a>.
   </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>
 
 <style scoped>
-a {
-  color: #42b983;
+.read-the-docs {
+  color: #888;
 }
 </style>

package/templates/vue-static/src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
+import './style.css';
 import App from './App.vue';
 
 createApp(App).mount('#app');

package/templates/vue-static/src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/vue-static/template-info.json

@@ -1,9 +1,12 @@
 {
   "name": "vue-static",
-  "desc": { "en": "A front-end application skeleton built with Vue 3", "zh": "一个基于 Vue 3 构建的前端应用骨架" },
+  "desc": {
+    "en": "A front-end application skeleton built with Vue 3",
+    "zh": "一个基于 Vue 3 构建的前端应用骨架"
+  },
   "blockletType": "static",
   "composable": true,
   "languages": "JavaScript",
   "useCase": "Starter",
-  "author": "ZhangHan"
-}
+  "author": "Blocklet"
+}