增加addpage addstore功能,readme

coderwhy · coderwhy · commit 5517c25e9b4c · 2020-10-21T15:13:00.000+08:00
diff --git a/lib/core/actions.js b/lib/core/actions.js
@@ -1,13 +1,14 @@
 const { promisify } = require('util');
 const path = require('path');
+const fs = require('fs');
 
 const program = require('commander');
 const downloadRepo = promisify(require('download-git-repo'));
 const open = require('open');
 
 const log = require('../utils/log');
 const terminal = require('../utils/terminal');
-const { ejsCompile, writeFile } = require('../utils/file');
+const { ejsCompile, writeFile, mkdirSync } = require('../utils/file');
 const repoConfig = require('../config/repo_config');
 
 const createProject = async (project, otherArg) => {
@@ -19,7 +20,7 @@ const createProject = async (project, otherArg) => {
 
   // 3.执行终端命令npm install
   // terminal.exec('npm install', {cwd: `./${project}`});
-  const npm = project.platform === 'win32' ? 'npm.cmd' : 'npm';
+  const npm = process.platform === 'win32' ? 'npm.cmd' : 'npm';
   await terminal.spawn(npm, ['install'], { cwd: `./${project}` });
 
   // 4.打开浏览器
@@ -29,19 +30,35 @@ const createProject = async (project, otherArg) => {
   await terminal.spawn(npm, ['run', 'serve'], { cwd: `./${project}` });
 }
 
-const addComponent = async (name) => {
-  console.log(name, program.dest);
-
+const handleEjsToFile = async (name, dest, template, filename) => {
   // 1.获取模块引擎的路径
-  const templatePath = path.resolve(__dirname, '../template/component.vue.ejs');
-  const result = await ejsCompile(templatePath, {name});
+  const templatePath = path.resolve(__dirname, template);
+  const result = await ejsCompile(templatePath, {name, lowerName: name.toLowerCase()});
 
   // 2.写入文件中
-  const targetPath = path.resolve(program.dest, `${name}.vue`);
+  // 判断文件不存在,那么就创建文件
+  mkdirSync(dest);
+  const targetPath = path.resolve(dest, filename);
   writeFile(targetPath, result);
 }
 
+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 addStore = async (name, dest) => {
+  handleEjsToFile(name, dest, '../template/vue-store.js.ejs', 'index.js')
+  handleEjsToFile(name, dest, '../template/vue-types.js.ejs', 'types.js')
+}
+
 module.exports = {
   createProject,
-  addComponent
+  addComponent,
+  addPage,
+  addStore
 }
diff --git a/lib/core/create.js b/lib/core/create.js
@@ -2,7 +2,9 @@ const program = require('commander');
 
 const {
   createProject,
-  addComponent
+  addComponent,
+  addPage,
+  addStore
 } = require('./actions');
 
 const createCommands = () => {
@@ -14,13 +16,27 @@ const createCommands = () => {
 
   program
     .command('addcpn <name>')
-    .description('add vue component, 例如: coderwhy addcpn NavBar -d src/components')
-    .action(addComponent)
+    .description('add vue component, 例如: coderwhy addcpn NavBar [-d src/components]')
+    .action(name => addComponent(name, program.dest || 'src/components'))
+
+  program
+    .command('addpage <name>')
+    .description('add vue page, 例如: coderwhy addpage Home [-d dest]')
+    .action(name => {
+      addPage(name, program.dest || `src/pages/${name.toLowerCase()}`)
+    })
+
+  program
+    .command('addstore <name>')
+    .description('add vue store, 例如: coderwhy addstore favor [-d dest]')
+    .action(name => {
+      addStore(name, program.dest || `src/store/modules/${name.toLowerCase()}`)
+    })
 
   program.command('test').action(() => {
     // terminal.spawn("npm", ['--version']);
     // terminal.exec("npm --version");
-    // open('http://localhost:8080/');
+    // open('http://localhost:8080/');`
   })
 }
 
diff --git a/lib/template/component.vue.ejs b/lib/template/component.vue.ejs
@@ -1,6 +1,6 @@
 <%_ if(data) { _%>
 <template>
-  <div class="<%= data.name %>">
+  <div class="<%= data.lowerName %>">
     <h2>{{ message }}</h2>
   </div>
 </template>
@@ -36,7 +36,7 @@
 </script>
 
 <style scoped>
-  .<%= data.name %> {
+  .<%= data.lowerName %> {
     
   }
 </style>
diff --git a/lib/template/test.vue b/lib/template/test.vue
diff --git a/lib/template/vue-router.js.ejs b/lib/template/vue-router.js.ejs
@@ -0,0 +1,13 @@
+<%_ if (data) { _%>
+// 普通加载路由
+// import <%= data.name %> from './<%= data.name %>.vue'
+// 懒加载路由
+const <%= data.name %> = () => import('./<%= data.name %>.vue')
+export default {
+  path: '/<%= data.lowerName %>',
+  name: '<%= data.name %>',
+  component: <%= data.name %>,
+  children: [
+  ]
+}
+<%_ } _%>
diff --git a/lib/template/vue-store.js.ejs b/lib/template/vue-store.js.ejs
@@ -0,0 +1,12 @@
+import * as types from './types.js'
+export default {
+  namespaced: true,
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  getters: {
+  }
+}
diff --git a/lib/template/vue-types.js.ejs b/lib/template/vue-types.js.ejs
@@ -0,0 +1,3 @@
+export {
+  
+}
diff --git a/lib/utils/file.js b/lib/utils/file.js
@@ -1,4 +1,5 @@
 const fs = require('fs');
+const path = require('path');
 const ejs = require('ejs');
 
 const log = require('./log');
@@ -23,7 +24,21 @@ const writeFile = (path, content) => {
   return fs.promises.writeFile(path, content);
 }
 
+const mkdirSync = (dirname) => {
+  if (fs.existsSync(dirname)) {
+    return true
+  } else {
+    // 不存在,判断父亲文件夹是否存在？
+    if (mkdirSync(path.dirname(dirname))) {
+      // 存在父亲文件，就直接新建该文件
+      fs.mkdirSync(dirname)
+      return true
+    }
+  }
+}
+
 module.exports = {
   ejsCompile,
-  writeFile
+  writeFile,
+  mkdirSync
 }
diff --git a/package.json b/package.json
@@ -1,17 +1,22 @@
 {
   "name": "coderwhy",
-  "version": "1.0.0",
-  "description": "a front end helper tools",
+  "version": "1.1.0",
+  "description": "CLI front-end development tools",
   "main": "index.js",
   "bin": {
     "coderwhy": "index.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "keywords": ["vue", "react", "CLI", "component"],
+  "author": "coderwhy",
+  "license": "MIT",
+  "homepage": "https://github.com/coderwhy/coderwhy",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/coderwhy/coderwhy"
+  },
   "dependencies": {
     "chalk": "^4.1.0",
     "commander": "^6.1.0",
diff --git a/readme.md b/readme.md
@@ -0,0 +1,101 @@
+# 说明文档
+## `coderwhy`: 一个帮助你快速搭建和开发前端项目的CLI
+
+> 想不起来其他名字，以这个命名吧~
+
+## 创建项目
+
+目前支持Vue，后期会支持React，Angular考虑中~
+
+vue项目模块已经帮你配置：
+
+* 常用的目录结构（你可以在此基础上修改）
+* vue.config.js（其中配置了别名，你可以自行修改和配置更多）
+* axios（网络请求axios的安装以及二次封装）
+* vue-router（router的安装和配置，另外有路由的动态加载，后面详细说明）
+* vuex（vuex的安装和配置，另外有动态加载子模块，后面详细说明）
+
+创建项目
+
+```shell
+coderwhy create your_project_name
+```
+
+自动拉取项目模板、安装项目依赖、打开浏览器 `http://localhost:8080/`、自动启动项目
+
+
+
+## 项目开发
+
+项目开发目前提供三个功能：
+
+* 创建Vue组件
+* 创建Vue页面，并配置路由
+* 创建Vuex子模块
+
+
+
+### 创建Vue组件：
+
+````shell
+coderwhy addcpn YourComponentName # 例如coderwhy add NavBar，默认会存放到src/components文件夹中
+coderwhy addcpn YourComponentName -d src/pages/home # 也可以指定存放的具体文件夹
+````
+
+
+
+### 创建Vue页面，并配置路由
+
+```shell
+coderwhy addpage YourPageName # 例如coderwhy addpage Home，默认会放到src/pages/home/Home.vue中，并且会创建src/page/home/router.js
+coderwhy addpage YourPageName -d src/views # 也可以指定文件夹，但需要手动集成路由
+```
+
+为什么会创建router.js文件：
+
+* `router.js`文件是路由的其中一个配置；
+* 创建该文件中 `src/router/index.js`中会自动加载到路由的 `routes`配置中，不需要手动配置了（如果是自己配置的文件夹需要手动配置）
+
+`src/router/index.js`中已经完成如下操作：
+
+```js
+// 动态加载pages中所有的路由文件
+const files = require.context('@/pages', true, /router\.js$/);
+const routes = files.keys().map(key => {
+  const page = require('@/pages' + key.replace('.', ''));
+  return page.default;
+})
+```
+
+
+
+### 创建Vuex子模块
+
+```shell
+coderwhy addstore YourVuexChildModuleName # 例如coderwhy addstore home，默认会放到src/store/modules/home/index.js和types.js
+coderwhy addstore YourVuexChildModuleName -d src/vuex/modules # 也可以指定文件夹
+```
+
+创建完成后，不需要手动配置，已经动态将所有子模块集成进去：
+
+```js
+// 动态加载modules
+const modules = {}
+const files = require.context('./', true, /index\.js$/);
+files.keys().filter(key => {
+  if (key === './index.js') return false;
+  return true
+}).map(key => {  
+  // 获取名字
+  const modulePath = key.replace('./modules/', '');
+  const moduleName = modulePath.replace('/index.js', '');
+  const module = require(`${key}`);
+
+  modules[`${moduleName}`] = module.default;
+})
+```
+
+
+
+
+
