Tiny pro vue server side

packages/toolkits/pro/package.json

@@ -54,12 +54,13 @@
     "node": ">=8.9"
   },
   "dependencies": {
-    "@opentiny/cli-devkit": "^1.0.0-alpha.0",
+    "@opentiny/cli-devkit": "^1.0.1",
     "chalk": "^4.1.2",
     "cross-spawn": "^7.0.3",
+    "dotenv": "^16.0.3",
     "fs-extra": "^10.1.0",
-    "open": "^8.4.0",
-    "inquirer": "^8.0.2"
+    "inquirer": "^8.0.2",
+    "open": "^8.4.0"
   },
   "devDependencies": {
     "@bitjson/npm-scripts-info": "^1.0.0",

packages/toolkits/pro/src/lib/init.ts

@@ -5,6 +5,8 @@ import inquirer, { QuestionCollection } from 'inquirer';
 import { cliConfig, logs, fs, user, modules } from '@opentiny/cli-devkit';
 import { InitAnswers } from './interfaces';
 import utils from './utils';
+import * as dotenv from 'dotenv';
+dotenv.config();
 
 const log = logs('tiny-toolkit-pro');
 const cwd = process.cwd();
@@ -36,18 +38,54 @@ const getInitAnswers = (): Promise<InitAnswers> => {
     {
       type: 'list',
       name: 'framework',
-      message: '请选择您希望使用的技术栈：',
+      message: '请选择您希望使用的客户端技术栈：',
       choices: [
         { name: 'vue', value: vueTemplatePath },
         { name: 'angular', value: ngTemplatePath },
       ],
       default: vueTemplatePath,
+      prefix: '*',
+    },
+    {
+      type: 'confirm',
+      name: 'useServer',
+      message: '是否需要对接服务端：',
+      default: true,
     },
   ] as const;
 
   return inquirer.prompt(question);
 };
-
+const serverQuestion: QuestionCollection<InitAnswers> = [
+  {
+    type: 'list',
+    name: 'serverType',
+    message: '请选择您希望使用的服务端技术栈：',
+    choices: [
+      { name: 'Spring Cloud', value: 'springCloud' },
+      { name: 'Egg.js', value: 'eggJs' },
+      { name: 'Nest.js', value: 'nestJs' },
+    ],
+    default: 'springCloud',
+    prefix: '*',
+  },
+  {
+    type: 'input',
+    name: 'host',
+    message: '请输入服务端Host：',
+    // 必填校验
+    validate: (input: string) => Boolean(input),
+    prefix: '*',
+  },
+  {
+    type: 'input',
+    name: 'port',
+    message: '请输入服务端Port：',
+    // 必填校验
+    validate: (input: string) => Boolean(input),
+    prefix: '*',
+  },
+];
 /**
  * 同步创建项目文件目录、文件
  * @answers 询问问题的选择值
@@ -71,17 +109,23 @@ const createProjectSync = (answers: InitAnswers) => {
     pluginFullname: fullName,
   };
 
-  const { framework, description, name: packageJsonName } = answers;
-
+  const {
+    framework,
+    description,
+    name: packageJsonName,
+    useServer,
+    serverType,
+    host,
+    port,
+  } = answers;
   const templatePath =
     framework === vueTemplatePath ? vueTemplatePath : ngTemplatePath;
 
   // 模板来源目录
   const from = utils.getTemplatePath(templatePath);
 
   // 复制模板的目标目录
-  const to = utils.getDistPath();
-
+  const to = utils.getDistPath(useServer ? 'web' : '');
   // 项目名称，跟当前目录保持一致
 
   fs.copyTpl(from, to, data, {
@@ -95,7 +139,12 @@ const createProjectSync = (answers: InitAnswers) => {
       return filename;
     },
   });
-
+  // 如果对接服务端，复制相关目录
+  if (useServer) {
+    const serverFrom = utils.getTemplatePath(`server/${serverType}`);
+    const serverTo = utils.getDistPath('server');
+    fs.copyTpl(serverFrom, serverTo);
+  }
   // 将项目名称、描述写入 package.json中
   {
     const packageJsonPath = path.join(to, 'package.json');
@@ -107,6 +156,28 @@ const createProjectSync = (answers: InitAnswers) => {
     packageJson.name = packageJsonName;
     packageJson.description = description;
 
+    if (useServer) {
+      const envPath = path.join(to, '.env');
+      const envConfig = dotenv.parse(
+        fs.readFileSync(envPath, writeOrReadOptions)
+      );
+      envConfig.VITE_SEVER_HOST = `${host}:${port}`;
+      const config = Object.keys(envConfig)
+        .map((key) => `${key} = ${envConfig[key]}`)
+        .join('\n');
+      fs.writeFileSync(envPath, config);
+    } else {
+      const envPath = path.join(to, '.env');
+      const envConfig = dotenv.parse(
+        fs.readFileSync(envPath, writeOrReadOptions)
+      );
+      envConfig.VITE_USE_MOCK = 'true';
+      const config = Object.keys(envConfig)
+        .map((key) => `${key} = ${envConfig[key]}`)
+        .join('\n');
+      fs.writeFileSync(envPath, config);
+    }
+
     fs.writeFileSync(
       packageJsonPath,
       JSON.stringify(packageJson, null, 2),
@@ -116,15 +187,20 @@ const createProjectSync = (answers: InitAnswers) => {
 };
 
 // 安装依赖
-export const installDependencies = () => {
+export const installDependencies = (useServer: boolean) => {
   const prefix = cliConfig.getBinName();
 
   // npm 依赖安装
   log.info('正在安装 npm 依赖，安装过程需要几十秒，请耐心等待...');
-  spawn.sync('npm', ['install'], { stdio: 'inherit' });
+  spawn.sync('npm', ['install'], {
+    cwd: useServer ? 'web/' : null,
+    stdio: 'inherit',
+  });
 
   log.success('npm 依赖安装成功');
 
+  if (useServer) process.chdir('web');
+
   /* prettier-ignore-start */
   console.log(
     chalk.yellow(
@@ -157,18 +233,26 @@ export const installDependencies = () => {
 
 export default async () => {
   // 拷贝模板到当前目录
+  let useServerAnswer = false;
   try {
     // 创建项目文件夹及文件
-    const answers = await getInitAnswers();
+    const baseAnswers = await getInitAnswers();
+    useServerAnswer = baseAnswers.useServer;
+    let serverAnswer: Object = {};
+    if (baseAnswers.useServer) {
+      serverAnswer = await inquirer.prompt(serverQuestion);
+    }
+    const answers = Object.assign(baseAnswers, serverAnswer);
     createProjectSync(answers);
   } catch (e) {
     log.error('项目模板创建失败');
     log.debug(e);
     throw e;
   }
+
   // 安装依赖
   try {
-    installDependencies();
+    installDependencies(useServerAnswer);
   } catch (e) {
     log.error('npm 依赖安装失败');
     log.error('请手动执行 tiny i 或 npm i');

packages/toolkits/pro/src/lib/interfaces.ts

@@ -13,4 +13,8 @@ export interface InitAnswers {
   description: string;
   framework: string;
   name: string;
+  useServer: boolean;
+  serverType: string;
+  port: string;
+  host: string;
 }

packages/toolkits/pro/template/tinyvue/package.json

@@ -28,7 +28,7 @@
     ]
   },
   "dependencies": {
-    "@opentiny/hwc-client": "^0.0.12",
+    "@opentiny/hwc-client": "^0.0.14",
     "@opentiny/vue": "^3.6.8",
     "@types/mockjs": "^1.0.4",
     "@vueuse/core": "^7.3.0",