Merge branch 'refactor'

.eslintrc.js

@@ -1,10 +1,10 @@
 const glob = require('glob');
 const path = require('path');
 const globals = {};
-const definitions = glob.sync('src/definitions/*.js');
+const definitions = glob.sync('src/**/*.definition.js');
 
-definitions.forEach(function (entry) {
-    let name = path.basename(entry, '.js');
+definitions.forEach(function (file) {
+    const name = path.basename(file).replace('.definition.js', '');
     globals[name] = true;
 });
 

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/src
 
 # local env files
 .env.local

README.md

@@ -12,12 +12,11 @@
 
 ## 项目功能
 - vue, vue-router, vuex, sass
-- [vue pages](./docs/usage/vue-pages.md)
+- [vue pages/multiple entry/多页面多入口功能](./docs/usage/multiple-entry.md)
 - [px to viewport](./docs/usage/px-to-viewport.md)
 - [px to rem](./docs/usage/px-to-rem.md)
 - [单 HTML 文件打包](./docs/usage/single-html.md)
-- [多入口文件](./docs/usage/multiple-entry.md)
-- [多路由文件](./docs/usage/multiple-router.md)
+- [multiple router/多路由文件功能](./docs/usage/multiple-router.md)
 - [全局插件并配置 eslint](./docs/usage/global-plugin.md)
 
 ## Project setup

docs/usage/global-plugin.md

@@ -1,18 +1,14 @@
 # 自动加载全局插件并配置 ESLint
 在开发中，我们需要用到一些全局插件，如 jQuery，自定义的全局库等。
-在 vue cli 中，这些是需要手动配置的，但在本框架中，只需要放入指定的位置即可。
+在 vue cli 中，这些是需要手动配置的，但在本框架中，只需要创建指定的文件即可。
 
-## 全局插件目录
-```
-/src/definitions
-```
-
-## 示例
+## 定义规则
+在 `src` 下任意目录创建 `{alias}.definition.js` 文件即可。
 
-### 添加全局 axios
-新建文件：`/src/definitions/axios.js`
+## 示例：axios
+新建文件：`/src/axios.definition.js`
 ```
-module.exports = require('../../modules/definitions/axios');
+module.exports = require('../modules/definitions/axios');
 ```
 
 页面中使用(无需引入包)：

docs/usage/multiple-entry.md

@@ -1,50 +1,13 @@
-# 多入口文件
+# 多入口多页面功能
 多入口文件，主要用于多页构建。
 
-但本脚手架中的入口文件不仅仅是多页构建，还包括动态多入口。
-
-脚手架的入口主要有三个：
-- 主入口
-- 自定义入口
-- 单页入口
-
-参考：
-```
-example/sample/entries/sample.js
-example/sample/single/sample/entry.js
-```
+本脚手架中的入口文件不仅仅是多页构建，还包括动态多入口。
 
 注意：多入口需要先开启环境变量
 ```
 PAGES_ENABLE=true
 ```
 
-## 主入口
-文件：
-```
-src/main.js
-```
-路由：
-```
-/
-```
-
-## 自定义入口
-文件：
-```
-src/entries/*.js
-```
-路由：
-```
-/html-page/*
-```
-
-## 单页入口
-文件：
-```
-src/single/*/entry.js
-```
-路由：
-```
-/html-single/*
-```
+脚手架的入口参考：
+- 主入口：参考 `src/main.js` 文件
+- 自定义入口：参考 `example/multiple-entry/page.options.js` 文件

docs/usage/multiple-router.md

@@ -1,32 +1,12 @@
-# 多路由文件
+# 多路由文件功能
 
-多路由功能可以完全的自定义路由，定义的路由放在 `src/router` 目录即可。
+多路由功能可以完全的自定义路由，只需要先引入 `modules/utils/router.js` 文件即可。
 
 定义的文件名命名规范为：`*.router.js`
 
 返回的数据要求是一个路由列表，参考：
 ```
-example/sample/router/sample.router.js
-modules/router/pages.router.js
-modules/router/single.router.js
-modules/router/testing.router.js
+example/multiple-router/pages.router.js
+example/multiple-router/single.router.js
+example/multiple-router/testing.router.js
 ```
-
-## 公有路由说明
-
-### pages.router.js
-定义了 `src/pages/{name}.vue` 的所有路由。
-
-路由访问：`/page/{name}`
-
-### single.router.js
-定义了 `src/single/*/index.vue` 的所有路由。
-
-路由访问：`/single/{name}`
-
-### testing.router.js
-定义了 `src/**/testing.vue` 的所有路由。
-
-路由访问：`/testing/{name}`
-
-这个路由用于写组件的测试文件。

example/multiple-entry/page.options.js

@@ -0,0 +1,10 @@
+module.exports = {
+    'multiple-entry-page1': {
+        entry: 'src/multiple-entry/page1.entry.js',
+        title: '测试多入口一',
+    },
+    'multiple-entry-page2': {
+        entry: 'src/multiple-entry/page2.entry.js',
+        title: '测试多入口二',
+    },
+};

example/sample/single/sample/entry.js → example/multiple-entry/page1.entry.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
-import App from './index.vue'
+import App from './page1.vue'
 
 Vue.config.productionTip = false;
 
-new Vue({
+let app = new Vue({
     render: h => h(App),
 }).$mount('#app');
+
+window.app = app;

example/multiple-entry/page1.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>MultipleEntryPage1</div>
+</template>

example/multiple-entry/page2.entry.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './page2.vue'
+
+Vue.config.productionTip = false;
+
+let app = new Vue({
+    render: h => h(App),
+}).$mount('#app');
+
+window.app = app;

example/multiple-entry/page2.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>MultipleEntryPage2</div>
+</template>

modules/build.js

@@ -36,53 +36,15 @@ function configure_single_html(config, options) {
 function get_pages_configure() {
     if (process.env.PAGES_ENABLE !== 'true') return {};
 
-    const pages = {
-        ...get_index_entry(),
-        ...get_page_entries(),
-        ...get_single_entries(),
-    };
-
-    return {pages: pages};
-}
-
-function get_index_entry() {
-    return {
-        "index": {
-            entry: 'src/main.js',
-        },
-    }
-}
-
-function get_page_entries() {
-    const pages = {};
-    const entries = glob.sync('src/entries/*.js');
+    const entries = glob.sync('src/**/page.options.js');
 
+    let pages = {};
     entries.forEach(function (entry) {
-        let name = path.basename(entry, '.js');
-        if (name[0] === '_') return;
-        name = 'html-page/' + name;
-        pages[name] = {
-            entry: entry,
-        }
+        const page = path.join(process.env.INIT_CWD, entry);
+        pages = Object.assign(pages, require(page));
     });
 
-    return pages;
-}
-
-function get_single_entries() {
-    const pages = {};
-    const entries = glob.sync('src/single/*/entry.js');
-
-    entries.forEach(function (entry) {
-        let name = entry.replace('/entry.js', '').replace(/(.+?)\//g, '');
-        name = 'html-single/' + name;
-        pages[name] = {
-            entry: entry,
-            inlineSource: '(.css|.js)',
-        }
-    });
-
-    return pages;
+    return {pages: pages};
 }
 
 function get_proxy_configure() {
@@ -103,24 +65,26 @@ function get_proxy_configure() {
         };
     }
 
-    return proxy;
+    return {proxy: proxy};
 }
 
-function get_definitions_configure() {
+function configure_definitions(config) {
     const options = {};
-    const files = glob.sync('src/definitions/*.js');
+    const files = glob.sync('src/**/*.definition.js');
 
     files.forEach(function (file) {
-        let name = path.basename(file, '.js');
+        const name = path.basename(file).replace('.definition.js', '');
         options[name] = require.resolve('../' + file);
     });
 
-    return options;
+    config.plugin().use(require.resolve('webpack/lib/ProvidePlugin'), [{
+        ...options,
+    }]);
 }
 
 module.exports = {
     configure_single_html,
     get_pages_configure,
     get_proxy_configure,
-    get_definitions_configure,
+    configure_definitions,
 };

modules/definitions/axios.js

@@ -1,4 +1,4 @@
-let axios = require("axios");
+const axios = require("axios");
 
 axios.defaults.timeout = 10000;
 axios.defaults.baseURL = process.env.VUE_APP_API_URI;

modules/definitions/utils.js

@@ -3,9 +3,12 @@ var Utils = (function () {
         this.debug = true;
     }
 
-    Utils.prototype.log = function (message) {
-        this.debug && window.console.log(message);
-    };
+    Utils.prototype.log = window.console.log;
+
+    Utils.prototype.error = window.console.error;
+
+    Utils.prototype.warn = window.console.warn;
+
     Utils.prototype.object_to_object = function (source, target) {
         if (!source) return;
         if (typeof (source) !== 'object') return;
@@ -18,6 +21,20 @@ var Utils = (function () {
             }
         });
     };
+
+    Utils.prototype.set_window_cache = function (name, value) {
+        if (!window.cache) window.cache = {};
+        window.cache[name] = value;
+    };
+
+    Utils.prototype.get_window_cache = function (name) {
+        if (!window.cache) return undefined;
+        if (name in window.cache) {
+            return window.cache[name];
+        } else {
+            return undefined;
+        }
+    };
     return Utils;
 }());
 

modules/dev/layout.scss → modules/development/layout.scss

@@ -1,4 +1,4 @@
-.dev {
+.development {
   .layout.block {
     background-color: red;