first commit

衣莎项目/源码/tsvue/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

衣莎项目/源码/tsvue/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+./memo.txt
+src
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

衣莎项目/源码/tsvue/.pydio

@@ -0,0 +1 @@
+e4117210-60ab-4514-ad92-feecd0b7a6af

衣莎项目/源码/tsvue/README.md

@@ -0,0 +1,77 @@
+# 1：Vue3Template
+
+使用Vue-cli3，并基于 Vue3.0 Composition-Api + TypeScript 改造搭建的基础项目骨架(符合我的使用习惯)，可以直接下载运行。
+
+快来感受Vue3.0的魅力吧...
+
+- 1: Vue3.0 Composition-Api 访问地址：[https://github.com/vuejs/composition-api](https://github.com/vuejs/composition-api)
+- 2: TypeScript 中文网：[https://www.tslang.cn/docs/home.html](https://www.tslang.cn/docs/home.html)
+
+## 运行
+```
+# 1：下载
+git clone https://github.com/helpcode/Vue3Template.git
+
+# 2：运行
+npm run serve
+
+# 3：打包构建-发布
+npm run build
+```
+
+## 2：项目结构
+
+项目的大致结构如下，具体更详细的请自行看源码！！！
+
+```
+├── dist                            打包后用于部署到服务器上的版本
+├── public                          公共静态资源，图片，字体体积较大的放这！！
+└── src
+    ├── application                 项目的页面组件部分
+    │   ├── assets                  较小的且需要被webpack处理的资源放这！！
+    │   │   └── stylus              stylus 样式
+    │   │       ├── color           公共全局样色
+    │   │       ├── common          公共css
+    │   │       ├── components      页面样式
+    │   │       └── mixin           公共css方法
+    │   ├── components              Vue公共组件
+    │   └── page                    Vue页面组件
+    └── core                    
+        ├── config                  站点的核心配置文件，必看代码
+        ├── dao                     Axios的封装
+        ├── decorators              【已被抽离项目作为单独包】自定义的一些注解
+        ├── directive               Vue自定义指令
+        ├── hooks                   Vue3 hooks
+        ├── mixin                   Vue自定义mixin
+        ├── run                     项目的启动配置/启动文件
+        ├── service                 Ajax请求的中间层，实现接口规范，主要给组件页面调用
+        │   └── impl                接口的具体实现逻辑
+        ├── types                   一些Typescript的声明文件
+        └── utils                   公共方法
+```
+
+## 3：注解包
+
+这里不做篇幅介绍了，已实现的注解被抽离出去作为了一个单独的`npm`包，可以使用`npm`进行安装然后使用，具体注解用法看下面链接：
+
+> vue3decorators 项目地址：[https://www.npmjs.com/package/vue3decorators](https://www.npmjs.com/package/vue3decorators)
+
+## 4：自动生成路由配置
+
+借鉴 [Nuxt.js](https://zh.nuxtjs.org/) 的路由源码实现，可以根据存放Vue-Router页面的文件夹结构自动生成Vue-Router配置文件。
+
+> 插件包地址：[https://www.npmjs.com/package/vue-cli-plugin-autorouter](https://www.npmjs.com/package/vue-cli-plugin-autorouter)
+
+## 4：项目运行思路
+
+- 1: `vue.config.js` 中 `config.entry.app = './src/core/run/index.ts';` 设置了程序的入口文件，程序从这启动！
+- 2: `class Index` 继承 父类 `Init`, 这里 `index.ts` 只负责做初始化`Vue`的工作，所有的Vue参数插件等具体装载都在`init.ts`中
+- 3: `init.ts` 主要负责装载`Vue`和非`Vue`插件，`Vue Mixin`，`vue Directive`，`Vue-Router`等工作。而`init.ts`用到的一系列东西大部分都从`config/index.ts`中来。
+- 4: `config/index.ts`很核心，例如我们要安装UI框架`Vant`，那么请安装后再`config/index.ts`中导入，然后修改静态属性`VuePlugs`即可。具体请看代码，其它类似指令都类似。
+
+额....好像就没有了，简单很。可以自己按照上面思路来看代码，代码里面都有注释。
+
+**对了，记得看`src/application/page/Home.vue`里面的代码，还就是配置文件: `vue.config.js`也记得看下！**
+
+## 5：Vue3.0 学习文档
+

衣莎项目/源码/tsvue/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+};

衣莎项目/源码/tsvue/gulpfile.js

@@ -0,0 +1,23 @@
+const gulp = require('gulp');
+const exec = require('child_process').exec;
+
+/**
+ * 自动执行 vue-cli-service route 命令进行路由编译
+ */
+gulp.task('AutoCompileRouter',  function(cb) {
+    return exec('npm run route', function (err, stdout, stderr) {
+        if (err) {
+            console.log("编译失败: ", err)
+            cb(err)
+        } else {
+            console.log("编译成功");
+        }
+    });
+});
+
+//
+gulp.task('auto', function () {
+    gulp.watch('src/application/page/**/*', gulp.parallel('AutoCompileRouter'));
+});
+
+gulp.task('default', gulp.parallel('auto'));

衣莎项目/源码/tsvue/jsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+        "@/*": ["src/application"],
+        "@core/*": ["src/core"],
+        "@assets/*": ["src/application/assets"]
+      },
+      "target": "ES6",
+      "module": "commonjs",
+      "allowSyntheticDefaultImports": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules"]
+}

衣莎项目/源码/tsvue/memo.txt

@@ -0,0 +1,34 @@
+【实现】1: 指令的实现可以考虑采用注解的方式实现
+
+  思路：
+    1: decorators/ 文件夹实现一个注解，可以放在 directive 的方法上
+    2: 注解收集到方法名，作为指令名，方法函数作为处理函数，然后保存到数组
+    3: init.ts 初始化文件中加载数组自动装入Vue中
+
+【实现】2: 通过注解实现mixin自动注入
+
+【实现】3: 非Vue插件也使用注解进行全局注入并挂载到Vue原型上。
+
+【未实现/放弃】4：简化init.run.ts注入运行类过程
+
+  状态：尝试过了，不行，已放弃....
+
+【实现】5：浏览器控制台console启动的Banner和vue-cli-plugin-autorouter合并到一起，作为一个插件包。
+
+【实现】6：简化 @GET，@POST等注解，去除参数，用方法名作为ApiList的Key。
+
+【实现】7：每次添加新的组件时，都需要手动执行命令 vue-cli-service route 进而重新生成路由配置文件，对懒人而言，太TM麻烦了！！
+
+        解决思路：
+
+          1：使用 gulp，监听 /src/application/page 文件夹，当发生文件的增，删，改的时候都在后台自动执行命令 vue-cli-service route
+          2：vue-cli-service route 会重新生成配置文件，然后 vue-cli-service serve 会自动重启当前网站
+          3：开发者只需要手动刷新一下页面，新路由配置即刻生效。
+
+【未实现】8：完善vue-cli-plugin-autorouter，继续实现可以自定义参数，并能够作为单独的依赖包被使用到其他Vue项目上。
+
+        问题：如果要能在其他Vue项目上也被使用，那么现在的插件包就不能基于 vue-cli-service，因为Vue cli 2.x 或者其他手配的
+             Vue项目没有，vue-cli-service。
+             所以需要脱离vue-cli-service作为一个单独的 nodejs 包，才可以实现所有Vue项目全部通用。
+
+【实现】9：cli脚手架一键创建项目

衣莎项目/源码/tsvue/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "tsvue",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "concurrently \"npm run route && npm run serve\"  \"gulp\" ",
+    "serve": "NODE_ENV=dev vue-cli-service serve",
+    "build": "NODE_ENV=production vue-cli-service build",
+    "route": "vue-cli-service route"
+  },
+  "dependencies": {
+    "@vue/composition-api": "^0.3.4",
+    "amfe-flexible": "^2.2.1",
+    "axios": "^0.19.2",
+    "html2canvas": "^1.0.0-rc.5",
+    "vant": "^2.5.0",
+    "vue": "^2.6.11",
+    "vue-router": "^3.1.5"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.2.0",
+    "@vue/cli-plugin-typescript": "^4.2.0",
+    "@vue/cli-service": "^4.2.0",
+    "babel-plugin-import": "^1.13.0",
+    "compression-webpack-plugin": "^3.1.0",
+    "concurrently": "^5.1.0",
+    "core-js": "^3.6.4",
+    "glob": "^7.1.3",
+    "gulp": "^4.0.2",
+    "less": "^3.11.1",
+    "less-loader": "^5.0.0",
+    "pify": "^4.0.1",
+    "postcss-pxtorem": "^4.0.1",
+    "pug-html-loader": "^1.1.5",
+    "pug-plain-loader": "^1.0.0",
+    "reflect-metadata": "^0.1.13",
+    "style-resources-loader": "^1.3.3",
+    "typescript": "~3.7.5",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "vue-cli-plugin-autorouter": "^1.2.6",
+    "vue-template-compiler": "^2.6.11",
+    "vue3decorators": "^1.2.4"
+  }
+}

衣莎项目/源码/tsvue/postcss.config.js

@@ -0,0 +1,18 @@
+
+module.exports = {
+    plugins: {
+        'autoprefixer': {
+            overrideBrowserslist: [
+                'Android 4.1',
+                'iOS 7.1',
+                'Chrome > 31',
+                'ff > 31',
+                'ie >= 8'
+            ]
+        },
+        'postcss-pxtorem': {
+            rootValue: 75,
+            propList: ['*']
+        }
+    }
+}

衣莎项目/源码/tsvue/public/.pydio

@@ -0,0 +1 @@
+e9fd524f-42a5-4483-b2a3-710801bb4ef2

衣莎项目/源码/tsvue/public/font/.pydio

@@ -0,0 +1 @@
+1c924073-3623-4f00-a438-62916774412f

衣莎项目/源码/tsvue/public/img/.pydio

@@ -0,0 +1 @@
+dea57cb6-45c6-4c7a-930e-e8cdbf69c8ca

衣莎项目/源码/tsvue/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+    <% } %>
+  </body>
+</html>

衣莎项目/源码/tsvue/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

衣莎项目/源码/tsvue/vue.config.js

@@ -0,0 +1,172 @@
+const isProduction = process.env.NODE_ENV === 'production';
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const CompressionPlugin = require('compression-webpack-plugin');
+const path = require('path');
+
+// 公共性配置，可以自定义修改
+const PublicConfig = {
+  // 入口
+  entry: './src/core/run/index.run.ts',
+  // 别名
+  alias: {
+    public: 'public',
+    core: 'src/core',
+    impl: 'src/core/service/impl',
+    root: 'src/application',
+    assets: 'src/application/assets',
+    less: 'src/application/assets/stylus/components',
+    globalStyl: './src/application/assets/stylus/imports.less'
+  }
+};
+
+// vue项目打包上线后会使用这里的css，js，减少打包后的项目体积。
+const cdn = {
+  css: [],
+  js: [
+      'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js',
+      'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
+      'https://cdn.bootcss.com/axios/0.19.2/axios.min.js',
+  ]
+};
+
+module.exports = {
+  publicPath: './',
+  filenameHashing: true,
+  productionSourceMap: false,
+  parallel: require('os').cpus().length > 1,
+  lintOnSave: false,
+  pluginOptions: {
+    route: {
+      param: '传参数给內建插件'
+    }
+  },
+  devServer: {
+    hot: true,
+    hotOnly: true,
+    host: '0.0.0.0',
+    port: 9000,
+    compress: true,
+    open: true,
+    openPage: '#/',
+    overlay: {
+      warnings: true,
+      errors: true,
+    }
+  },
+  configureWebpack: (config) => {
+    // 设置程序核心入口
+    config.entry.app = PublicConfig.entry;
+
+    if (isProduction) {
+
+      /**
+       * 去除这些公共包，让webpack不打包到项目源码的js中，减小项目js体积
+       * 然后使用cdn 数组里面的资源外链来引入。
+       */
+      config.externals = {
+        'vue': 'Vue',
+        'vue-router': 'VueRouter',
+        'axios': 'axios',
+      };
+
+      /**
+       * 部署阶段 代码压缩
+       */
+      config.plugins.push(
+        // 生产环境自动删除 console，如果需要显示 console 请修改
+        // drop_console 为 false
+        new UglifyJsPlugin({
+          uglifyOptions: {
+            compress: {
+              warnings: false,
+              drop_debugger: true,
+              drop_console: true,
+            },
+          },
+          sourceMap: false,
+          parallel: true,
+        }),
+      );
+
+      /**
+       * Gzip压缩，开启 BundleAnalyzerPlugin（分析打包后的js文件体积）
+       */
+      config.mode = 'production';
+      return {
+        plugins: [
+          new CompressionPlugin({
+            test: /\.js$|\.html$|\.css/, //匹配文件名
+            threshold: 10240, //对超过10k的数据进行压缩
+            deleteOriginalAssets: false //是否删除原文件
+          }),
+          new BundleAnalyzerPlugin(),
+        ]
+      }
+    }
+
+  },
+  chainWebpack: (config) => {
+
+     // 生产环境配置
+     if (isProduction) {
+      // 生产环境注入cdn
+      config.plugin('html')
+        .tap(args => {
+          args[0].cdn = cdn;
+          return args;
+        });
+    }
+
+    /**
+     * 移除不必要的 prefetch 和 preload请求
+     */
+    config.plugins.delete('prefetch');
+    config.plugins.delete('preload');
+
+    /**
+     * html 模板引擎 pug 配置
+     */
+    config.module.rule('pug')
+      .test(/\.pug$/)
+      .use('pug-html-loader')
+      .loader('pug-html-loader')
+      .end();
+
+    /**
+     * 导入全局css
+     * @type {*[]}
+     */
+    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
+    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)));
+
+
+    /**
+     * 配置路径别名，项目中引用资源的时候路径可以更简短
+     * 但是ts文件在用的时候，编译器会报错，需要添加 @ts-ignore
+     * 忽略开发工具的错误。
+     */
+    config.resolve.alias
+      .set('@public', resolve(PublicConfig.alias.public))
+      .set('@core', resolve(PublicConfig.alias.core))
+      .set('@', resolve(PublicConfig.alias.root))
+      .set('@assets', resolve(PublicConfig.alias.assets))
+      .set('@less', resolve(PublicConfig.alias.less))
+      .set('@impl', resolve(PublicConfig.alias.impl))
+  }
+
+};
+
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+
+function addStyleResource(rule) {
+  rule.use('style-resource')
+    .loader('style-resources-loader')
+    .options({
+      patterns: [
+        path.resolve(__dirname, PublicConfig.alias.globalStyl)
+      ],
+    });
+}