diff --git a/.DS_Store b/.DS_Store
index 00e308c..76a51ce 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/index.js b/index.js
index c30afff..7d4eb75 100755
--- a/index.js
+++ b/index.js
@@ -4,8 +4,6 @@ const program = require('commander');
 const helpOptions = require('./lib/core/help');
 const createCommands = require('./lib/core/create');
 
-const log = require('./lib/utils/log');
-
 // 定义显示模块的版本号
 program.version(require('./package.json').version);
 
diff --git a/lib/config/repo_config.js b/lib/config/repo_config.js
index 78cca58..5ff3a31 100644
--- a/lib/config/repo_config.js
+++ b/lib/config/repo_config.js
@@ -1,6 +1,5 @@
 const vueGitRepo = "direct:https://github.com/coderwhy/hy-vue-temp.git";
 
-
 module.exports = {
   vueGitRepo
 }
diff --git a/lib/core/actions.js b/lib/core/actions.js
index 0561b6e..31ee5bd 100644
--- a/lib/core/actions.js
+++ b/lib/core/actions.js
@@ -23,17 +23,19 @@ const createProject = async (project, otherArg) => {
   const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm';
   await terminal.spawn(npm, ['install'], { cwd: `./${project}` });
 
+  // 5.运行项目
+  terminal.spawn(npm, ['run', 'serve'], { cwd: `./${project}` });
+
   // 4.打开浏览器
   open('http://localhost:8080/');
-
-  // 5.运行项目
-  await terminal.spawn(npm, ['run', 'serve'], { cwd: `./${project}` });
 }
 
 const handleEjsToFile = async (name, dest, template, filename) => {
   // 1.获取模块引擎的路径
   const templatePath = path.resolve(__dirname, template);
-  const result = await ejsCompile(templatePath, {name, lowerName: name.toLowerCase()});
+  const cpnPath = dest.replace('router', 'views').replace("src", "@") + `/${name}.vue`
+  const routePath = dest.replace('/router', '').replace('src', '')
+  const result = await ejsCompile(templatePath, {name, lowerName: name.toLowerCase(), cpnPath, routePath});
 
   // 2.写入文件中
   // 判断文件不存在,那么就创建文件
@@ -45,12 +47,26 @@ const handleEjsToFile = async (name, dest, template, filename) => {
 const addComponent = async (name, dest) => {
   handleEjsToFile(name, dest, '../template/component.vue.ejs', `${name}.vue`);
 }
-
 const addPage = async (name, dest) => {
   addComponent(name, dest);
   handleEjsToFile(name, dest, '../template/vue-router.js.ejs', 'router.js')
 }
 
+const addVue3TSComponent = async (name, dest) => {
+  handleEjsToFile(name, dest, '../template/component3_ts.vue.ejs', `${name}.vue`);
+}
+const addVue3Page = async (name, dest) => {
+  addVue3TSComponent(name, dest);
+  let routerDest = dest.replace("views", "router")
+  handleEjsToFile(name, routerDest, '../template/vue-router4.js.ejs', `${name}.ts`)
+}
+
+const addVue3PageSetup = async (name, dest) => {
+  handleEjsToFile(name, dest, '../template/component3_ts_su.vue.ejs', `${name}.vue`);
+  let routerDest = dest.replace("views", "router")
+  handleEjsToFile(name, routerDest, '../template/vue-router4.js.ejs', `${name}.ts`)
+}
+
 const addStore = async (name, dest) => {
   handleEjsToFile(name, dest, '../template/vue-store.js.ejs', 'index.js')
   handleEjsToFile(name, dest, '../template/vue-types.js.ejs', 'types.js')
@@ -60,5 +76,7 @@ module.exports = {
   createProject,
   addComponent,
   addPage,
+  addVue3Page,
+  addVue3PageSetup,
   addStore
 }
\ No newline at end of file
diff --git a/lib/core/create.js b/lib/core/create.js
index 652298d..c6ccb5b 100644
--- a/lib/core/create.js
+++ b/lib/core/create.js
@@ -4,6 +4,8 @@ const {
   createProject,
   addComponent,
   addPage,
+  addVue3Page,
+  addVue3PageSetup,
   addStore
 } = require('./actions');
 
@@ -26,6 +28,20 @@ const createCommands = () => {
       addPage(name, program.dest || `src/pages/${name.toLowerCase()}`)
     })
 
+  program
+    .command('add3page <name>')
+    .description('add vue page, 例如: coderwhy add3page Home [-d dest]')
+    .action(name => {
+      addVue3Page(name, program.dest || `src/views/${name.toLowerCase()}`)
+    })
+    
+  program
+    .command('add3page_setup <name>')
+    .description('add vue page, 例如: coderwhy add3page_setup Home [-d dest]')
+    .action(name => {
+      addVue3PageSetup(name, program.dest || `src/views/${name.toLowerCase()}`)
+    })
+
   program
     .command('addstore <name>')
     .description('add vue store, 例如: coderwhy addstore favor [-d dest]')
diff --git a/lib/template/component3_ts.vue.ejs b/lib/template/component3_ts.vue.ejs
new file mode 100644
index 0000000..4e88731
--- /dev/null
+++ b/lib/template/component3_ts.vue.ejs
@@ -0,0 +1,18 @@
+<template>
+  <div class="<%= data.lowerName %>">
+    <h2><%= data.lowerName %></h2>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: '<%= data.name %>',
+  setup() {
+    return {}
+  }
+})
+</script>
+
+<style scoped></style>
diff --git a/lib/template/component3_ts_su.vue.ejs b/lib/template/component3_ts_su.vue.ejs
new file mode 100644
index 0000000..a8014b3
--- /dev/null
+++ b/lib/template/component3_ts_su.vue.ejs
@@ -0,0 +1,12 @@
+<template>
+  <div class="<%= data.lowerName %>">
+    <h2><%= data.lowerName %></h2>
+  </div>
+</template>
+
+<script setup lang="ts" name="<%= data.lowerName %>"></script>
+
+<style scoped>
+.<%= data.lowerName %> {
+}
+</style>
diff --git a/lib/template/vue-router4.js.ejs b/lib/template/vue-router4.js.ejs
new file mode 100644
index 0000000..11ddc80
--- /dev/null
+++ b/lib/template/vue-router4.js.ejs
@@ -0,0 +1,7 @@
+const <%= data.name %> = () => import('<%= data.cpnPath %>')
+export default {
+  path: '<%= data.routePath %>',
+  name: '<%= data.name %>',
+  component: <%= data.name %>,
+  children: []
+}
diff --git a/package-lock.json b/package-lock.json
index a380ae8..330da67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "coderwhy",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1059,4 +1059,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 44753de..a152d22 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coderwhy",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "description": "CLI front-end development tools",
   "main": "index.js",
   "bin": {