支持页面分类

Author: etheranl

README.md

@@ -1,20 +1,8 @@
-# grace-vue2-webpack-boilerplate
+# vue-template run on koa-grace
 
-> a boilerplate for vue-webpack-project run on [koa-grace](https://github.com/xiongwilee/koa-grace)
-
-
-## Documentation
-
-It's designed for [koa-grace](https://github.com/xiongwilee/koa-grace).
-
-Koa-grace is a new generation Nodejs SFB(Separation of Front and Back ends) framework.
-
-Make sure to read it!
-
-
-## Usage
-
-### Simple demo
+- 在使用之前请确保已阅读 [koa-grace](https://github.com/xiongwilee/koa-grace)的相关文档；
+- 基于[vuejs-templates](https://github.com/vuejs-templates/webpack)和[grace-vue-webpack-boilerplate](https://github.com/Thunf/grace-vue-webpack-boilerplate)，根据项目实际需求做了部分定制。
+## 使用方法
 
 ``` bash
 $ cd ~/fe/app/
@@ -23,42 +11,40 @@ $
 $ cd grace_boilerplate
 $ yarn install(recommended,or use npm install)
 $
-$ yarn run dev
-```
-
-
-### Custom
+$ npm run dev
 
-- clone this boilerplate to a new folder
-```bash
-$ cd ~/fe/app/
-$ git clone git@github.com:haoranw/grace-vue2-webpack-boilerplate.git <newFolderName>
 ```
-- replace all `grace_boilerplate` with `<newFolderName>` in this folder
-- install dependency & run dev
-```bash
-$ cd <newFolderName>
-$ yarn install(recommended,or use npm install)
-$ npm run dev
+新建页面：
 ```
+$ npm run auto
 
+依次输入项目名称和页面名称
+```
 
-## What's Included
-
-- `npm run dev`
-  - Webpack + `vue-loader` for single file Vue components.
-  - State preserving compilation error overlay
-  - Source maps
-
-- `npm run build`: Production ready build.
-  - JavaScript minified with [UglifyJS](https://github.com/mishoo/UglifyJS2).
-  - HTML copy with [copy-webpack-plugin](https://github.com/kevlened/copy-webpack-plugin).
-  - All static assets compiled with version hashes for efficient long-term caching, and a production `index.html` is auto-generated with template to these generated assets.
-
-
-## Fork It And Make Your Own
+## Why I made this
+- 随着项目内容的扩展，单个仓储内的vues文件越来越多。
+在以往的多入口构建方案中，并不支持页面的二级目录。在单个仓储内包含了多个项目的vues文件，并不能很好的区分它们属于哪一个项目模块。
+- 在本构建方案中，相关路径如下：
+```
+└── vues               
+    ├── _components     
+    ├── project1            // project1
+    └── project2            // project2
+        ├── page1           // page1入口
+        ├── page2
+        └── page3
+            ├── components
+            ├── index.js
+            ├── index.vue
+            └── router.js
+```
+- 为了配合此路径，在通过`npm run auto`来新建页面时需要输入项目名称。例如新建`project1/page1`，需要在运行命令之后依次输入`project1`、`page1`。
 
-You can fork this repo to create your own boilerplate, and run it on [koa-grace](https://github.com/xiongwilee/koa-grace)
 
-## Special Thanks
-A handsome single boy--[Thunf](https://github.com/Thunf)
+## Todo
+- [x] 新建页面时判断是否存在同名文件
+- [x] 新建页面时生成对应路径的controller
+- [x] 修改prefix配置，提高兼容性
+- [ ] 检测项目名称，必须输入已存在的项目名。独立新建项目的指令
+- [ ] 不同项目内的同名页面共存
+- [ ] 集成优化后的flexible && pxtorem的配置

build/auto_make/index.js

@@ -2,40 +2,35 @@
 
 const prompt = require('./prompt.js');
 const tools = require('./tools.js');
-let useVue;
-let isExist = false;
-let step2Text = '请给新建的业务页面命名：';
+let isExist = false,
+  project = '',
+  step2Text = '请给新建的业务页面命名：';
 
-function _step1 () {
-	prompt.readLine('新建的业务页面是否使用vue(y/n)？', function (data) {
-		if (data == 'y') {
-			useVue = true;
-			return true;
-		} else if (data == 'n') {
-			useVue = false;
-			return true;
-		}
-		return false;
-	});
+function _step1() {
+  prompt.readLine('输入项目名称:', function(data) {
+    if (tools.illegal(data)) {
+      step2Text = '项目名只能包含小写字母、数字和下划线，并不能以数字开头，请重新输入新建的业务页面名：'
+      return false
+    }
+    project = data + '/';
+    return true;
+  });
 }
 
-function _step2 () {
-	prompt.readLine(step2Text, function (data) {
-		if (tools.illegal(data)) {
-			step2Text = '业务页面名只能包含小写字母、数字和下划线，并不能以数字开头，请重新输入新建的业务页面名：'
-		} else if (tools.exist(data)) {
-			step2Text = data + '已存在，请重新输入新建的业务页面名：'
-			isExist = true;
-			return false;
-		} else {
-			step2Text = '';
-			tools.autoMake(useVue, data);
-			return true;
-		}
-	})
+function _step2() {
+  prompt.readLine(step2Text, function(data) {
+    if (tools.illegal(data)) {
+      step2Text = '业务页面名只能包含小写字母、数字和下划线，并不能以数字开头，请重新输入新建的业务页面名：'
+    } else if (tools.exist(data)) {
+      step2Text = data + '已存在，请重新输入新建的业务页面名：'
+      isExist = true;
+      return false;
+    } else {
+      step2Text = '';
+      tools.autoMake(project, data);
+      return true;
+    }
+  })
 }
 
-prompt.startStepByStep({
-	step1: _step1,
-	step2: _step2
-})
+prompt.startStepByStep({step1: _step1, step2: _step2})

build/auto_make/tools.js

@@ -6,102 +6,136 @@ require('shelljs/global');
 
 const controllerPath = path.resolve(__dirname, '../../controller/') + '/';
 const srcPath = path.resolve(__dirname, '../../vues/') + '/';
+function exec(cmd) {
+    return require('child_process').execSync(cmd).toString().trim()
+}
 
-let illegal = function (name) {
-	return !/^[a-z0-9_]+?$/.test(name) || /^\d/.test(name)
+let illegal = function(name) {
+    return !/^[a-z0-9_]+?$/.test(name) || /^\d/.test(name)
 }
 
-let exist = function (name) {
-	let controllers = glob.sync(controllerPath + '*.js').map(function (item) {
-		return item.split('/').pop().replace('.js', '');
-	});
-	let srcModules = glob.sync(srcPath + '*').map(function (item) {
-		return item.split('/').pop();
-	});
-	return controllers.concat(srcModules).indexOf(name) > -1;
+let exist = function(name) {
+    var dirList = exec(`cd ${srcPath} && ls`).split('\n');
+    let existNames = [];
+    dirList.map(function(i) {
+        let fileList = exec(`cd ${srcPath}${i} && ls`).split('\n');
+        fileList.map(function(files) {
+            existNames.push(files)
+        })
+    });
+    return existNames.indexOf(name) > -1;
 }
 
-let _autoMakeController = function (name) {
-fs.writeFileSync(controllerPath + name + '.js', `'use strict';
+let _autoMakeController = function(project, name) {
+    try {
+        fs.mkdirSync(controllerPath + project)
+    } catch (e) {}
+    fs.writeFileSync(controllerPath + project + name + '.js', `'use strict';
 
 exports.index = function*() {
     yield this.bindDefault();
 
-    yield this.render('module/${ name }', {
+    yield this.render('${name}', {
         siteInfo: this.siteInfo
     });
 }
 
 `);
 }
 
-let _autoMakeEntryJs = function (name) {
-let Name = name[0].toUpperCase() + name.slice(1);
+let _autoMakeEntryJs = function(project, name) {
+    let Name = name[0].toUpperCase() + name.slice(1);
 
-fs.writeFileSync(srcPath + name + '/index.js', `import Vue from 'vue'
+    fs.writeFileSync(srcPath + project + name + '/index.js', `// The Vue build version to load with the \`import\` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
 import VueRouter from 'vue-router'
 import VueResource from 'vue-resource'
-import { routes } from './router.js'
-/**
- * 添加需要import的组件
- */
+import routes from './router.js'
+import App from './index.vue'
 
-/**
- * 使用组件
- */
+// 初始化路由
+/* eslint-disable no-new */
+const router = new VueRouter(routes)
 
+// 置入组件
 Vue.use(VueRouter)
 Vue.use(VueResource)
 
-
-const router = new VueRouter({
-  routes
+new Vue({
+  /**
+   * 提供的元素只能作为挂载点。
+   * 不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。
+   * 因此不推荐挂载root实例到 <html> 或者 <body> 上。
+   */
+  el: '#app',
+  template: '<App/>',
+  components: { App },
+  /**
+   * 置入路由
+   */
+  router
 })
-
-const app = new Vue({
-  router,
-}).$mount('#app')
+/* eslint-enable no-new */
 `);
 }
 
-let _autoMakeEntryVue = function (name) {
-fs.mkdirSync(srcPath + name + '/components');
-fs.writeFileSync(srcPath + name + '/components/index.vue', `<template>
-  <div>
+let _autoMakeEntryVue = function(project, name) {
+    fs.mkdirSync(srcPath + project + name + '/components');
+    fs.writeFileSync(srcPath + project + name + '/index.vue', `<template>
+  <div id="${name}">
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
 export default {
-
+  name: '${name}',
+  components: {
+  }
 }
 </script>
 
 <style lang="less">
 </style>
-
 `);
-}
 
-let _autoMakeRouter = function (name) {
-fs.writeFileSync(srcPath + name + '/router.js', `import index from './components/index.vue';
+    fs.writeFileSync(srcPath + project + name + '/components/' + name + '.vue', `<template>
+  <div class="${name}">
+  </div>
+</template>
 
-export const routes = [
-  { path:'/', component: index }
-]
+<script>
+export default {
+  components: {
+  }
+}
+</script>
 
+<style lang="less">
+</style>
 `);
 }
 
+let _autoMakeRouter = function(project, name) {
+    fs.writeFileSync(srcPath + project + name + '/router.js', `module.exports = {
+  routes: [{
+    path: '/',
+    component: require('./components/${name}.vue')
+  }, {
+    path: '*',
+    redirect: '/'
+  }]
+}
+`);
+}
 
-let autoMake = function (useVue, name) {
-	_autoMakeController(name);
-	if (useVue) {
-		mkdir('-p', srcPath + name)
-		_autoMakeEntryJs(name);
-		_autoMakeEntryVue(name);
-		_autoMakeRouter(name);
-	}
+let autoMake = function(project, name) {
+    _autoMakeController(project, name);
+    mkdir('-p', srcPath + project + name)
+    _autoMakeEntryJs(project, name);
+    _autoMakeEntryVue(project, name);
+    _autoMakeRouter(project, name);
 }
 
 exports.illegal = illegal;