first commit

This commit is contained in:
编码猿
2024-09-27 00:58:46 +08:00
commit 92916abf8f
156 changed files with 19331 additions and 0 deletions

2
tsvue/.browserslistrc Normal file
View File

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

22
tsvue/.gitignore vendored Normal file
View File

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

1
tsvue/.pydio Normal file
View File

@@ -0,0 +1 @@
ff6b35d1-5690-47d0-a0e9-b9e1ade44fdc

82
tsvue/README.md Normal file
View File

@@ -0,0 +1,82 @@
# 1Vue3Template
使用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)
## 5tsvue3-cli 脚手架
一键创建 `Vue3Template`项目,更加快速的享受编码的乐趣。
> 插件包地址:[https://www.npmjs.com/package/tsvue3-cli](https://www.npmjs.com/package/tsvue3-cli)
## 6项目运行思路
- 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
tsvue/babel.config.js Normal file
View File

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

1
tsvue/build/.pydio Normal file
View File

@@ -0,0 +1 @@
a6b359f5-33a6-4d08-90b1-2ac337507262

72
tsvue/build/dev.js Normal file
View File

@@ -0,0 +1,72 @@
const path = require('path');
const VariableConfig = require('./variable');
/**
* 开发阶段的一些基础配置
*/
class DevConfig {
constructor(chainWebpack) {
this.chainWebpack = chainWebpack;
this.pubSetting();
}
pubSetting() {
/**
* 移除不必要的 prefetch 和 preload请求
*/
this.chainWebpack.plugins.delete('prefetch');
this.chainWebpack.plugins.delete('preload');
/**
* html 模板引擎 pug 配置
*/
this.chainWebpack.module.rule('pug')
.test(/\.pug$/)
.use('pug-html-loader')
.loader('pug-html-loader')
.end();
this.chainWebpack.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, { limit: 10240 }));
/**
* 导入全局css
* @type {*[]}
*/
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
types.forEach(type => this.addStyleResource(this.chainWebpack.module.rule('less').oneOf(type)));
/**
* 配置路径别名,项目中引用资源的时候路径可以更简短
* 但是ts文件在用的时候编译器会报错需要添加 @ts-ignore
* 忽略开发工具的错误。
*/
this.chainWebpack.resolve.alias
.set('@public', this.resolve(VariableConfig.PublicConfig.alias.public))
.set('@core', this.resolve(VariableConfig.PublicConfig.alias.core))
.set('@', this.resolve(VariableConfig.PublicConfig.alias.root))
.set('@assets', this.resolve(VariableConfig.PublicConfig.alias.assets))
.set('@less', this.resolve(VariableConfig.PublicConfig.alias.less))
.set('@impl', this.resolve(VariableConfig.PublicConfig.alias.impl))
}
addStyleResource(rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, VariableConfig.PublicConfig.alias.globalStyl)
],
});
}
resolve(dir) {
return path.join(__dirname, dir);
}
}
module.exports = DevConfig;

72
tsvue/build/prod.js Normal file
View File

@@ -0,0 +1,72 @@
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const CompressionPlugin = require('compression-webpack-plugin');
const VariableConfig = require('./variable');
/**
* 正式阶段的一些配置
*/
class ProdConfig {
constructor(configureWebpack) {
this.configureWebpack = configureWebpack
this.RemoveCommonPackage();
this.CompressedCode();
this.GzipCompressedCode();
}
/**
* 去除这些公共包让webpack不打包到项目源码的js中减小项目js体积
* 然后使用cdn 数组里面的资源外链来引入。
*/
RemoveCommonPackage() {
this.configureWebpack.externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
};
}
/**
* 部署阶段 代码压缩
*/
CompressedCode() {
this.configureWebpack.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文件体积
*/
GzipCompressedCode() {
this.configureWebpack.mode = 'production';
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
}),
new BundleAnalyzerPlugin(),
]
}
}
}
module.exports = ProdConfig;

25
tsvue/build/variable.js Normal file
View File

@@ -0,0 +1,25 @@
// 基础变量配置
module.exports = {
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/less/components',
globalStyl: '../src/application/assets/less/imports.less'
}
},
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',
]
}
};

4
tsvue/build/zip Normal file
View File

@@ -0,0 +1,4 @@
#!/usr/bin/env node
require('compressing').zip.compressDir('dist/', 'dist.zip')
.then(() => console.log('zip Success'))
.catch(err => console.error(err));

1
tsvue/dist/.pydio vendored Normal file
View File

@@ -0,0 +1 @@
e66e0c37-8305-4c6e-a54e-dcb568a3deed

1
tsvue/dist/css/.pydio vendored Normal file
View File

@@ -0,0 +1 @@
2550847f-7b6f-402a-9b76-8ea246f9f9b2

1
tsvue/dist/css/about.9e5e16dc.css vendored Normal file
View File

@@ -0,0 +1 @@
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html[data-v-00d9bb7c]{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body[data-v-00d9bb7c]{margin:0;line-height:1.5;font-size:.37333rem;font-weight:400;width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#fafafa;color:rgba(0,0,0,.87)}li[data-v-00d9bb7c]{list-style:none}article[data-v-00d9bb7c],aside[data-v-00d9bb7c],footer[data-v-00d9bb7c],header[data-v-00d9bb7c],nav[data-v-00d9bb7c],section[data-v-00d9bb7c]{display:block}h1[data-v-00d9bb7c]{font-size:2em;margin:.67em 0}figcaption[data-v-00d9bb7c],figure[data-v-00d9bb7c],main[data-v-00d9bb7c]{display:block}figure[data-v-00d9bb7c]{margin:1em 1.06667rem}hr[data-v-00d9bb7c]{box-sizing:content-box;height:0;overflow:visible}pre[data-v-00d9bb7c]{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap;word-break:break-all;margin:0}a[data-v-00d9bb7c]{text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}a[data-v-00d9bb7c]:active,a[data-v-00d9bb7c]:hover{outline-width:0}abbr[title][data-v-00d9bb7c]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b[data-v-00d9bb7c],strong[data-v-00d9bb7c]{font-weight:inherit;font-weight:bolder}code[data-v-00d9bb7c],kbd[data-v-00d9bb7c],samp[data-v-00d9bb7c]{font-family:monospace,monospace;font-size:1em}dfn[data-v-00d9bb7c]{font-style:italic}mark[data-v-00d9bb7c]{background-color:#ff0;color:#000}small[data-v-00d9bb7c]{font-size:80%}sub[data-v-00d9bb7c],sup[data-v-00d9bb7c]{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub[data-v-00d9bb7c]{bottom:-.25em}sup[data-v-00d9bb7c]{top:-.5em}audio[data-v-00d9bb7c],video[data-v-00d9bb7c]{display:inline-block}audio[data-v-00d9bb7c]:not([controls]){display:none;height:0}img[data-v-00d9bb7c]{border-style:none}svg[data-v-00d9bb7c]:not(:root){overflow:hidden}button[data-v-00d9bb7c],input[data-v-00d9bb7c],optgroup[data-v-00d9bb7c],select[data-v-00d9bb7c],textarea[data-v-00d9bb7c]{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button[data-v-00d9bb7c],input[data-v-00d9bb7c]{overflow:visible}button[data-v-00d9bb7c],select[data-v-00d9bb7c]{text-transform:none}[type=reset][data-v-00d9bb7c],[type=submit][data-v-00d9bb7c],button[data-v-00d9bb7c],html [type=button][data-v-00d9bb7c]{-webkit-appearance:button}[type=button][data-v-00d9bb7c]::-moz-focus-inner,[type=reset][data-v-00d9bb7c]::-moz-focus-inner,[type=submit][data-v-00d9bb7c]::-moz-focus-inner,button[data-v-00d9bb7c]::-moz-focus-inner{border-style:none;padding:0}[type=button][data-v-00d9bb7c]:-moz-focusring,[type=reset][data-v-00d9bb7c]:-moz-focusring,[type=submit][data-v-00d9bb7c]:-moz-focusring,button[data-v-00d9bb7c]:-moz-focusring{outline:.02667rem dotted ButtonText}fieldset[data-v-00d9bb7c]{border:.02667rem solid silver;margin:0 .05333rem;padding:.35em .625em .75em}legend[data-v-00d9bb7c]{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress[data-v-00d9bb7c]{display:inline-block;vertical-align:baseline}textarea[data-v-00d9bb7c]{overflow:auto;resize:vertical}[type=checkbox][data-v-00d9bb7c],[type=radio][data-v-00d9bb7c]{box-sizing:border-box;padding:0}[type=number][data-v-00d9bb7c]::-webkit-inner-spin-button,[type=number][data-v-00d9bb7c]::-webkit-outer-spin-button{height:auto}[type=search][data-v-00d9bb7c]{-webkit-appearance:textfield;outline-offset:-.05333rem}[type=search][data-v-00d9bb7c]::-webkit-search-cancel-button,[type=search][data-v-00d9bb7c]::-webkit-search-decoration{-webkit-appearance:none}[data-v-00d9bb7c]::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details[data-v-00d9bb7c],menu[data-v-00d9bb7c]{display:block}summary[data-v-00d9bb7c]{display:list-item}canvas[data-v-00d9bb7c]{display:inline-block}[hidden][data-v-00d9bb7c],template[data-v-00d9bb7c]{display:none}h1[data-v-00d9bb7c]{color:#ff0}

File diff suppressed because one or more lines are too long

3
tsvue/dist/css/index.ac99156d.css vendored Normal file
View File

@@ -0,0 +1,3 @@
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html[data-v-76ad04b1]{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body[data-v-76ad04b1]{margin:0;line-height:1.5;font-size:.37333rem;font-weight:400;width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#fafafa;color:rgba(0,0,0,.87)}li[data-v-76ad04b1]{list-style:none}article[data-v-76ad04b1],aside[data-v-76ad04b1],footer[data-v-76ad04b1],header[data-v-76ad04b1],nav[data-v-76ad04b1],section[data-v-76ad04b1]{display:block}h1[data-v-76ad04b1]{font-size:2em;margin:.67em 0}figcaption[data-v-76ad04b1],figure[data-v-76ad04b1],main[data-v-76ad04b1]{display:block}figure[data-v-76ad04b1]{margin:1em 1.06667rem}hr[data-v-76ad04b1]{box-sizing:content-box;height:0;overflow:visible}pre[data-v-76ad04b1]{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap;word-break:break-all;margin:0}a[data-v-76ad04b1]{text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}a[data-v-76ad04b1]:active,a[data-v-76ad04b1]:hover{outline-width:0}abbr[title][data-v-76ad04b1]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b[data-v-76ad04b1],strong[data-v-76ad04b1]{font-weight:inherit;font-weight:bolder}code[data-v-76ad04b1],kbd[data-v-76ad04b1],samp[data-v-76ad04b1]{font-family:monospace,monospace;font-size:1em}dfn[data-v-76ad04b1]{font-style:italic}mark[data-v-76ad04b1]{background-color:#ff0;color:#000}small[data-v-76ad04b1]{font-size:80%}sub[data-v-76ad04b1],sup[data-v-76ad04b1]{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub[data-v-76ad04b1]{bottom:-.25em}sup[data-v-76ad04b1]{top:-.5em}audio[data-v-76ad04b1],video[data-v-76ad04b1]{display:inline-block}audio[data-v-76ad04b1]:not([controls]){display:none;height:0}img[data-v-76ad04b1]{border-style:none}svg[data-v-76ad04b1]:not(:root){overflow:hidden}button[data-v-76ad04b1],input[data-v-76ad04b1],optgroup[data-v-76ad04b1],select[data-v-76ad04b1],textarea[data-v-76ad04b1]{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button[data-v-76ad04b1],input[data-v-76ad04b1]{overflow:visible}button[data-v-76ad04b1],select[data-v-76ad04b1]{text-transform:none}[type=reset][data-v-76ad04b1],[type=submit][data-v-76ad04b1],button[data-v-76ad04b1],html [type=button][data-v-76ad04b1]{-webkit-appearance:button}[type=button][data-v-76ad04b1]::-moz-focus-inner,[type=reset][data-v-76ad04b1]::-moz-focus-inner,[type=submit][data-v-76ad04b1]::-moz-focus-inner,button[data-v-76ad04b1]::-moz-focus-inner{border-style:none;padding:0}[type=button][data-v-76ad04b1]:-moz-focusring,[type=reset][data-v-76ad04b1]:-moz-focusring,[type=submit][data-v-76ad04b1]:-moz-focusring,button[data-v-76ad04b1]:-moz-focusring{outline:.02667rem dotted ButtonText}fieldset[data-v-76ad04b1]{border:.02667rem solid silver;margin:0 .05333rem;padding:.35em .625em .75em}legend[data-v-76ad04b1]{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress[data-v-76ad04b1]{display:inline-block;vertical-align:baseline}textarea[data-v-76ad04b1]{overflow:auto;resize:vertical}[type=checkbox][data-v-76ad04b1],[type=radio][data-v-76ad04b1]{box-sizing:border-box;padding:0}[type=number][data-v-76ad04b1]::-webkit-inner-spin-button,[type=number][data-v-76ad04b1]::-webkit-outer-spin-button{height:auto}[type=search][data-v-76ad04b1]{-webkit-appearance:textfield;outline-offset:-.05333rem}[type=search][data-v-76ad04b1]::-webkit-search-cancel-button,[type=search][data-v-76ad04b1]::-webkit-search-decoration{-webkit-appearance:none}[data-v-76ad04b1]::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details[data-v-76ad04b1],menu[data-v-76ad04b1]{display:block}summary[data-v-76ad04b1]{display:list-item}canvas[data-v-76ad04b1]{display:inline-block}[hidden][data-v-76ad04b1],template[data-v-76ad04b1]{display:none}h3[data-v-76ad04b1]{margin:1.06667rem 0 0}
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html[data-v-37acbc26]{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body[data-v-37acbc26]{margin:0;line-height:1.5;font-size:.37333rem;font-weight:400;width:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:#fafafa;color:rgba(0,0,0,.87)}li[data-v-37acbc26]{list-style:none}article[data-v-37acbc26],aside[data-v-37acbc26],footer[data-v-37acbc26],header[data-v-37acbc26],nav[data-v-37acbc26],section[data-v-37acbc26]{display:block}h1[data-v-37acbc26]{font-size:2em;margin:.67em 0}figcaption[data-v-37acbc26],figure[data-v-37acbc26],main[data-v-37acbc26]{display:block}figure[data-v-37acbc26]{margin:1em 1.06667rem}hr[data-v-37acbc26]{box-sizing:content-box;height:0;overflow:visible}pre[data-v-37acbc26]{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap;word-break:break-all;margin:0}a[data-v-37acbc26]{text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}a[data-v-37acbc26]:active,a[data-v-37acbc26]:hover{outline-width:0}abbr[title][data-v-37acbc26]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b[data-v-37acbc26],strong[data-v-37acbc26]{font-weight:inherit;font-weight:bolder}code[data-v-37acbc26],kbd[data-v-37acbc26],samp[data-v-37acbc26]{font-family:monospace,monospace;font-size:1em}dfn[data-v-37acbc26]{font-style:italic}mark[data-v-37acbc26]{background-color:#ff0;color:#000}small[data-v-37acbc26]{font-size:80%}sub[data-v-37acbc26],sup[data-v-37acbc26]{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub[data-v-37acbc26]{bottom:-.25em}sup[data-v-37acbc26]{top:-.5em}audio[data-v-37acbc26],video[data-v-37acbc26]{display:inline-block}audio[data-v-37acbc26]:not([controls]){display:none;height:0}img[data-v-37acbc26]{border-style:none}svg[data-v-37acbc26]:not(:root){overflow:hidden}button[data-v-37acbc26],input[data-v-37acbc26],optgroup[data-v-37acbc26],select[data-v-37acbc26],textarea[data-v-37acbc26]{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button[data-v-37acbc26],input[data-v-37acbc26]{overflow:visible}button[data-v-37acbc26],select[data-v-37acbc26]{text-transform:none}[type=reset][data-v-37acbc26],[type=submit][data-v-37acbc26],button[data-v-37acbc26],html [type=button][data-v-37acbc26]{-webkit-appearance:button}[type=button][data-v-37acbc26]::-moz-focus-inner,[type=reset][data-v-37acbc26]::-moz-focus-inner,[type=submit][data-v-37acbc26]::-moz-focus-inner,button[data-v-37acbc26]::-moz-focus-inner{border-style:none;padding:0}[type=button][data-v-37acbc26]:-moz-focusring,[type=reset][data-v-37acbc26]:-moz-focusring,[type=submit][data-v-37acbc26]:-moz-focusring,button[data-v-37acbc26]:-moz-focusring{outline:.02667rem dotted ButtonText}fieldset[data-v-37acbc26]{border:.02667rem solid silver;margin:0 .05333rem;padding:.35em .625em .75em}legend[data-v-37acbc26]{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress[data-v-37acbc26]{display:inline-block;vertical-align:baseline}textarea[data-v-37acbc26]{overflow:auto;resize:vertical}[type=checkbox][data-v-37acbc26],[type=radio][data-v-37acbc26]{box-sizing:border-box;padding:0}[type=number][data-v-37acbc26]::-webkit-inner-spin-button,[type=number][data-v-37acbc26]::-webkit-outer-spin-button{height:auto}[type=search][data-v-37acbc26]{-webkit-appearance:textfield;outline-offset:-.05333rem}[type=search][data-v-37acbc26]::-webkit-search-cancel-button,[type=search][data-v-37acbc26]::-webkit-search-decoration{-webkit-appearance:none}[data-v-37acbc26]::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details[data-v-37acbc26],menu[data-v-37acbc26]{display:block}summary[data-v-37acbc26]{display:list-item}canvas[data-v-37acbc26]{display:inline-block}[hidden][data-v-37acbc26],template[data-v-37acbc26]{display:none}h2[data-v-37acbc26]{color:red}p[data-v-37acbc26]{font-size:.50667rem}

BIN
tsvue/dist/favicon.ico vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

1
tsvue/dist/img/.pydio vendored Normal file
View File

@@ -0,0 +1 @@
177a874c-3090-4c2d-b147-d4ee0bace377

BIN
tsvue/dist/img/logo.82b9c7a5.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
tsvue/dist/img/logo.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

1
tsvue/dist/index.html vendored Normal file
View File

@@ -0,0 +1 @@
<!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"><link rel=icon href=favicon.ico><link href=css/chunk-vendors.ca93d528.css rel=stylesheet></head><body><noscript><strong>We're sorry but tsvue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js></script><script src=https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js></script><script src=https://cdn.bootcss.com/axios/0.19.2/axios.min.js></script><script src=js/chunk-vendors.57a59dbc.js></script><script src=js/app.bfef82a2.js></script></body></html>

1
tsvue/dist/js/.pydio vendored Normal file
View File

@@ -0,0 +1 @@
6dd9e7db-d7cf-4b85-a1eb-832e4455de84

1
tsvue/dist/js/about.7b6e1759.js vendored Normal file
View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([["about"],{"1e21":function(t,e,n){"use strict";var c=n("2850");n.n(c).a},2850:function(t,e,n){},"584e":function(t,e,n){"use strict";n.r(e);var c=n("5530"),u=(n("96cf"),n("1da1")),o=n("750b"),a=Object(o.a)({props:{},setup:function(t,e){var n=Object(o.f)({title:Object(o.g)("关于我页面"),count:Object(o.g)(0)}),a=Object(o.g)("张三");return Object(o.d)(Object(u.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:case 1:case"end":return t.stop()}}),t)})))),Object(c.a)({},Object(o.h)(n),{Test:a,addCount:function(){n.count+=1}})}}),r=(n("1e21"),n("2877")),s=n("8148"),i=n.n(s),b=Object(r.a)(a,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"about"},[n("h1",{on:{click:t.addCount}},[t._v(t._s(t.title))]),n("p",[t._v(t._s(t.count))]),n("p",[t._v("Test: "+t._s(t.Test))])])}),[],!1,null,"00d9bb7c",null);"function"==typeof i.a&&i()(b),e.default=b.exports},8148:function(t,e){}}]);

1
tsvue/dist/js/app.bfef82a2.js vendored Normal file

File diff suppressed because one or more lines are too long

45
tsvue/dist/js/chunk-vendors.57a59dbc.js vendored Normal file

File diff suppressed because one or more lines are too long

1
tsvue/dist/js/index.c70d4b6b.js vendored Normal file
View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([["index"],{"0b51":function(e,t,n){"use strict";n.r(t);var r,a,c,i=n("5530"),o=(n("96cf"),n("1da1")),u=n("b650"),s=n("750b"),p=(n("d3b7"),n("d4ec")),d=n("bee2"),f=n("9ab4"),l=n("659f"),b=function(){function e(){Object(p.a)(this,e)}return Object(d.a)(e,[{key:"index",value:function(){var e=Object(o.a)(regeneratorRuntime.mark((function e(t){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()},{key:"haha",value:function(){var e=Object(o.a)(regeneratorRuntime.mark((function e(t){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()},{key:"Login",value:function(){var e=Object(o.a)(regeneratorRuntime.mark((function e(t){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()}]),e}();Object(f.__decorate)([Object(l.GET)(),Object(f.__metadata)("design:type",Function),Object(f.__metadata)("design:paramtypes",[Object]),Object(f.__metadata)("design:returntype","function"==typeof(r="undefined"!=typeof Promise&&Promise)?r:Object)],b.prototype,"index",null),Object(f.__decorate)([Object(l.POST)(),Object(f.__metadata)("design:type",Function),Object(f.__metadata)("design:paramtypes",[Object]),Object(f.__metadata)("design:returntype","function"==typeof(a="undefined"!=typeof Promise&&Promise)?a:Object)],b.prototype,"haha",null),Object(f.__decorate)([Object(l.PUT)(),Object(f.__metadata)("design:type",Function),Object(f.__metadata)("design:paramtypes",[Object]),Object(f.__metadata)("design:returntype","function"==typeof(c="undefined"!=typeof Promise&&Promise)?c:Object)],b.prototype,"Login",null);var m=new b,O=Object(s.a)({name:"hello-word",props:{title:{type:String,default:"HelloWorld 子组件的默认Props值"}},setup:function(){}}),j=(n("cbec"),n("2877")),_=Object(j.a)(O,(function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"hello"},[t("h1",[this._v(this._s(this.title))])])}),[],!1,null,"76ad04b1",null).exports,v=Object(s.a)({name:"index",props:{},filters:{gets:function(e){return e+" | 过滤器"}},setup:function(e,t){Object(s.c)("Broadcast");var n=Object(s.f)({title:Object(s.g)("首页"),list:Object(s.g)([])});Object(s.d)(Object(o.a)(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t.root.$setTitle("测试"),e.next=3,m.haha({name:"bmy",age:[18,19,17]});case 3:e.sent;case 5:case"end":return e.stop()}}),e)}))));var r=function(){var e=Object(o.a)(regeneratorRuntime.mark((function e(){var t;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,m.index({id:1,page:1});case 2:t=e.sent,n.list=t.result;case 5:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}();return Object(i.a)({},Object(s.h)(n),{loadData:r})},components:{"v-hellowold":_,Button:u.a}}),g=(n("8e1f"),n("a89a")),h=n.n(g),y=Object(j.a)(v,(function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"home"},[r("img",{attrs:{alt:"Vue logo",src:n("c780")}}),r("h2",{directives:[{name:"index",rawName:"v-index",value:200,expression:"200"}]},[e._v(e._s(e._f("gets")(e.title)))]),r("p",{directives:[{name:"test",rawName:"v-test"}]},[e._v("请打开控制台查看更多")]),r("v-hellowold",{attrs:{title:"父向子传递数据"}}),r("Button",{attrs:{type:"primary"},on:{click:e.loadData}},[e._v("点击请求数据")]),r("ul",e._l(e.list,(function(t,n){return r("li",{key:n},[r("p",[e._v(e._s(t.id)+" : "+e._s(t.name))])])})),0)],1)}),[],!1,null,"37acbc26",null);"function"==typeof h.a&&h()(y),t.default=y.exports},"3bb4":function(e,t,n){},"4b6d":function(e,t,n){},"8e1f":function(e,t,n){"use strict";var r=n("4b6d");n.n(r).a},a89a:function(e,t){},c780:function(e,t,n){e.exports=n.p+"img/logo.82b9c7a5.png"},cbec:function(e,t,n){"use strict";var r=n("3bb4");n.n(r).a}}]);

1
tsvue/dist/js/user.f1653b87.js vendored Normal file
View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([["user"],{"9b15":function(t,e,s){"use strict";s.r(e);var n=s("5530"),i=s("750b"),c=Object(i.a)({props:{},setup:function(t,e){var s=Object(i.f)({title:Object(i.g)("用户中心")});return Object(n.a)({},Object(i.h)(s))}}),r=s("2877"),u=s("f862"),a=s.n(u),o=Object(r.a)(c,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"user-list"},[e("h1",[this._v(this._s(this.title))]),e("router-view")],1)}),[],!1,null,"0354f574",null);"function"==typeof a.a&&a()(o),e.default=o.exports},f862:function(t,e){}}]);

1
tsvue/dist/js/user_id.a0612f10.js vendored Normal file
View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([["user_id"],{"0eef":function(t,e,n){"use strict";n.r(e);var s=n("5530"),c=n("750b"),i=Object(c.a)({props:{},setup:function(t,e){var n=Object(c.f)({title:Object(c.g)("用户详情页面")});return Object(s.a)({},Object(c.h)(n))}}),u=n("2877"),r=n("f52d"),a=n.n(r),f=Object(u.a)(i,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"user-info"},[e("h1",[this._v(this._s(this.title))])])}),[],!1,null,"7edc454c",null);"function"==typeof a.a&&a()(f),e.default=f.exports},f52d:function(t,e){}}]);

1
tsvue/dist/js/userindex.0f146701.js vendored Normal file
View File

@@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([["userindex"],{"04e9":function(t,e,n){"use strict";n.r(e);var i=n("5530"),s=n("750b"),c=Object(s.a)({props:{},setup:function(t,e){var n=Object(s.f)({title:Object(s.g)("用户index页面")});return Object(i.a)({},Object(s.h)(n))}}),u=n("2877"),r=n("b32f"),a=n.n(r),o=Object(u.a)(c,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"user-info"},[e("h1",[this._v(this._s(this.title))])])}),[],!1,null,"14d773d8",null);"function"==typeof a.a&&a()(o),e.default=o.exports},b32f:function(t,e){}}]);

25
tsvue/gulpfile.js Normal file
View File

@@ -0,0 +1,25 @@
const gulp = require('gulp');
const exec = require('child_process').exec;
/**
* 执行 vue-cli-service route 命令进行路由编译
*/
gulp.task('AutoCompileRouter', function(cb) {
return exec('npm run route', (err, stdout, stderr) => {
if (err) {
console.log("编译失败: ", err);
cb(err)
} else {
console.log("编译成功");
}
});
});
/**
* 监听 page 所有文件的修改,自动触发 AutoCompileRouter 任务
*/
gulp.task('auto', function () {
gulp.watch('src/application/page/**/*', gulp.parallel('AutoCompileRouter'));
});
gulp.task('default', gulp.parallel('auto'));

15
tsvue/jsconfig.json Normal file
View File

@@ -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"]
}

34
tsvue/memo.txt Normal file
View File

@@ -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
2vue-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项目全部通用。
【实现】9cli脚手架一键创建项目

13862
tsvue/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

44
tsvue/package.json Normal file
View File

@@ -0,0 +1,44 @@
{
"name": "tsvue",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "concurrently \"npm run route && npm run serve\" \"gulp\" ",
"serve": "cross-env NODE_ENV=dev vue-cli-service serve",
"build": "cross-env NODE_ENV=production vue-cli-service build && node ./build/zip",
"route": "vue-cli-service route"
},
"dependencies": {
"@vue/composition-api": "^0.3.4",
"amfe-flexible": "^2.2.1",
"axios": "^0.19.2",
"js-md5": "^0.7.3",
"vant": "^2.5.0",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"weixin-js-sdk": "^1.4.0-test"
},
"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",
"pug-html-loader": "^1.1.5",
"pug-plain-loader": "^1.0.0",
"reflect-metadata": "^0.1.13",
"style-resources-loader": "^1.3.3",
"uglifyjs-webpack-plugin": "^1.1.1",
"typescript": "~3.9.3",
"vue-template-compiler": "^2.6.11",
"vue-cli-plugin-autorouter": "^1.3.3",
"vue3decorators": "^1.2.6"
}
}

1
tsvue/public/.pydio Normal file
View File

@@ -0,0 +1 @@
1793136b-5bfc-453f-b558-8f4a373a3114

BIN
tsvue/public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

1
tsvue/public/font/.pydio Normal file
View File

@@ -0,0 +1 @@
4c591313-31d6-4621-aba7-bd370ed50da2

1
tsvue/public/img/.pydio Normal file
View File

@@ -0,0 +1 @@
519f4ac5-7319-4146-ba2d-2fb1df09f1d2

BIN
tsvue/public/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

19
tsvue/public/index.html Normal file
View File

@@ -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">
<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>

1
tsvue/src/.pydio Normal file
View File

@@ -0,0 +1 @@
f74b83ff-edd8-4aca-851f-bb4dd4c2a4a4

View File

@@ -0,0 +1 @@
c64556f5-462f-4e5c-b30b-ec23e77fe440

View File

@@ -0,0 +1,28 @@
<template lang="pug">
#app
#nav
router-link(to='/') Home |
router-link(to='/about') About
router-view
</template>
<script lang="ts">
import { toRefs, Ref, ref, reactive, createComponent, provide, onMounted, SetupContext } from '@vue/composition-api';
//@ts-ignore
import { HelpingPopupMessageChannel } from '@core/hooks/MessageChannel.hooks';
export default createComponent({
setup() {
// 向所有组件共享 广播,避免所有页面都导入文件
provide("Broadcast", HelpingPopupMessageChannel());
onMounted(() => {});
}
});
</script>
<style lang="less">
/* 导入全局css样式 */
@import "~@assets/less/common/normalize";
</style>

View File

@@ -0,0 +1 @@
4d715ade-7441-4c5f-bab9-4f0aab8e8c15

View File

@@ -0,0 +1 @@
069b2d07-7f2f-40ad-900b-419eac4f814b

View File

@@ -0,0 +1 @@
7db75ead-4586-483c-abc8-69f29a7bdecb

View File

@@ -0,0 +1,309 @@
// 公共css样式可以在 页面组件中直接使用变量名称
// 具体看 components/home.styl
@theme-color: red;
@test-color: yellow;
@red50: #ffebee;
@red100: #ffcdd2;
@red200: #ef9a9a;
@red300: #e57373;
@red400: #ef5350;
@red500: #f44336;
@red600: #e53935;
@red700: #d32f2f;
@red800: #c62828;
@red900: #b71c1c;
@redA100: #ff8a80;
@redA200: #ff5252;
@redA400: #ff1744;
@redA700: #d50000;
@red: @red500;
@pink50: #fce4ec;
@pink100: #f8bbd0;
@pink200: #f48fb1;
@pink300: #f06292;
@pink400: #ec407a;
@pink500: #e91e63;
@pink600: #d81b60;
@pink700: #c2185b;
@pink800: #ad1457;
@pink900: #880e4f;
@pinkA100: #ff80ab;
@pinkA200: #ff4081;
@pinkA400: #f50057;
@pinkA700: #c51162;
@pink: @pink500;
@purple50: #f3e5f5;
@purple100: #e1bee7;
@purple200: #ce93d8;
@purple300: #ba68c8;
@purple400: #ab47bc;
@purple500: #9c27b0;
@purple600: #8e24aa;
@purple700: #7b1fa2;
@purple800: #6a1b9a;
@purple900: #4a148c;
@purpleA100: #ea80fc;
@purpleA200: #e040fb;
@purpleA400: #d500f9;
@purpleA700: #aa00ff;
@purple: @purple500;
@deepPurple50: #ede7f6;
@deepPurple100: #d1c4e9;
@deepPurple200: #b39ddb;
@deepPurple300: #9575cd;
@deepPurple400: #7e57c2;
@deepPurple500: #673ab7;
@deepPurple600: #5e35b1;
@deepPurple700: #512da8;
@deepPurple800: #4527a0;
@deepPurple900: #311b92;
@deepPurpleA100: #b388ff;
@deepPurpleA200: #7c4dff;
@deepPurpleA400: #651fff;
@deepPurpleA700: #6200ea;
@deepPurple: @deepPurple500;
@indigo50: #e8eaf6;
@indigo100: #c5cae9;
@indigo200: #9fa8da;
@indigo300: #7986cb;
@indigo400: #5c6bc0;
@indigo500: #3f51b5;
@indigo600: #3949ab;
@indigo700: #303f9f;
@indigo800: #283593;
@indigo900: #1a237e;
@indigoA100: #8c9eff;
@indigoA200: #536dfe;
@indigoA400: #3d5afe;
@indigoA700: #304ffe;
@indigo: @indigo500;
@blue50: #e3f2fd;
@blue100: #bbdefb;
@blue200: #90caf9;
@blue300: #64b5f6;
@blue400: #42a5f5;
@blue500: #2196f3;
@blue600: #1e88e5;
@blue700: #1976d2;
@blue800: #1565c0;
@blue900: #0d47a1;
@blueA100: #82b1ff;
@blueA200: #448aff;
@blueA400: #2979ff;
@blueA700: #2962ff;
@blue: @blue500;
@lightBlue50: #e1f5fe;
@lightBlue100: #b3e5fc;
@lightBlue200: #81d4fa;
@lightBlue300: #4fc3f7;
@lightBlue400: #29b6f6;
@lightBlue500: #03a9f4;
@lightBlue600: #039be5;
@lightBlue700: #0288d1;
@lightBlue800: #0277bd;
@lightBlue900: #01579b;
@lightBlueA100: #80d8ff;
@lightBlueA200: #40c4ff;
@lightBlueA400: #00b0ff;
@lightBlueA700: #0091ea;
@lightBlue: @lightBlue500;
@cyan50: #e0f7fa;
@cyan100: #b2ebf2;
@cyan200: #80deea;
@cyan300: #4dd0e1;
@cyan400: #26c6da;
@cyan500: #00bcd4;
@cyan600: #00acc1;
@cyan700: #0097a7;
@cyan800: #00838f;
@cyan900: #006064;
@cyanA100: #84ffff;
@cyanA200: #18ffff;
@cyanA400: #00e5ff;
@cyanA700: #00b8d4;
@cyan: @cyan500;
@teal50: #e0f2f1;
@teal100: #b2dfdb;
@teal200: #80cbc4;
@teal300: #4db6ac;
@teal400: #26a69a;
@teal500: #009688;
@teal600: #00897b;
@teal700: #00796b;
@teal800: #00695c;
@teal900: #004d40;
@tealA100: #a7ffeb;
@tealA200: #64ffda;
@tealA400: #1de9b6;
@tealA700: #00bfa5;
@teal: @teal500;
@green50: #e8f5e9;
@green100: #c8e6c9;
@green200: #a5d6a7;
@green300: #81c784;
@green400: #66bb6a;
@green500: #4caf50;
@green600: #43a047;
@green700: #388e3c;
@green800: #2e7d32;
@green900: #1b5e20;
@greenA100: #b9f6ca;
@greenA200: #69f0ae;
@greenA400: #00e676;
@greenA700: #00c853;
@green: @green500;
@lightGreen50: #f1f8e9;
@lightGreen100: #dcedc8;
@lightGreen200: #c5e1a5;
@lightGreen300: #aed581;
@lightGreen400: #9ccc65;
@lightGreen500: #8bc34a;
@lightGreen600: #7cb342;
@lightGreen700: #689f38;
@lightGreen800: #558b2f;
@lightGreen900: #33691e;
@lightGreenA100: #ccff90;
@lightGreenA200: #b2ff59;
@lightGreenA400: #76ff03;
@lightGreenA700: #64dd17;
@lightGreen: @lightGreen500;
@lime50: #f9fbe7;
@lime100: #f0f4c3;
@lime200: #e6ee9c;
@lime300: #dce775;
@lime400: #d4e157;
@lime500: #cddc39;
@lime600: #c0ca33;
@lime700: #afb42b;
@lime800: #9e9d24;
@lime900: #827717;
@limeA100: #f4ff81;
@limeA200: #eeff41;
@limeA400: #c6ff00;
@limeA700: #aeea00;
@lime: @lime500;
@yellow50: #fffde7;
@yellow100: #fff9c4;
@yellow200: #fff59d;
@yellow300: #fff176;
@yellow400: #ffee58;
@yellow500: #ffeb3b;
@yellow600: #fdd835;
@yellow700: #fbc02d;
@yellow800: #f9a825;
@yellow900: #f57f17;
@yellowA100: #ffff8d;
@yellowA200: #ffff00;
@yellowA400: #ffea00;
@yellowA700: #ffd600;
@yellow: @yellow500;
@amber50: #fff8e1;
@amber100: #ffecb3;
@amber200: #ffe082;
@amber300: #ffd54f;
@amber400: #ffca28;
@amber500: #ffc107;
@amber600: #ffb300;
@amber700: #ffa000;
@amber800: #ff8f00;
@amber900: #ff6f00;
@amberA100: #ffe57f;
@amberA200: #ffd740;
@amberA400: #ffc400;
@amberA700: #ffab00;
@amber: @amber500;
@orange50: #fff3e0;
@orange100: #ffe0b2;
@orange200: #ffcc80;
@orange300: #ffb74d;
@orange400: #ffa726;
@orange500: #ff9800;
@orange600: #fb8c00;
@orange700: #f57c00;
@orange800: #ef6c00;
@orange900: #e65100;
@orangeA100: #ffd180;
@orangeA200: #ffab40;
@orangeA400: #ff9100;
@orangeA700: #ff6d00;
@orange: @orange500;
@deepOrange50: #fbe9e7;
@deepOrange100: #ffccbc;
@deepOrange200: #ffab91;
@deepOrange300: #ff8a65;
@deepOrange400: #ff7043;
@deepOrange500: #ff5722;
@deepOrange600: #f4511e;
@deepOrange700: #e64a19;
@deepOrange800: #d84315;
@deepOrange900: #bf360c;
@deepOrangeA100: #ff9e80;
@deepOrangeA200: #ff6e40;
@deepOrangeA400: #ff3d00;
@deepOrangeA700: #dd2c00;
@deepOrange: @deepOrange500;
@brown50: #efebe9;
@brown100: #d7ccc8;
@brown200: #bcaaa4;
@brown300: #a1887f;
@brown400: #8d6e63;
@brown500: #795548;
@brown600: #6d4c41;
@brown700: #5d4037;
@brown800: #4e342e;
@brown900: #3e2723;
@brown: @brown500;
@blueGrey50: #eceff1;
@blueGrey100: #cfd8dc;
@blueGrey200: #b0bec5;
@blueGrey300: #90a4ae;
@blueGrey400: #78909c;
@blueGrey500: #607d8b;
@blueGrey600: #546e7a;
@blueGrey700: #455a64;
@blueGrey800: #37474f;
@blueGrey900: #263238;
@blueGrey: @blueGrey500;
@grey50: #fafafa;
@grey100: #f5f5f5;
@grey200: #eeeeee;
@grey300: #e0e0e0;
@grey400: #bdbdbd;
@grey500: #9e9e9e;
@grey600: #757575;
@grey700: #616161;
@grey800: #424242;
@grey900: #212121;
@grey: @grey500;
@black: #000000;
@white: #ffffff;
@transparent: rgba(0, 0, 0, 0);
@fullBlack: rgba(0, 0, 0, 1);
@darkBlack: rgba(0, 0, 0, 0.87);
@lightBlack: rgba(0, 0, 0, 0.54);
@minBlack: rgba(0, 0, 0, 0.26);
@faintBlack: rgba(0, 0, 0, 0.12);
@fullWhite: rgba(255, 255, 255, 1);
@darkWhite: rgba(255, 255, 255, 0.87);
@lightWhite: rgba(255, 255, 255, 0.54);

View File

@@ -0,0 +1 @@
832fd82a-000e-4751-8e35-b8e9bfa0c542

View File

@@ -0,0 +1 @@
@import "rem";

View File

@@ -0,0 +1,458 @@
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
body {
max-width: 540px;
min-width: 320px;
line-height: 1.5;
font-size: 14px;
font-weight: 400;
width: 100%;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
background-color: #fafafa;
color: rgba(0, 0, 0, 0.87);
margin: 0 auto;
}
li {
list-style: none;
}
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
white-space: pre-wrap;
word-break: break-all;
margin: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
text-decoration: none;
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
user-select: none;
-webkit-user-select: none;
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
resize: vertical;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}

View File

@@ -0,0 +1,16 @@
@vm_fontsize: 75;
@vm_design: 750;
.rem(@px) {
@result: (@px / @vm_fontsize ) * 1rem;
}
html {
font-size: (@vm_fontsize / (@vm_design / 2) ) * 100vw;
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}

View File

@@ -0,0 +1 @@
0bf6e505-10c1-41c2-b883-be6e7ba069bd

View File

@@ -0,0 +1,3 @@
h1 {
color: @test-color;
}

View File

@@ -0,0 +1,8 @@
h2 {
color: @theme-color;
position: relative;
.ellipsis()
}
p {
font-size: 0.2rem;
}

View File

@@ -0,0 +1,6 @@
// 公共css
@import "./common/index";
// 颜色配置
@import "./color/index";
// 公共css 方法
@import "./mixin/index";

View File

@@ -0,0 +1 @@
8648a010-76a3-45eb-843e-e1595a305452

View File

@@ -0,0 +1,276 @@
.clearfix() {
&:after,
&:before {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.hairline(@position, @color) when (@position = top) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(50% 0%);
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = left) {
&:before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: auto;
right: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(0% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
.hairline(@position, @color) when (@position = bottom) {
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: auto;
top: auto;
height: 1px;
width: 100%;
background-color: @color;
display: block;
z-index: 15;
html.pixel-ratio-2 & {
.transform(scaleY(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleY(0.33));
}
}
}
.hairline(@position, @color) when (@position = right) {
&:after {
content: '';
position: absolute;
right: 0;
top: 0;
left: auto;
bottom: auto;
width: 1px;
height: 100%;
background-color: @color;
display: block;
z-index: 15;
// .transform-origin(100% 50%);
html.pixel-ratio-2 & {
.transform(scaleX(0.5));
}
html.pixel-ratio-3 & {
.transform(scaleX(0.33));
}
}
}
// For right and bottom
.hairline-remove(@position) when not (@position = left) and not (@position = top) {
&:after {
display: none;
}
}
// For left and top
.hairline-remove(@position) when not (@position = right) and not (@position = bottom) {
&:before {
display: none;
}
}
// For right and bottom
.hairline-color(@position, @color) when not (@position = left) and not (@position = top) {
&:after {
background-color: @color;
}
}
// For left and top
.hairline-color(@position, @color) when not (@position = right) and not (@position = bottom) {
&:before {
background-color: @color;
}
}
// Encoded SVG Background
.encoded-svg-background(@svg) {
@url: `encodeURIComponent(@{svg})`;
background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
}
// Preserve3D
.preserve3d() {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
// Shadow
.depth(@level:1) {
& when (@level = 0) {
box-shadow: none;
}
& when (@level = 1) {
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
}
& when (@level = 2) {
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
}
& when (@level = 3) {
box-shadow: 0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12);
}
& when (@level = 4) {
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
}
& when (@level = 5) {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
}
& when (@level = 6) {
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
}
& when (@level = 7) {
box-shadow: 0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12);
}
& when (@level = 8) {
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
}
& when (@level = 9) {
box-shadow: 0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12);
}
& when (@level = 10) {
box-shadow: 0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12);
}
& when (@level = 11) {
box-shadow: 0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12);
}
& when (@level = 12) {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12);
}
& when (@level = 13) {
box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
}
& when (@level = 14) {
box-shadow: 0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12);
}
& when (@level = 15) {
box-shadow: 0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12);
}
& when (@level = 16) {
box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);
}
& when (@level = 17) {
box-shadow: 0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12);
}
& when (@level = 18) {
box-shadow: 0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12);
}
& when (@level = 19) {
box-shadow: 0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12);
}
& when (@level = 20) {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12);
}
& when (@level = 21) {
box-shadow: 0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12);
}
& when (@level = 22) {
box-shadow: 0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12);
}
& when (@level = 23) {
box-shadow: 0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12);
}
& when (@level = 24) {
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
}
// & when (@level = 1) {
// box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
// }
// & when (@level = 2) {
// box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
// }
// & when (@level = 3) {
// box-shadow: rgba(0, 0, 0, 0.188235) 0px 10px 30px, rgba(0, 0, 0, 0.227451) 0px 6px 10px;
// }
// & when (@level = 4) {
// box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;
// }
// & when (@level = 5) {
// box-shadow: rgba(0, 0, 0, 0.298039) 0px 19px 60px, rgba(0, 0, 0, 0.219608) 0px 15px 20px;
// }
}
// Highlighted Links
.active-highlight(@color:rgba(255, 255, 255, 0.15)){
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: @color;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0;
pointer-events: none;
.transition(600ms);
}
&.active-state:before,
html:not(.watch-active-state) &:active:before {
opacity: 1;
.transition(150ms);
}
}
.active-highlight-color(@color) {
&:before {
background-image: -webkit-radial-gradient(center, circle cover, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
background-image: radial-gradient(circle at center, @color 66%, rgba(red(@color),green(@color),blue(@color),0) 66%);
}
}
// No Scrollbar
.no-scrollbar() {
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
}
.ellipsis() {
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
word-wrap: break-word;
}

View File

@@ -0,0 +1 @@
4efcecc8-5cad-44ae-a86e-b7d6aec498f2

View File

@@ -0,0 +1,28 @@
<template>
<div class="hello">
<h1>{{ title }}</h1>
</div>
</template>
<script lang="ts">
import { toRefs, Ref, ref, reactive, createComponent, PropOptions, onMounted, SetupContext } from '@vue/composition-api'
export default createComponent({
name: 'hello-word',
props: {
title: {
type: String,
default: 'HelloWorld 子组件的默认Props值'
}
},
setup() {
}
})
</script>
<style scoped lang="less">
h3 {
margin: 40px 0 0
}
</style>

View File

@@ -0,0 +1 @@
3413f0bb-2b37-4aca-b97e-49b614b8330b

View File

@@ -0,0 +1,51 @@
<route-meta>
{
"isLogin": false,
"title": "关于我"
}
</route-meta>
<template lang="pug">
.about
h1(@click="addCount") {{ title }}
p {{count}}
p Test: {{ Test }}
</template>
<script lang="ts">
import { toRefs, Ref, ref, reactive, createComponent, PropOptions, onMounted, SetupContext } from '@vue/composition-api'
import { UnwrapRef } from '@vue/composition-api/dist/reactivity'
export default createComponent({
props: {},
setup(props: PropOptions, ctx: SetupContext) {
const state: UnwrapRef<{
title: Ref<string>,
count: Ref<number>
}> = reactive({
title: ref('关于我页面'),
count: ref(0)
});
const Test: Ref<string> = ref('张三');
const addCount = () => {
state.count+=1
};
onMounted(async () => {
console.log("Test: ",Test.value)
});
return {
...toRefs(state),
Test,
addCount
}
}
})
</script>
<style lang="less" scoped>
@import "~@less/about";
</style>

View File

@@ -0,0 +1,91 @@
<route-meta>
{
"isLogin": false,
"title": "首页"
}
</route-meta>
<template lang="pug">
.home
img(alt='Vue logo', src='~@public/img/logo.png')
h2(v-index='200') {{title | gets}}
p(v-test) 请打开控制台查看更多
v-hellowold(title="父向子传递数据")
Button(@click='loadData' type="primary") 点击请求数据
ul
li(v-for="(item,index) in list" :key="index")
p {{ item.id }} : {{ item.name }}
</template>
<script lang="ts">
import { Button } from 'vant';
import { inject, computed,toRefs, Ref, ref, reactive, createComponent, PropOptions, onMounted, SetupContext as SC } from '@vue/composition-api'
import { UnwrapRef } from '@vue/composition-api/dist/reactivity'
//@ts-ignore
import HomeServiceImpl from '@impl/home.service.impl';
import HelloWorldComponent from '../components/HelloWorld.vue'
//@ts-ignore
import { SetupContext } from "@core/types/ctx.d.ts";
export default createComponent({
name: 'index',
props: {},
filters: {
gets: (value: string) => {
return value + ' | 过滤器';
}
},
setup(props: PropOptions, ctx: SC | SetupContext) {
const { port1, port2 } = (inject("Broadcast") as { [key: string]: { [key: string]: any } }).HelpingSuccess;
console.log("port1: ", port1);
console.log("port2: ", port2);
const state: UnwrapRef<{
title: Ref<string>,
list: Ref<Array<{id: number, name: string}>>
}> = reactive({
title: ref('首页'),
list: ref([])
});
onMounted(async ()=> {
console.log("MD5加密 ",ctx.root.$md5("test"));
// 2: 使用vue3 SetupContext 对象访问全局自定义配置和方法
// 还有路由对象
ctx.root.$setTitle("测试");
let PostData = await HomeServiceImpl.haha({
name: 'bmy',
age: [18,19,17]
});
console.log("测试POST请求数据为", PostData);
});
const loadData = async () => {
// ajax 请求注意用ctx替代this
let data = await HomeServiceImpl.index({ id: 1,page: 1 });
console.log("GET请求到的数据", data);
state.list = data.result
};
return {
...toRefs(state),
loadData
}
},
components: {
'v-hellowold': HelloWorldComponent,
Button
},
})
</script>
<style lang="less" scoped>
@import "~@less/home";
</style>

View File

@@ -0,0 +1,37 @@
<route-meta>
{
"isLogin": false,
"title": "用户列表"
}
</route-meta>
<template lang="pug">
.user-list
h1 {{ title }}
router-view
</template>
<script lang="ts">
import { toRefs, Ref, ref, reactive, createComponent, PropOptions, onMounted, SetupContext } from '@vue/composition-api'
import { UnwrapRef } from '@vue/composition-api/dist/reactivity'
export default createComponent({
props: {},
setup(props: PropOptions, ctx: SetupContext) {
const state: UnwrapRef<{
title: Ref<string>
}> = reactive({
title: ref('用户中心')
});
return {
...toRefs(state)
}
}
})
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1 @@
385f1add-b0ae-47b3-8348-d20c50baff50

View File

@@ -0,0 +1,33 @@
<route-meta>
{
"isLogin": false,
"title": "用户详情页面"
}
</route-meta>
<template lang="pug">
.user-info
h1 {{ title }}
</template>
<script lang="ts">
import { toRefs, Ref, ref, reactive, createComponent, PropOptions, onMounted, SetupContext } from '@vue/composition-api'
import { UnwrapRef } from '@vue/composition-api/dist/reactivity'
export default createComponent({
props: {},
setup(props: PropOptions, ctx: SetupContext) {
const state: UnwrapRef<{
title: Ref<string>
}> = reactive({
title: ref('用户详情页面')
})
return {
...toRefs(state)
}
}
})
</script>
<style lang="less" scoped>
</style>

View File

@@ -0,0 +1,33 @@
<route-meta>
{
"isLogin": false,
"title": "用户中心首页"
}
</route-meta>
<template lang="pug">
.user-info
h1 {{ title }}
</template>
<script lang="ts">
import { toRefs, Ref, ref, reactive, createComponent, PropOptions, onMounted, SetupContext } from '@vue/composition-api'
import { UnwrapRef } from '@vue/composition-api/dist/reactivity'
export default createComponent({
props: {},
setup(props: PropOptions, ctx: SetupContext) {
const state: UnwrapRef<{
title: Ref<string>
}> = reactive({
title: ref('用户index页面')
})
return {
...toRefs(state)
}
}
})
</script>
<style lang="less" scoped>
</style>

1
tsvue/src/core/.pydio Normal file
View File

@@ -0,0 +1 @@
ebb74891-c396-4dbb-bb80-c6d5a1aadc80

View File

@@ -0,0 +1 @@
77ab33e6-8631-42cd-a0d4-2bbf388b8864

View File

@@ -0,0 +1,61 @@
import { PluginObject } from 'vue';
import VueRouter, { RouterOptions } from 'vue-router';
import VueCompositionApi from '@vue/composition-api';
import { AutoRoutesConfig } from './route.config';
import { Injectable } from 'vue3decorators';
import Vant from 'vant';
import 'vant/lib/index.css';
import md5 from 'js-md5';
@Injectable()
export class config {
/**
* 接口配置: 测试环境基地址,正式环境基地址,具体页面接口
*/
public static AjaxConfig: {
DevUrl: string,
ProdUrl: string,
ApiList: { [ key: string ]: string}
} = {
DevUrl: 'http://localhost:9000',
ProdUrl: 'http://127.0.0.1:3000',
ApiList: {
index: '/test',
haha: '/haha',
Login: '/user-login',
about: '/about'
},
};
/**
* 需要被挂载的节点
*/
public static mountElement: string = '#app';
/**
* Vue插件
*/
public static VuePlugs: PluginObject<never>[] = [
Vant,
VueRouter,
VueCompositionApi
];
/**
* 第三方非vue插件
* n: 在vue中使用的名字ctx.root.$md5()
* v: import导入的插件变量
*/
public static NotVuePlugs: { n: string, f: ()=>void }[] = [
{ n: '$md5', f: md5 }
]
public static RouterConfigUrl: RouterOptions = {
mode: 'history',
base: './',
routes: AutoRoutesConfig
}
}

View File

@@ -0,0 +1,52 @@
// 根据page目录结构自动生成的路由配置文件
// 参考Nuxt.jshttps://zh.nuxtjs.org/guide/routing
// @ts-ignore
export const AutoRoutesConfig = [
{
name: "about",
path: "/about",
component: () => import(/* webpackChunkName: 'about' */ '@/page/about.vue'),
meta: {
isLogin: false,
title: "关于我"
}
},
{
path: "/user",
component: () => import(/* webpackChunkName: 'user' */ '@/page/user.vue'),
meta: {
isLogin: false,
title: "用户列表"
},
children: [
{
name: "user",
path: "",
component: () => import(/* webpackChunkName: 'userindex' */ '@/page/user/index.vue'),
meta: {
isLogin: false,
title: "用户中心首页"
}
},
{
name: "user-id",
path: ":id",
component: () => import(/* webpackChunkName: 'user_id' */ '@/page/user/_id.vue'),
meta: {
isLogin: false,
title: "用户详情页面"
}
}
]
},
{
name: "index",
path: "/",
component: () => import(/* webpackChunkName: 'index' */ '@/page/index.vue'),
meta: {
isLogin: false,
title: "首页"
}
}
];

View File

@@ -0,0 +1 @@
dfaefc2f-8f4f-4fb2-bc9e-ef4543af9843

View File

@@ -0,0 +1,100 @@
import { Utils } from '../utils/index.utils';
import axios, { AxiosInstance } from 'axios';
import { Injectable } from 'vue3decorators';
@Injectable()
export class Axios {
public constructor() {
// 设置接口请求基地址
axios.defaults.baseURL = Utils.CheckAjaxUrl();
this.ResponseInterceptor();
this.RequestInterceptor();
}
/**
* Get 请求
* 请求参数请参考接口RequestParams
* @param params
*/
public async get(params: { url: string, data: Object, header?: object }): Promise<Object> {
try {
return await axios.get(params.url, {
params: params.data,
headers: Object.assign({}, params.header)
});
} catch (e) {
throw new Error(`GET 请求出错:${e.message}`)
}
}
/**
* Post 请求
* 请求参数请参考接口RequestParams
* @param params
*/
public async post(params: { url: string, data: Object, header?: Object }): Promise<Object> {
try {
return await axios.post(params.url, params.data, {
headers: Object.assign({}, params.header)
})
} catch (e) {
throw new Error(`POST 请求出错:${e.message}`)
}
}
/**
* Put 请求
* 请求参数请参考接口RequestParams
* @param params
*/
public async put(params: { url: string, data: Object }): Promise<Object> {
try {
return await axios.put(params.url, params.data)
} catch (e) {
throw new Error(`PUT 请求出错:${e.message}`)
}
}
/**
* delete 请求
* 请求参数请参考接口RequestParams
* @param params
*/
public async delete(params: { url: string, data: Object }): Promise<Object> {
try {
return await axios.delete(params.url, {params: params.data})
} catch (e) {
throw new Error(`DELETE 请求出错:${e.message}`)
}
}
/**
* 添加响应拦截器
* @constructor
*/
public async ResponseInterceptor(): Promise<any> {
axios.interceptors.response.use(response => {
return response.data;
}, (error: Error) => {
return Promise.reject(error)
})
}
/**
* 添加请求拦截器
* @constructor
*/
public async RequestInterceptor(): Promise<any> {
axios.interceptors.request.use(config => {
/**
* 统一设置请求头
*/
config.headers['bmy'] = "2020";
return config
}, function (error: Error) {
return Promise.reject(error)
})
}
}

View File

@@ -0,0 +1 @@
f2a2efff-c12c-4e2d-bc42-8684814fed07

View File

@@ -0,0 +1,34 @@
import { VNodeDirective, VNode } from 'vue'
import { Directive, Injectable } from 'vue3decorators';
/**
* 自定义指令
* 注意如果类的方法被加上了 @Directive() 注解
* 那么该方法就会被注册为vue的自定义指令。
* 例如public index() {}那么在组件中指令为v-index
* public index() {} 必须返回对象,看下面案例
*/
@Injectable()
export class DirectiveList {
@Directive()
public index() {
return {
bind: (el: Element, binding: VNodeDirective, vnode: VNode) => {
// console.log(el)
// console.log(binding)
console.log("v-index 指令接收到的数值:", binding.value);
// console.log(vnode);
}
}
}
@Directive()
public test() {
return {
bind: (el: Element) => {
console.log("test: ", el)
}
}
}
}

View File

@@ -0,0 +1 @@
4e2245f6-8a81-4a74-8e3a-7dfc2bb3e227

View File

@@ -0,0 +1,17 @@
import { computed,toRefs, Ref, ref, reactive } from '@vue/composition-api';
import { UnwrapRef } from '@vue/composition-api/dist/reactivity';
/**
* 注意广播只能在androidChromeEdgeFirefoxOpera中使用
* 不支持IESafari 等浏览器,请注意兼容性
* @constructor
*/
export function HelpingPopupMessageChannel() {
const state: UnwrapRef<{
HelpingSuccess: MessageChannel
}> = {
HelpingSuccess: new MessageChannel()
};
return state
};

View File

@@ -0,0 +1 @@
69df9558-fe44-4a71-8f33-c2fe200607c9

View File

@@ -0,0 +1,10 @@
import { Mixin, Injectable } from 'vue3decorators';
/**
* 类的方法上如果加上注解 @Mixin(),那么该方法
* 就可以作为Vue的全局mixin
*/
@Injectable()
export class MixinList {
}

View File

@@ -0,0 +1 @@
a664e3c3-5785-46a1-88dc-209b1083d867

View File

@@ -0,0 +1 @@
5bd042ca-7108-4864-9c39-a4fed41d10bc

View File

@@ -0,0 +1,18 @@
import { Init } from './init.run';
// import { config } from '../config/index.config';
import { CreateElement } from 'vue';
/**
* Vue项目的启动文件
* 从Init类中抽离出来的原因是方便后期如果要做Vue多端项目
*/
class Index extends Init {
constructor() {
super();
new this.Vues({
router: this.router,
render: (h: CreateElement) => h(Init.AppComponent)
}).$mount('#app');
}
}
new Index();

View File

@@ -0,0 +1,74 @@
import App from '@/App.vue';
import Vue, { VueConstructor , PluginObject} from 'vue';
import VueRouter, { RawLocation, Route } from 'vue-router';
import { Inject, directiveModel, mixinModel, globalMethodModel, StartBoot } from 'vue3decorators';
import { config } from '../config/index.config'
import { Axios } from '../dao/index.dao';
import { DirectiveList } from '../directive/index.directive';
import { MixinList } from '../mixin/index.mixin';
/**
* 项目初始化文件
*/
@StartBoot()
export class Init {
@Inject()
private readonly config!: config;
@Inject()
public readonly directiveList!: DirectiveList;
@Inject()
public readonly mixinList!: MixinList;
@Inject()
public readonly axios!: Axios;
private initVuePlugsArray = config.VuePlugs;
protected router!: VueRouter;
protected Vues: VueConstructor<Vue> = Vue;
public static AppComponent: VueConstructor = App;
constructor() {
this.Vues.config.productionTip = false;
this.initPlugs();
}
/**
* 初始化Vue和非Vue插件Vue Mixinvue directive
*/
private initPlugs(): void {
globalMethodModel.GlobalMethod.forEach(v => this.Vues.prototype[v['n']] = v['f']);
config.NotVuePlugs.forEach(v => this.Vues.prototype[v['n']] = v['f']);
directiveModel.DirectiveContainer.forEach(v => this.Vues.directive(v['n'], v['f']));
mixinModel.MixinContainer.forEach(v => this.Vues.mixin(v));
this.initVuePlugsArray.forEach(v => this.Vues.use(v));
this.InitVueRouter();
}
/**
* 初始化配置全局路由
* @constructor
*/
private InitVueRouter(): void {
this.router = new VueRouter(config.RouterConfigUrl);
// 全局路由守卫
this.router.beforeEach((to: Route, from: Route, next: (to?: RawLocation | false | void) => void) => {
document.title = to.meta.title;
next()
});
// 重写路由Push
const routerPush: (location: RawLocation)
=> Promise<Route>
= VueRouter.prototype.push;
VueRouter.prototype.push = function push(location: RawLocation): Promise<Route> {
// @ts-ignore
return routerPush.call(this, location).catch((error: Error) => error)
};
}
}

View File

@@ -0,0 +1 @@
a1d82dbd-e544-4d5a-bec0-d3bfbd78d746

View File

@@ -0,0 +1,5 @@
export interface HomeService {
index(data: object): Promise<any>;
haha(data: object): Promise<any>;
Login(data: object): Promise<any>;
}

View File

@@ -0,0 +1 @@
690841ee-b9f2-4a1c-9432-4351e2bd8ebf

View File

@@ -0,0 +1,40 @@
import { HomeService } from "../Home.service";
import { GET, POST, PUT } from 'vue3decorators';
export class HomeServiceImpl implements HomeService {
/**
* @GET 被打上这些注解的Service可以在Vue组件中使用。
* 1: 方法内部不需要任何的处理逻辑,留空即可。
* 2: 方法调用的时候只接受请求需要的参数
* 3: 现在V3版本的注解例如@GET()是不需要传入请求地址参数的方法名就是接口地址的key名称
* 例如index.config.ts 中 ApiList 的key名称
* {
* DevUrl: 'http://localhost:9000',
* ProdUrl: 'http://127.0.0.1:3000',
* ApiList: {
* index: '/test',
* haha: '/haha'
* },
* }
* 这里的key名称indexhaha直接作为 ServiceImpl 的方法名即可。
* 注解内部会自动去根据方法名,例如 index 去寻找 ApiList 下的key从而拿到请求地址 /test
* 然后注解会自动调用用户配置好的Axios来发送请求注意请求处理的所有逻辑交给用户。注解只负责
* 调用用户配置好的Axios而已。请求成功后注解会自动调用被注解的方法然后直接将数据返回给Vue组
* 件调用者,这也就是这里为什么方法内部不需要处理逻辑的原因。因为一切都在注解内部实现,并遵守
* 约定大于配置 的原则。
* @param data object 请求参数
*/
@GET()
public async index(data: object): Promise<any> {}
@GET()
public async about(data: object): Promise<any> {}
@POST()
public async haha(data: object): Promise<any> {}
@PUT()
public async Login(data: object): Promise<any> {}
}
export default new HomeServiceImpl();

View File

@@ -0,0 +1 @@
6158bbc5-ba25-4ae6-9370-a0e4a30a8e22

3
tsvue/src/core/types/ctx.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
export interface SetupContext {
readonly root: { [key: string]: (...args: any[]) => any };
}

6
tsvue/src/core/types/global.d.ts vendored Normal file
View File

@@ -0,0 +1,6 @@
// Global compile-time constants
declare var __DEV__: boolean
declare var __BROWSER__: boolean
declare var __CI__: boolean
declare module 'js-md5';

17
tsvue/src/core/types/setup-context.d.ts vendored Normal file
View File

@@ -0,0 +1,17 @@
import Vue, {VNode} from 'vue';
import {ComponentInstance} from "@vue/composition-api/dist/component/component";
declare module '@vue/composition-api/dist/component/component' {
interface SetupContext {
readonly attrs: Record<string, string>;
readonly slots: {
[key: string]: (...args: any[]) => VNode[];
};
readonly parent: ComponentInstance | null;
readonly root: ComponentInstance;
readonly listeners: {
[key: string]: Function;
};
emit(event: string, ...args: any[]): void;
}
}

4
tsvue/src/core/types/shims-vue.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}

388
tsvue/src/core/types/wx.d.ts vendored Normal file
View File

@@ -0,0 +1,388 @@
/**
* Copyright (c) 2015,Egret-Labs.org
* All rights reserved.
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
* * Neither the name of the Egret-Labs.org nor the
* names of its contributors may be used to endorse or promote products
* derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY EGRET-LABS.ORG AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL EGRET-LABS.ORG AND CONTRIBUTORS BE LIABLE FOR ANY
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* Created by wibrst on 2015/1/10.
*/
declare class wx {
/**
* 通过config接口注入权限验证配置
* @param bodyConfig
*/
static config( bodyConfig:BodyConfig ):void;
/**
* 通过ready接口处理成功验证
* @param cbValidated 成功验证后的处理函数
*/
static ready( cbValidated:Function ):void;
/**
* 通过error接口处理失败验证
* @param cbError 处理失败验证后的处理函数
*/
static error( cbError:Function ):void;
/**
* 判断当前客户端版本是否支持指定JS接口
* @param bodyCheckJsAPISupport
*/
static checkJsApi( bodyCheckJsAPISupport:BodyCheckJsAPISupport ):void;
/**
* 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
* @param bodyMenuShareTimeline
*/
static onMenuShareTimeline( bodyMenuShareTimeline:BodyMenuShareTimeline ):void;
/**
* 获取“分享给朋友”按钮点击状态及自定义分享内容接口
* @param bodyMenuShareAppMessage
*/
static onMenuShareAppMessage( bodyMenuShareAppMessage:BodyMenuShareAppMessage ):void;
/**
* 获取“分享到QQ”按钮点击状态及自定义分享内容接口
* @param bodyMenuShareQQ
*/
static onMenuShareQQ( bodyMenuShareQQ:BodyMenuShareQQ ):void;
/**
* 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
* @param bodyMenuShareWeibo
*/
static onMenuShareWeibo( bodyMenuShareWeibo:BodyMenuShareWeibo ):void;
/// 华丽的分界线, 以下接口参数结构较简单或使用较少均可自行查阅微信官方api文档给出适合的参数
/**
* 拍照或从手机相册中选图接口
* @param bodyChooseImage
*/
static chooseImage( body:Object ):void;
/**
* 预览图片接口
* @param body
*/
static previewImage( body:Object ):void;
/**
* 上传图片接口
* @param body
*/
static uploadImage( body:Object ):void;
/**
* 下载图片接口
* @param body
*/
static downloadImage( body:Object ):void;
/**
* 开始录音接口
* @param body
*/
static startRecord( body:Object ):void;
/**
* 停止录音接口
* @param body
*/
static stopRecord( body:Object ):void;
/**
* 监听录音自动停止接口
* @param body
*/
static onVoiceRecordEnd( body:Object ):void;
/**
* 播放语音接口
* @param body
*/
static playVoice( body:Object ):void;
/**
* 暂停播放接口
* @param body
*/
static pauseVoice( body:Object ):void;
/**
* 停止播放接口
* @param body
*/
static stopVoice( body:Object ):void;
/**
* 监听语音播放完毕接口
* @param body
*/
static onVoicePlayEnd( body:Object ):void;
/**
* 上传语音接口
* @param body
*/
static uploadVoice( body:Object ):void;
/**
* 下载语音接口
* @param body
*/
static downloadVoice( body:Object ):void;
// ---- 智能接口
/**
* 识别音频并返回识别结果接口
* @param body
*/
static translateVoice( body:Object ):void;
/// ---- 设备信息
/**
* 获取网络状态接口
* @param body
*/
static getNetworkType( body:Object ):void;
/// ---- 地理位置
/**
* 使用微信内置地图查看位置接口
* @param body
*/
static openLocation( body:Object ):void;
/**
* 获取地理位置接口
* @param body
*/
static getLocation( body:Object ):void;
/// ---- 界面操作
/**
* 隐藏右上角菜单接口
* @param body
*/
static hideOptionMenu( body:Object ):void;
/**
* 显示右上角菜单接口
* @param body
*/
static showOptionMenu( body:Object ):void;
/**
* 关闭当前网页窗口接口
* @param body
*/
static closeWindow( body:Object ):void;
/**
* 批量隐藏功能按钮接口
* @param body
*/
static hideMenuItems( body:Object ):void;
/**
* 批量显示功能按钮接口
* @param body
*/
static showMenuItems( body:Object ):void;
/**
* 隐藏所有非基础按钮接口
* @param body
*/
static hideAllNonBaseMenuItem( body:Object ):void;
/**
* 显示所有功能按钮接口
* @param body
*/
static showAllNonBaseMenuItem( body:Object ):void;
/// ---- 微信扫一扫
/**
* 调起微信扫一扫接口
* @param body
*/
static scanQRCode( body:Object ):void;
/// ---- 微信小店
/**
* 跳转微信商品页接口
* @param body
*/
static openProductSpecificView( body:Object ):void;
/// ---- 微信卡券
/**
* 调起适用于门店的卡券列表并获取用户选择列表
* @param body
*/
static chooseCard( body:Object ):void;
/**
* 批量添加卡券接口
* @param body
*/
static addCard( body:Object ):void;
/**
* 查看微信卡包中的卡券接口
* @param body
*/
static openCard( body:Object ):void;
/// ---- 微信支付
/**
* 发起一个微信支付请求
* @param body
*/
static chooseWXPay( body:Object ):void;
}
///////////////////////////////// 常用API的参数结构类
/**
* config 参数结构
* jsApiList: 所有要调用的 API
*/
declare class BodyConfig {
debug:boolean;
appId:string;
timestamp:number;
nonceStr:string;
signature:string;
jsApiList:Array<string>;
}
/**
* checkJsApi 参数结构
* jsApiList: 需要检测的JS接口列表
*/
declare class BodyCheckJsAPISupport {
success:Function;
jsApiList:Array<string>;
}
/**
* onMenuShareTimeline 参数结构
*/
declare class BodyMenuShareTimeline {
title:string;
link:string;
imgUrl:string;
success:Function;
cancel: Function;
}
/**
* onMenuShareAppMessage 参数结构
*/
declare class BodyMenuShareAppMessage {
title:string;
desc:string;
link:string;
imgUrl:string;
type:string;
dataUrl:string;
success:Function;
cancel: Function;
}
/**
* onMenuShareQQ 参数结构
*/
declare class BodyMenuShareQQ {
title:string;
desc:string;
link:string;
imgUrl:string;
type:string;
dataUrl:string;
success:Function;
cancel: Function;
}
/**
* onMenuShareWeibo 参数结构
*/
declare class BodyMenuShareWeibo {
title:string;
desc:string;
link:string;
imgUrl:string;
success:Function;
cancel: Function;
}
export default wx

View File

@@ -0,0 +1 @@
642933ab-5276-4b89-af34-3d90affb6078

View File

@@ -0,0 +1,85 @@
import { config } from '../config/index.config';
import { GlobalMethod } from 'vue3decorators';
// @ts-ignore
import wx from 'weixin-js-sdk';
/**
* utils 工具类
*/
export class Utils {
/**
* 检测当前环境动态返回ajax接口的对应的URL地址
* @constructor
*/
public static CheckAjaxUrl(): string {
if (process.env.NODE_ENV === 'production') {
return config.AjaxConfig.ProdUrl;
} else {
return config.AjaxConfig.DevUrl;
}
}
/**
* 动态设置网页title
* @param title
*/
@GlobalMethod()
public setTitle(title: string): void {
document.title = title;
}
/**
* 获取配置
*
*/
@GlobalMethod()
public getConfig() {
return config;
}
/**
* 时间戳转正常时间
* @param data
*/
@GlobalMethod()
public formatDate(data: number): string {
let now=new Date(data*1000);
let year=now.getFullYear();
let month=now.getMonth()+1;
let date=now.getDate();
let hour=now.getHours();
let minute=now.getMinutes();
let second=now.getSeconds();
return month+"."+date;
}
/**
* 配置基本信息
* @param data
*/
@GlobalMethod()
public wxConfig(data: any): void {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来若要查看传入的参数可以在pc端打开参数信息会通过log打出仅在pc端时才会打印。
// @ts-ignore
appId: "wxced93207e88f7576", // 必填,公众号的唯一标识
timestamp: data.timesTamp , // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signaTure,// 必填,签名
jsApiList: ["chooseImage","uploadImage", "updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage"] // 必填需要使用的JS接口列表
});
}
/**
* 使用微信sdk
* data 初始号数据
* ready 初始号成功后后续操作需要在这使用
*/
@GlobalMethod()
public wxSdk(ready: Function): void {
wx.ready(function(){
ready(wx)
});
}
}

38
tsvue/tsconfig.json Normal file
View File

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

72
tsvue/vue.config.js Normal file
View File

@@ -0,0 +1,72 @@
const isProduction = process.env.NODE_ENV === 'production';
const ProdConfig = require("./build/prod");
const DevConfig = require("./build/dev");
const VariableConfig = require('./build/variable');
module.exports = {
publicPath: './',
filenameHashing: true,
productionSourceMap: false,
parallel: true,
lintOnSave: false,
/**
* vue-cli-plugin-autorouter 插件配置
* 参考文档https://www.npmjs.com/package/vue-cli-plugin-autorouter
*/
pluginOptions: {
route: {
TemplateFolderName: 'page',
RootFolderName: './src/application',
SaveConfigPath: '../../../src/core/config/route.config.ts'
}
},
devServer: {
hot: true,
hotOnly: true,
host: '0.0.0.0',
port: 9000,
compress: true,
open: true,
openPage: '#/',
overlay: {
warnings: true,
errors: true,
},
// before 这块代码都可以删除,仅仅为脚手架提供一个用于测试的接口
before: function(app, server) {
app.get('/test', function(req, res) {
res.json({
status: 200,
result: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' }
]
});
});
app.post('/haha', function(req, res) {
res.json({
status: 200,
result: [
{ id: 1, name: '哈哈1' },
{ id: 2, name: '哈哈2' }
]
});
});
}
},
configureWebpack: (config) => {
// 设置程序核心入口
config.entry.app = './src/core/run/index.run.ts';
isProduction ? new ProdConfig(config) : ''
},
chainWebpack: (config) => {
isProduction ? config.plugin('html').tap(args => {
args[0].cdn = VariableConfig.cdn;
return args;
}) : '';
new DevConfig(config);
}
};