修复.gitignore缺失的bug

Readme.md

@@ -1,14 +1,17 @@
-# create-vue-live
+# create-fite-app
-一个快速创建vue-live项目的小工具
+一个快速创建fite-app项目的小工具
+
+
+[![fite](https://badgen.net/npm/v/create-fite-app)](https://www.npmjs.com/package/create-fite-app)
 
 
 ### 使用方式
 
 ```bash
-npm create vue-live
+npm create fite-app
 
 # 或者
-npm create vue-live@latest
+npm create fite-app@latest
 ```
 
-注意: `@latest`可以确保你初始化的`vue-live`配置是最新的。
+注意: `@latest`可以确保你初始化的`fite-app`配置是最新的。

index.js

@@ -9,36 +9,29 @@ import { request } from 'https'
 import { red, cyan, blue } from 'kolorist'
 import prompts from 'prompts'
 import fs from 'iofs'
-import { resolve, join, dirname } from 'path'
+import { resolve, join, dirname, normalize } from 'path'
-import {
-  writePackageJson,
-  writeConfigFile,
-  writeGitIgnore,
-  writePrettierrc
-} from './lib/demo-config.js'
-import { writeHtmlFile } from './lib/demo-html.js'
-import { writeLogo } from './lib/logo.js'
-import {
-  writeMainJs,
-  writeAppVue,
-  writeHomeVue,
-  writeAboutVue,
-  writeHelloVue,
-  writeRouter,
-  writeStore
-} from './lib/demo-js.js'
 
+const NODE_VERSION = process.versions.node.split('.').map(n => +n)
 const CURRENT_DIR = process.cwd()
-const root = dirname(
+const root = normalize(
-  import.meta.url.slice(process.platform === 'win32' ? 10 : 7)
+  dirname(import.meta.url.slice(process.platform === 'win32' ? 8 : 7))
 )
-const { version } = JSON.parse(fs.cat(join(root, './package.json')))
 
-const DEFAULT_NAME = 'vue-live-app'
+const DEFAULT_NAME = 'fite-app'
 
-let args = process.argv.slice(2)
 let targetDir = ''
 
+if (NODE_VERSION[0] < 16 || (NODE_VERSION[0] === 16 && NODE_VERSION[1] < 6)) {
+  console.log(red('Error: 你当前的环境不满足 fite 构建工具的要求'))
+  console.log(
+    'fite 需要Node.js版本在 %s 以上, \n你当前的Node.js版本为: %s',
+    blue('v16.6.0'),
+    red(process.version),
+    '\n\n'
+  )
+  process.exit()
+}
+
 function isEmpty(dir) {
   let list = fs.ls(dir)
   if (list && list.length) {
@@ -47,9 +40,9 @@ function isEmpty(dir) {
   return true
 }
 
-function getVueLiveVersion() {
+function getFiteVersion() {
   return new Promise(yes => {
-    request('https://registry.npmmirror.com/@bytedo/vue-live', res => {
+    request('https://registry.npmmirror.com/fite', res => {
       let data = ''
       res.on('data', chunk => (data += chunk))
       res.on('end', _ => {
@@ -57,7 +50,7 @@ function getVueLiveVersion() {
           data = JSON.parse(data)
           yes(data['dist-tags'].latest)
         } catch (e) {
-          yes('0.1.1')
+          yes('0.3.1')
         }
       })
     }).end()
@@ -68,27 +61,7 @@ function sleep(num = 1) {
   return new Promise(resolve => setTimeout(resolve, num * 1000))
 }
 
-function printHelp() {
-  console.log('Usage: vue-live-cli {command} [arguments]')
-  console.log('  ', 'vue-live-cli init', '初始化一个符合vue-live的vue项目')
-  console.log('  ', 'vue-live-cli -h[--help]', '打印帮助信息')
-  console.log()
-  process.exit()
-}
-
 !(async function () {
-  switch (args[0]) {
-    case '-v':
-    case '--version':
-      console.log('v' + version)
-      break
-
-    case '-h':
-    case '--help':
-      printHelp()
-      break
-
-    default:
   let res = await prompts([
     {
       name: 'projectName',
@@ -116,6 +89,14 @@ function printHelp() {
         }
         return null
       }
+    },
+    {
+      name: 'isSPA',
+      type: 'toggle',
+      message: _ => `是否初始化为单页应用? (否则为多页应用)`,
+      initial: true,
+      active: '是',
+      inactive: '否'
     }
   ])
 
@@ -130,6 +111,8 @@ function printHelp() {
     res.projectName = DEFAULT_NAME
   }
 
+  targetDir = normalize(targetDir)
+
   console.log('指定的项目名为: %s', cyan(res.projectName))
   console.log('项目目录为: %s', cyan(targetDir))
 
@@ -145,43 +128,73 @@ function printHelp() {
 
   console.log(cyan('\n初始化项目...'))
 
-      let vueLiveVer = await getVueLiveVersion()
+  let fiteVerion = await getFiteVersion()
-
-      fs.mkdir(join(targetDir, 'src'))
 
   console.log('[c---------]', '10%')
 
-      writePackageJson(
+  if (res.isSPA) {
-        join(targetDir, 'package.json'),
+    fs.cp(join(root, './lib/spa'), targetDir)
-        res.projectName,
+  } else {
-        vueLiveVer
+    fs.cp(join(root, './lib/mpa'), targetDir)
-      )
+  }
-      writeConfigFile(join(targetDir, 'vue.live.js'))
-      writeGitIgnore(join(targetDir, '.gitignore'))
-      writePrettierrc(join(targetDir, '.prettierrc.yaml'))
-
   console.log('[ooc-------]', '30%')
 
-      writeHtmlFile(join(targetDir, 'index.html'))
+  fs.cp(join(root, './lib/common'), targetDir)
+  fs.echo(
+    `
+dist
+node_modules
 
-      writeLogo(join(targetDir, 'src/assets/logo.svg'))
+._*
-      fs.cp(join(root, 'lib/favicon.ico'), join(targetDir, 'src/favicon.ico'))
 
+.Spotlight-V100
+.Trashes
+.DS_Store
+.AppleDouble
+.LSOverride
+`,
+    join(targetDir, '.gitignore')
+  )
   console.log('[oooooc----]', '60%')
 
-      writeMainJs(join(targetDir, 'src/main.js'))
+  {
-      writeAppVue(join(targetDir, 'src/app.vue'))
+    fs.echo(
-      writeHomeVue(join(targetDir, 'src/views/home.vue'))
+      `
-      writeAboutVue(join(targetDir, 'src/views/about.vue'))
+import { reactive } from 'vue'
-      writeHelloVue(join(targetDir, 'src/components/hello.vue'))
-      writeRouter(join(targetDir, 'src/router.js'))
-      writeStore(join(targetDir, 'src/store.js'), vueLiveVer)
 
+const store = reactive({
+  foo: 'bar',
+  version: '${fiteVerion}'
+})
+
+export default function (app) {
+  app.config.globalProperties.$store = store
+}
+`,
+      join(targetDir, res.isSPA ? 'src/store.js' : 'src/pages/index/store.js')
+    )
+
+    fs.echo(
+      `
+{
+  "name": "fite-app",
+  "type": "module",
+  "scripts": {
+    "start": "fite dev",
+    "build": "fite build",
+    "build:keep": "fite build --no-clean"
+  },
+  "devDependencies": {
+    "fite": "^${fiteVerion}"
+  }
+}
+    `,
+      join(targetDir, 'package.json')
+    )
+  }
   console.log('[oooooooooo]', '100%')
+
   console.log(cyan('初始化完成, 可依次执行以下命令启动项目: '))
   console.log(blue('npm i'))
   console.log(blue('npm start'))
-
-      break
-  }
 })()

lib/common/.prettierrc.yaml

@@ -0,0 +1,11 @@
+
+jsxBracketSameLine: true
+jsxSingleQuote: true
+semi: false
+singleQuote: true
+printWidth: 80
+useTabs: false
+tabWidth: 2
+trailingComma: none
+bracketSpacing: true
+arrowParens: avoid

lib/common/index.html

@@ -1,14 +1,4 @@
-/**
+<!doctype html>
- * {}
- * @author yutent<yutent.io@gmail.com>
- * @date 2022/10/10 17:00:29
- */
-
-import fs from 'iofs'
-
-export function writeHtmlFile(file) {
-  fs.echo(
-    `<!doctype html>
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8">
@@ -17,16 +7,15 @@ export function writeHtmlFile(file) {
   <title>{{title}}</title>
   <meta name="keywords" content="{{keywords}}">
   <meta name="description" content="{{description}}">
-  <link rel="stylesheet" href="//unpkg.com/@bytedo/wcui@1.0.6/dist/css/reset-basic.css">
+  <link rel="stylesheet" href="//jscdn.ink/@bd/ui/latest/css/reset-basic.css">
-  <script async src="//esm.tool/es-module-shims.wasm.js"></script>
+  <script async src="//jscdn.ink/es-module-shims/latest/es-module-shims.wasm.js"></script>
   <script type="importmap">{{importmap}}</script>
+  {{#if process.env.NODE_ENV === 'development' }}
+  <!-- todo... -->
+  {{#/if}}
 </head>
 <body>
-  <div class="app noselect"></div>
+  <div id="app"></div>
   <script src="main.js"></script>
 </body>
 </html>
-`,
-    file
-  )
-}

lib/common/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/><path d="M36.21 192.639l160.921-74.805-81.778-5.063 119.519-67.69L49.06 126.138l88.8 2.712z" fill="rgb(252, 118, 97)"/></svg>

lib/common/src/components/hello.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      你已经成功运行了一个项目, 项目基于
+      <a href="//github.com/bytedo/vue-live" target="_blank">
+        <img
+          :src="`https://img.shields.io/badge/fite-${$store.version}-red?style=flat-square`"
+          alt="fite"
+        />
+      </a>
+      +
+      <a href="//vuejs.org" target="_blank">
+        <img
+          src="https://img.shields.io/badge/vue-3.2.47-teal?style=flat-square"
+          alt="fite"
+        />
+      </a>
+    </h3>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.greetings {
+  text-align: center;
+}
+h1 {
+  font-size: 52px;
+  font-family: 'Courier New', Courier, monospace;
+  color: var(--color-blue-1);
+}
+
+h3 {
+  display: flex;
+  align-items: center;
+  font-size: 1.2rem;
+  font-weight: normal;
+
+  a {
+    display: inline-flex;
+    margin: 0 4px;
+  }
+}
+</style>

lib/demo-config.js

@@ -1,112 +0,0 @@
-/**
- * {}
- * @author yutent<yutent.io@gmail.com>
- * @date 2022/10/10 16:49:07
- */
-
-import fs from 'iofs'
-
-export function writePackageJson(file, name, version) {
-  fs.echo(
-    JSON.stringify(
-      {
-        name: name || 'vue-live-app',
-        type: 'module',
-        scripts: {
-          start: 'vue-live dev',
-          build: 'vue-live build'
-        },
-        devDependencies: {
-          '@bytedo/vue-live': `^${version}`
-        }
-      },
-      null,
-      2
-    ),
-    file
-  )
-}
-
-export function writeConfigFile(file) {
-  fs.echo(
-    `
-import { resolve } from 'path'
-
-export default {
-  devServer: {
-    port: 8080,
-    domain: '',
-    https: false,
-    ssl: {
-      key: '',
-      cert: '',
-      // ca: ''
-    }
-  },
-  pages: {
-    // 如果多页应用, 则这里写传入多个值即可(注意不是数组格式)
-    // 这里的key值, 将是最终的页面的名称
-    index: {
-      // 这里的resolve可将相对路径转为绝对路径
-      // 如果传入的路径已经是绝对路径的, 可不需要resolve
-      entry: resolve('./src/main.js'),
-      title: 'vue-live 应用示例'
-    }
-  },
-  // 以下cdn地址, 可自行修改为适合的
-  // 有用到其他的库, 可以手动添加,
-  // 也可以在页面中直接引入完整的路径, 而不必须在这里声明
-  imports: {
-    vue: '//unpkg.com/vue@3.2.40/dist/vue.esm-browser.prod.js',
-    'vue-router': '//unpkg.com/vue-router@4.1.5/dist/vue-router.esm-browser.js',
-    // 这个库被vue-router依赖, 可以注释掉vue-router代码中的 @vue/devtools-api 的引入
-    // 以达到减少不必须的体积的效果
-    '@vue/devtools-api': '//unpkg.com/@vue/devtools-api@6.4.4/lib/esm/index.js',
-    fetch: '//unpkg.com/@bytedo/fetch@2.1.1/dist/next.js'
-  }
-}
-
-`,
-    file
-  )
-}
-
-export function writeGitIgnore(file) {
-  fs.echo(
-    `
-node_modules
-
-*.sublime-project
-*.sublime-workspace
-package-lock.json
-
-._*
-
-.Spotlight-V100
-.Trashes
-.DS_Store
-.AppleDouble
-.LSOverride
-
-`,
-    file
-  )
-}
-
-export function writePrettierrc(file) {
-  fs.echo(
-    `
-jsxBracketSameLine: true
-jsxSingleQuote: true
-semi: false
-singleQuote: true
-printWidth: 100
-useTabs: false
-tabWidth: 2
-trailingComma: none
-bracketSpacing: true
-arrowParens: avoid
-`,
-    file
-  )
-}

lib/demo-js.js

@@ -1,239 +0,0 @@
-/**
- * {}
- * @author yutent<yutent.io@gmail.com>
- * @date 2022/10/10 17:00:29
- */
-
-import fs from 'iofs'
-
-export function writeMainJs(file) {
-  fs.echo(
-    `
-import { createApp } from 'vue'
-import App from './app.vue'
-
-import router from './router'
-import store from './store'
-    
-const app = createApp(App)
-
-app.use(router).use(store).mount('.app')
-    
-`,
-    file
-  )
-}
-
-export function writeRouter(file) {
-  fs.echo(
-    `
-import { createRouter, createWebHistory } from 'vue-router'
-import Home from './views/home.vue'
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: Home
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: () => import('./views/about.vue')
-    }
-  ]
-})
-
-export default router
-    
-    
-`,
-    file
-  )
-}
-
-export function writeStore(file, version) {
-  fs.echo(
-    `
-import { reactive } from 'vue'
-
-const store = reactive({
-  foo: 'bar',
-  version: '${version}'
-})
-
-export default function (app) {
-  app.config.globalProperties.$store = store
-}
-`,
-    file
-  )
-}
-
-export function writeAppVue(file) {
-  fs.echo(
-    `
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <Hello msg="It works!!!" />
-
-      <nav>
-        <router-link to="/">Home</router-link>
-        <router-link to="/about">About</router-link>
-      </nav>
-    </div>
-  </header>
-
-  <router-view />
-</template>
-
-<script>
-import Hello from './components/hello.vue'
-
-export default {
-  components: { Hello }
-}
-</script>
-
-<style lang="scss">
-.app {
-  padding: 16px;
-}
-
-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-a {
-  color: var(--color-teal-1);
-  transition: 0.2s;
-}
-
-a:hover {
-  color: var(--color-teal-3);
-}
-
-nav {
-  margin-top: 32px;
-  display: flex;
-  justify-content: center;
-
-  a {
-    margin: 0 16px;
-  }
-}
-
-main {
-  margin: 32px;
-  text-align: center;
-}
-</style>
-  
-    
-`,
-    file
-  )
-}
-
-export function writeHelloVue(file) {
-  fs.echo(
-    `
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      你已经成功运行了一个项目, 项目基于
-      <a href="//github.com/bytedo/vue-live" target="_blank">Vue-live</a> +
-      <a href="//vuejs.org" target="_blank">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<style>
-h1 {
-  font-size: 52px;
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: normal;
-}
-
-.green {
-  font-family: 'Courier New', Courier, monospace;
-  color: var(--color-blue-1);
-}
-
-.greetings {
-  text-align: center;
-}
-</style>
-   
-`,
-    file
-  )
-}
-
-export function writeHomeVue(file) {
-  fs.echo(
-    `
-<script>
-export default {
-  data(){
-    return {
-      content: '欢迎访问~~ 这是首页'
-    }
-  }
-}
-</script>
-
-<template>
-  <main>
-    <h1>{{content}}</h1>
-  </main>
-</template>
-    
-`,
-    file
-  )
-}
-
-export function writeAboutVue(file) {
-  fs.echo(
-    `
-<script>
-export default {
-  data(){
-    return {
-      content: '这是关于我们页面'
-    }
-  }
-}
-</script>
-
-<template>
-  <main>
-    <h1>{{content}}</h1>
-    <cite>当前vue-live版本: v{{$store.version}}</cite>
-  </main>
-</template>
-    
-`,
-    file
-  )
-}

lib/logo.js

@@ -1,8 +0,0 @@
-import fs from 'iofs'
-
-export function writeLogo(file) {
-  fs.echo(
-    '<svg viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/><path d="M36.21 192.639l160.921-74.805-81.778-5.063 119.519-67.69L49.06 126.138l88.8 2.712z" fill="rgb(252, 118, 97)"/></svg>',
-    file
-  )
-}

lib/mpa/fite.config.js

@@ -0,0 +1,58 @@
+import { resolve } from 'path'
+
+export default {
+  // 用于配置部署目录, 默认为根目录, 如果需要部署到二级目录的话,
+  // 请取消以下注释, 并填写你最终需要部署的二级目录名, 必须以 / 开头及结尾。如: '/foo/'
+  // base: '/',
+  devServer: {
+    port: 8080,
+    domain: '',
+    https: false,
+    ssl: {
+      key: '',
+      cert: ''
+      // ca: '' //可选
+    }
+  },
+  // 如果多页应用, 则这里写传入多个值即可(注意不是数组格式)
+  pages: {
+    // 这里的key值, 将是最终的页面的名称
+    index: {
+      // 这里的resolve可将相对路径转为绝对路径
+      // 如果传入的路径已经是绝对路径的, 可不需要resolve
+      entry: resolve('./src/pages/index/main.js'),
+      title: 'fite-app 应用示例'
+    },
+    login: {
+      // 这里的resolve可将相对路径转为绝对路径
+      // 如果传入的路径已经是绝对路径的, 可不需要resolve
+      entry: resolve('./src/pages/login/main.js'),
+      title: 'fite-app 登录示例'
+    },
+    // 还可单独将某个页面放到二级目录中 (这里的 @ 只是示例所用, 不是必须的, 但用到的字符,应该为url安全的字符)
+    '@foo/bar': {
+      // 这里的resolve可将相对路径转为绝对路径
+      // 如果传入的路径已经是绝对路径的, 可不需要resolve
+      entry: resolve('./src/pages/@foo/bar/main.js'),
+      title: '特殊页面示例'
+    }
+  },
+  inject: {
+    // v1.0.1之后, 可以注入一个scss, 所有的vue文件中的样式都会被注入这个公共scss
+    // 注意: 该文件不支持热更新, 不可被vue/js文件引用 (但可以被其他的scss文件引用)
+    scss: resolve('./src/inject.scss')
+  },
+  // 以下cdn地址, 可自行修改为适合的
+  // 有用到其他的库, 可以手动添加,
+  // 也可以在页面中直接引入完整的路径, 而不必须在这里声明
+  imports: {
+    vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js',
+    // 这个vue-router库, 移除了 @vue/devtools-api 相关的代码。 以达到减少不必须的体积的效果
+    // 如需要支持devtools的, 请修改为原版vue-router地址即可。
+    'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js',
+    // 'vue-router': '//jscdn.ink/vue-router/4.1.6/vue-router.esm-browser.js',
+    // '@vue/devtools-api': '//jscdn.ink/@vue/devtools-api/6.5.0/esm/index.js',
+    fetch: '//jscdn.ink/@bytedo/fetch/2.1.5/next.js',
+    '@bd/core': '//jscdn.ink/@bd/core/latest/index.js'
+  }
+}

lib/mpa/src/inject.scss

@@ -0,0 +1,5 @@
+@for $i from 1 to 3 {
+  .fo-#{$i} {
+    color: red;
+  }
+}

lib/mpa/src/pages/@foo/bar/app.vue

@@ -0,0 +1,135 @@
+<template>
+  <img
+    alt="Vue logo"
+    class="logo"
+    src="/assets/logo.svg"
+    width="125"
+    height="125"
+  />
+  <h3>作者很懒, 什么都没有写, 就看泡泡吧~~</h3>
+
+  <div class="bubble">
+    <i></i>
+    <i></i>
+    <i></i>
+    <i></i>
+    <i></i>
+    <i></i>
+    <i></i>
+    <i></i>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {}
+}
+</script>
+
+<style>
+body {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(135deg, var(--color-dark-1), var(--color-blue-a));
+}
+
+a {
+  color: var(--color-teal-1);
+  transition: 0.2s;
+}
+
+a:hover {
+  color: var(--color-teal-3);
+}
+#app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+}
+</style>
+
+<style lang="scss" scoped>
+h3 {
+  font-weight: normal;
+}
+.bubble {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100vh;
+
+  i {
+    position: absolute;
+    left: 5%;
+    bottom: -80px;
+    width: 80px;
+    height: 80px;
+    background: rgba(255, 255, 255, 0.1);
+    animation: square 20s linear infinite;
+
+    &:nth-child(1) {
+      width: 30px;
+      height: 30px;
+    }
+    &:nth-child(2) {
+      left: 19%;
+      width: 50px;
+      height: 50px;
+      animation-duration: 16s;
+      animation-delay: 1s;
+    }
+    &:nth-child(3) {
+      left: 27%;
+      width: 40px;
+      height: 40px;
+      animation-duration: 18s;
+    }
+    &:nth-child(4) {
+      left: 40%;
+      animation-duration: 15s;
+      animation-delay: 2s;
+    }
+    &:nth-child(5) {
+      left: 52%;
+      width: 60px;
+      height: 60px;
+      animation-duration: 19s;
+      animation-delay: 3s;
+    }
+    &:nth-child(6) {
+      left: 69%;
+      width: 50px;
+      height: 50px;
+      animation-duration: 18s;
+      animation-delay: 5s;
+    }
+    &:nth-child(7) {
+      left: 75%;
+      width: 40px;
+      height: 40px;
+      animation-duration: 15s;
+      animation-delay: 6s;
+    }
+    &:nth-child(8) {
+      left: 87%;
+      width: 30px;
+      height: 30px;
+      animation-duration: 14s;
+      animation-delay: 3.5s;
+    }
+  }
+}
+
+@keyframes square {
+  0% {
+    transform: translateY(0);
+  }
+  85%,
+  100% {
+    transform: translateY(-100vh) rotate(600deg);
+  }
+}
+</style>

lib/mpa/src/pages/@foo/bar/main.js

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

lib/mpa/src/pages/index/app.vue

@@ -0,0 +1,88 @@
+<template>
+  <header>
+    <img
+      alt="Vue logo"
+      class="logo"
+      src="/assets/logo.svg"
+      width="125"
+      height="125"
+    />
+
+    <div class="wrapper">
+      <Hello msg="It works!!!" />
+
+      <nav>
+        <router-link to="/">首页</router-link>
+        <router-link to="/about">关于我们</router-link>
+        <a href="/@foo/bar.html">@foo/bar</a>
+        <a href="/login.html">登录</a>
+      </nav>
+    </div>
+  </header>
+
+  <router-view v-slot="{ Component }">
+    <keep-alive>
+      <component :is="Component" />
+    </keep-alive>
+  </router-view>
+</template>
+
+<script>
+import Hello from '@/components/hello.vue'
+
+export default {
+  components: { Hello },
+  mounted() {
+    this.$router.replace('/')
+  }
+}
+</script>
+
+<style>
+#app {
+  padding: 32px;
+}
+</style>
+
+<style lang="scss" scoped>
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+a {
+  color: var(--color-teal-1);
+  transition: 0.2s;
+}
+
+a:hover {
+  color: var(--color-teal-3);
+}
+
+nav {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+
+  a {
+    margin: 0 16px;
+    color: var(--color-dark-1);
+  }
+
+  .router-link-active {
+    text-decoration: none;
+    color: var(--color-teal-1);
+    cursor: default;
+  }
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 32px;
+  text-align: center;
+}
+</style>

lib/mpa/src/pages/index/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './app.vue'
+
+import router from './router'
+import store from './store'
+
+createApp(App).use(router).use(store).mount('#app')

lib/mpa/src/pages/index/router.js

@@ -0,0 +1,23 @@
+
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from './views/home.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('./views/about.vue')
+    }
+  ]
+})
+
+export default router
+    
+    

lib/mpa/src/pages/index/views/about.vue

@@ -0,0 +1,27 @@
+<template>
+  <main>
+    <h1>{{ content }}</h1>
+    <cite
+      >fite是一种不算新型前端构建工具，能够显著提升前端开发体验。基于原生ESM模块运行。
+      fite的理念是, 让第三方依赖全部走CDN, fite只处理业务代码本身,
+      从而让编译和构建的速度达到今人发指的地步。比vite快十几到几十倍。</cite
+    >
+  </main>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: '这是关于我们页面'
+    }
+  }
+}
+</script>
+
+<style scoped>
+cite {
+  width: 600px;
+  color: var(--color-grey-3);
+}
+</style>

lib/mpa/src/pages/index/views/home.vue

@@ -0,0 +1,17 @@
+<script>
+export default {
+  data() {
+    return {
+      content: '欢迎访问~~ 这是首页',
+      now: ~~performance.now()
+    }
+  }
+}
+</script>
+
+<template>
+  <main>
+    <h1>{{ content }}</h1>
+    <section>页面渲染完成时间: {{ now }}ms</section>
+  </main>
+</template>

lib/mpa/src/pages/login/app.vue

@@ -0,0 +1,80 @@
+<template>
+  <main>
+    <div class="login-form">
+      <img alt="Vue logo" class="logo" src="/assets/logo.svg" />
+      <section>
+        <wc-input placeholder="请输入账号" icon="user"></wc-input>
+      </section>
+      <section>
+        <wc-passwd placeholder="请输入密码" icon="lock"></wc-passwd>
+      </section>
+      <section>
+        <wc-button size="xl" solid @click="login">登录</wc-button>
+      </section>
+    </div>
+  </main>
+</template>
+
+<script>
+import '//jscdn.ink/@bd/ui/latest/form/input.js'
+import '//jscdn.ink/@bd/ui/latest/form/passwd.js'
+import '//jscdn.ink/@bd/ui/latest/form/button.js'
+
+export default {
+  methods: {
+    login() {
+      location.href = '/index.html'
+    }
+  }
+}
+</script>
+
+<style>
+a {
+  color: var(--color-teal-1);
+  transition: 0.2s;
+}
+
+a:hover {
+  color: var(--color-teal-3);
+}
+</style>
+
+<style lang="scss" scoped>
+main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(135deg, var(--color-dark-1), var(--color-blue-a));
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 400px;
+  height: 360px;
+  padding: 32px 64px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.85);
+  .logo {
+    width: 64px;
+    height: 64px;
+  }
+
+  section {
+    display: flex;
+    width: 100%;
+    margin-top: 16px;
+
+    wc-input,
+    wc-passwd,
+    wc-button {
+      flex: 1;
+    }
+  }
+}
+</style>

lib/mpa/src/pages/login/main.js

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

lib/spa/fite.config.js

@@ -0,0 +1,44 @@
+import { resolve } from 'path'
+
+export default {
+  // 用于配置部署目录, 默认为根目录, 如果需要部署到二级目录的话,
+  // 请取消以下注释, 并填写你最终需要部署的二级目录名, 必须以 / 开头及结尾。如: '/foo/'
+  // base: '/',
+  devServer: {
+    port: 8080,
+    domain: '',
+    https: false,
+    ssl: {
+      key: '',
+      cert: ''
+      // ca: '' //可选
+    }
+  },
+  // 如果多页应用, 则这里写传入多个值即可(注意不是数组格式)
+  pages: {
+    // 这里的key值, 将是最终的页面的名称
+    index: {
+      // 这里的resolve可将相对路径转为绝对路径
+      // 如果传入的路径已经是绝对路径的, 可不需要resolve
+      entry: resolve('./src/main.js'),
+      title: 'fite-app 应用示例'
+    }
+  },
+  inject: {
+    // v1.0.1之后, 可以注入一个scss, 所有的vue文件中的样式都会被注入这个公共scss
+    // 注意: 该文件不支持热更新, 不可被vue/js文件引用 (但可以被其他的scss文件引用)
+    scss: resolve('./src/inject.scss')
+  },
+  // 以下cdn地址, 可自行修改为适合的
+  // 有用到其他的库, 可以手动添加,
+  // 也可以在页面中直接引入完整的路径, 而不必须在这里声明
+  imports: {
+    vue: '//jscdn.ink/vue/3.2.47/vue.runtime.esm-browser.prod.js',
+    // 这个vue-router库, 移除了 @vue/devtools-api 相关的代码。 以达到减少不必须的体积的效果
+    // 如需要支持devtools的, 请修改为原版vue-router地址即可。
+    'vue-router': '//jscdn.ink/@bytedo/vue-router/4.1.6/vue-router.js',
+    // 'vue-router': '//jscdn.ink/vue-router/4.1.6/vue-router.esm-browser.js',
+    // '@vue/devtools-api': '//jscdn.ink/@vue/devtools-api/6.5.0/esm/index.js',
+    fetch: '//jscdn.ink/@bytedo/fetch/2.1.5/next.js'
+  }
+}

lib/spa/src/app.vue

@@ -0,0 +1,83 @@
+<template>
+  <header>
+    <img
+      alt="Vue logo"
+      class="logo"
+      src="/assets/logo.svg"
+      width="125"
+      height="125"
+    />
+
+    <div class="wrapper">
+      <Hello msg="It works!!!" />
+
+      <nav>
+        <router-link to="/">Home</router-link>
+        <router-link to="/about">About</router-link>
+      </nav>
+    </div>
+  </header>
+
+  <router-view v-slot="{ Component }">
+    <keep-alive>
+      <component :is="Component" />
+    </keep-alive>
+  </router-view>
+</template>
+
+<script>
+import Hello from './components/hello.vue'
+
+export default {
+  components: { Hello }
+}
+</script>
+
+<style>
+#app {
+  padding: 32px;
+}
+</style>
+
+<style lang="scss" scoped>
+header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+a {
+  color: var(--color-teal-1);
+  transition: 0.2s;
+}
+
+a:hover {
+  color: var(--color-teal-3);
+}
+
+nav {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+
+  a {
+    margin: 0 16px;
+    color: var(--color-dark-1);
+  }
+
+  .router-link-active {
+    text-decoration: none;
+    color: var(--color-teal-1);
+    cursor: default;
+  }
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 32px;
+  text-align: center;
+}
+</style>

lib/spa/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './app.vue'
+
+import router from './router'
+import store from './store'
+
+createApp(App).use(router).use(store).mount('#app')

lib/spa/src/router.js

@@ -0,0 +1,23 @@
+
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from './views/home.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('./views/about.vue')
+    }
+  ]
+})
+
+export default router
+    
+    

lib/spa/src/views/about.vue

@@ -0,0 +1,27 @@
+<template>
+  <main>
+    <h1>{{ content }}</h1>
+    <cite
+      >fite是一种不算新型前端构建工具，能够显著提升前端开发体验。基于原生ESM模块运行。
+      fite的理念是, 让第三方依赖全部走CDN, fite只处理业务代码本身,
+      从而让编译和构建的速度达到今人发指的地步。比vite快十几到几十倍。</cite
+    >
+  </main>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      content: '这是关于我们页面'
+    }
+  }
+}
+</script>
+
+<style scoped>
+cite {
+  width: 600px;
+  color: var(--color-grey-3);
+}
+</style>

lib/spa/src/views/home.vue

@@ -0,0 +1,17 @@
+<script>
+export default {
+  data() {
+    return {
+      content: '欢迎访问~~ 这是首页',
+      now: ~~performance.now()
+    }
+  }
+}
+</script>
+
+<template>
+  <main>
+    <h1>{{ content }}</h1>
+    <section>页面渲染完成时间: {{ now }}ms</section>
+  </main>
+</template>

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "create-vue-live",
+  "name": "create-fite-app",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "bin": {
-    "create-vue-live": "index.js"
+    "create-fite-app": "index.js"
   },
   "dependencies": {
     "iofs": "^1.5.2",