update vue3 component page

Author: coderwhy

.DS_Store

@@ -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);
 

index.js

@@ -1,6 +1,5 @@
 const vueGitRepo = "direct:https://github.com/coderwhy/hy-vue-temp.git";
 
-
 module.exports = {
   vueGitRepo
 }

lib/config/repo_config.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,20 @@ 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 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 +70,6 @@ module.exports = {
   createProject,
   addComponent,
   addPage,
+  addVue3Page,
   addStore
 }

lib/core/actions.js

@@ -4,6 +4,7 @@ const {
   createProject,
   addComponent,
   addPage,
+  addVue3Page,
   addStore
 } = require('./actions');
 
@@ -26,6 +27,13 @@ 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('addstore <name>')
     .description('add vue store, 例如: coderwhy addstore favor [-d dest]')

lib/core/create.js

@@ -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>

lib/template/component3_ts.vue.ejs

@@ -0,0 +1,7 @@
+const <%= data.name %> = () => import('<%= data.cpnPath %>')
+export default {
+  path: '<%= data.routePath %>',
+  name: '<%= data.name %>',
+  component: <%= data.name %>,
+  children: []
+}

lib/template/vue-router4.js.ejs

@@ -1,6 +1,6 @@
 {
   "name": "coderwhy",
-  "version": "1.1.0",
+  "version": "1.1.4",
   "description": "CLI front-end development tools",
   "main": "index.js",
   "bin": {