├── .DS_Store ├── FLIP ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ ├── Card │ │ ├── index.css │ │ └── index.js │ └── Preview │ │ ├── index.css │ │ └── index.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── HTML解析 └── index.ts ├── LICENSE ├── Popover ├── .DS_Store ├── README.md ├── dist │ ├── assets │ │ ├── index-6ade3c71.js │ │ └── index-e81df30d.css │ ├── index.html │ └── vite.svg ├── index.html ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.vue │ ├── assets │ │ └── vue.svg │ ├── components │ │ ├── HelloWorld.vue │ │ └── popover.vue │ ├── main.ts │ ├── style.css │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts └── yarn.lock ├── README.md ├── ReactSSR ├── Basic │ ├── .gitignore │ ├── package.json │ ├── src │ │ ├── App.js │ │ ├── Routes.js │ │ ├── client │ │ │ ├── index.js │ │ │ └── request.js │ │ ├── components │ │ │ └── Header │ │ │ │ ├── index.js │ │ │ │ └── style.css │ │ ├── containers │ │ │ ├── Home │ │ │ │ ├── index.css │ │ │ │ └── index.js │ │ │ ├── NotFound │ │ │ │ └── index.js │ │ │ └── Personal │ │ │ │ ├── index.js │ │ │ │ └── style.css │ │ ├── dataServer.js │ │ ├── server │ │ │ ├── index.js │ │ │ ├── render.js │ │ │ └── request.js │ │ ├── store │ │ │ ├── Header │ │ │ │ ├── actions.js │ │ │ │ ├── constants.js │ │ │ │ └── reducer.js │ │ │ ├── Home │ │ │ │ ├── actions.js │ │ │ │ ├── constants.js │ │ │ │ └── reducer.js │ │ │ └── index.js │ │ └── style.css │ ├── webpack.base.js │ ├── webpack.client.js │ └── webpack.server.js ├── README.md └── SplitChunkV │ ├── .gitignore │ ├── package.json │ ├── src │ ├── App.js │ ├── Routes.js │ ├── client │ │ ├── index.js │ │ └── request.js │ ├── components │ │ └── Header │ │ │ ├── index.js │ │ │ └── style.css │ ├── containers │ │ ├── About.js │ │ ├── Home │ │ │ ├── index.css │ │ │ └── index.js │ │ ├── Loading.js │ │ ├── NotFound │ │ │ └── index.js │ │ └── Personal │ │ │ ├── index.js │ │ │ └── style.css │ ├── dataServer.js │ ├── server │ │ ├── index.js │ │ ├── render.js │ │ └── request.js │ ├── store │ │ ├── Header │ │ │ ├── actions.js │ │ │ ├── constants.js │ │ │ └── reducer.js │ │ ├── Home │ │ │ ├── actions.js │ │ │ ├── constants.js │ │ │ └── reducer.js │ │ └── index.js │ └── style.css │ ├── webpack.base.js │ ├── webpack.client.js │ └── webpack.server.js ├── astrolabe ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ ├── constellation │ │ │ ├── 双子座.png │ │ │ ├── 双鱼座.png │ │ │ ├── 处女座.png │ │ │ ├── 天秤座.png │ │ │ ├── 天蝎座.png │ │ │ ├── 射手座.png │ │ │ ├── 巨蟹座.png │ │ │ ├── 摩羯座.png │ │ │ ├── 水瓶座.png │ │ │ ├── 狮子座.png │ │ │ ├── 白羊座.png │ │ │ └── 金牛座.png │ │ └── planet │ │ │ ├── 冥王星.png │ │ │ ├── 凯龙.png │ │ │ ├── 土星.png │ │ │ ├── 天王星.png │ │ │ ├── 太阳.png │ │ │ ├── 月亮.png │ │ │ ├── 月北交.png │ │ │ ├── 木星.png │ │ │ ├── 水星.png │ │ │ ├── 海王星.png │ │ │ ├── 火星.png │ │ │ └── 金星.png │ ├── components │ │ ├── astrolabe.vue │ │ ├── canvas.ts │ │ ├── math.ts │ │ ├── util.ts │ │ └── vars.ts │ ├── env.d.ts │ └── main.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── canvas&&CSS&&SVG三种实现仪表盘的方式 ├── 1.gif ├── 11.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.gif ├── 7.png ├── 8.png ├── 9.png └── canvas&&CSS&&SVG三种实现仪表盘的方式.md ├── canvas绘制雷达图 ├── 1.gif ├── 2.png ├── 3.png ├── 4.gif ├── 5.gif └── canvas绘制雷达图.md ├── cloneDir ├── example.png └── index.js ├── code-pen ├── .gitignore ├── index.html ├── package.json ├── public │ ├── iframe.html │ └── vite.svg ├── src │ ├── App.less │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── components │ │ ├── edit-box │ │ │ ├── index.less │ │ │ └── index.tsx │ │ └── languages │ │ │ └── vue2.ts │ ├── main.tsx │ ├── test.less │ ├── test.tsx │ ├── util │ │ ├── defaultTemplate.ts │ │ ├── edit-util.ts │ │ ├── resize.ts │ │ └── trans.ts │ └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json ├── vite.config.ts └── yarn.lock ├── conversion-ui ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── conversion-ui.vue │ │ ├── interim.vue │ │ ├── label.vue │ │ └── parallelogram.vue │ ├── env.d.ts │ └── main.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── shopping-cart ├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── api │ │ └── shop.ts │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── ProductList.vue │ │ └── ShoppingCart.vue │ ├── main.ts │ ├── shims-vue.d.ts │ ├── store │ │ ├── index.ts │ │ ├── modules │ │ │ ├── cart.ts │ │ │ └── products.ts │ │ └── type.ts │ └── utils │ │ └── currency.ts └── tsconfig.json ├── xstate-table ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package.json ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── common.vue │ │ ├── index.vue │ │ ├── util.ts │ │ └── xstate.vue │ ├── env.d.ts │ └── main.ts ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── 一种移动端模拟实现返回拦截的方案 ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── physicsBack │ │ ├── footerModal.vue │ │ └── index.vue │ ├── main.js │ └── router.js ├── 元素跟随滚动 ├── README.md ├── img │ ├── 0.png │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── ek.jpg │ ├── math1.png │ ├── math2.png │ ├── math3.png │ ├── scrollBy.gif │ ├── scrollBy.md │ ├── scrollBy_1.gif │ ├── scrollBy_2.gif │ ├── scrollBy_3.gif │ ├── scrollBy_4.gif │ ├── scrollBy_5.gif │ ├── w3c1.png │ └── zj.jpg └── index.html ├── 动效柱状图 ├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.vue │ ├── assets │ ├── logo.png │ └── star_gf.png │ ├── components │ └── BarGraph.vue │ └── main.js ├── 在线编辑器 ├── README.md ├── README │ ├── README1.md │ └── README2.md ├── img │ ├── 1.gif │ ├── 1.png │ ├── 2.gif │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ └── 8.png └── project │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Component │ ├── AceEditor │ │ ├── editorOptions.js │ │ └── index.jsx │ ├── CodemirrorEditor │ │ └── index.jsx │ ├── EditorA │ │ ├── index.jsx │ │ ├── style.css │ │ └── style.scss │ ├── EditorB │ │ ├── index.jsx │ │ ├── style.css │ │ └── style.scss │ └── EditorC │ │ ├── index.jsx │ │ ├── style.css │ │ └── style.scss │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── registerServiceWorker.js │ ├── routeMap.jsx │ └── static │ ├── img │ ├── md.png │ └── upload-img.png │ └── style │ ├── common.css │ ├── common.scss │ └── js-highlight.css ├── 将自己在CSDN上的文章下载到本地并上传到掘金 ├── README.md ├── img │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 16.png │ ├── 17.png │ ├── 18.png │ ├── 19.png │ ├── 20.png │ └── 21.png ├── index.js ├── package.json └── src │ ├── browserManage.js │ ├── download.js │ ├── downloadImg.js │ ├── getCSDNData.js │ ├── upload.js │ └── util.js ├── 小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案 ├── 1.png ├── README.md └── project │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── index │ ├── 58a.png │ ├── index.js │ ├── index.json │ ├── index.wxml │ ├── index.wxss │ ├── solutionA │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── solutionB │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── project.config.json ├── 小程序canvas绘制圆角矩形 ├── README.md ├── img │ ├── 1.png │ ├── 2.png │ ├── 3.png │ └── 4.png └── project │ ├── app.js │ ├── app.json │ ├── app.wxss │ ├── index │ ├── index.js │ ├── index.wxml │ └── index.wxss │ └── project.config.json ├── 抛物线小球react+vue ├── README.md ├── img │ ├── ele.gif │ ├── react.gif │ ├── vue.gif │ ├── xy.png │ └── xy2.png ├── react-flyball │ ├── .gitignore │ ├── index.html │ ├── index.js │ ├── package.json │ ├── parabola │ │ ├── FlyBall.js │ │ ├── index.js │ │ ├── parabola.js │ │ └── style.css │ └── webpack.config.js └── vue-flyball │ ├── .babelrc │ ├── .editorconfig │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .gitignore │ ├── .postcssrc.js │ ├── README.md │ ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ ├── webpack.prod.conf.js │ └── webpack.test.conf.js │ ├── config │ ├── dev.env.js │ ├── index.js │ ├── prod.env.js │ └── test.env.js │ ├── index.html │ ├── package.json │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── FlyBall │ │ │ └── index.vue │ ├── main.js │ └── router │ │ └── index.js │ ├── static │ └── .gitkeep │ └── test │ ├── e2e │ ├── custom-assertions │ │ └── elementCount.js │ ├── nightwatch.conf.js │ ├── runner.js │ └── specs │ │ └── test.js │ └── unit │ ├── .eslintrc │ ├── index.js │ ├── karma.conf.js │ └── specs │ └── Hello.spec.js ├── 电商sku组合状态查询 ├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── .eslintignore │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── Sku.vue │ │ ├── index.ts │ │ └── mockData.ts │ ├── main.ts │ ├── shims-tsx.d.ts │ └── shims-vue.d.ts └── tsconfig.json ├── 简单分页 ├── README.md ├── SimplePagination.js ├── demo │ ├── index.html │ └── style.css └── img │ ├── 1.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ └── pagination.gif └── 跟混乱的页面弹窗说再见 ├── .gitignore ├── 12.png ├── 34.png ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── api.js ├── apiMock.js ├── assets └── logo.png ├── components ├── common │ └── modal │ │ ├── index.js │ │ └── index.vue └── modalIndex │ ├── child1.vue │ ├── child1_1.vue │ ├── index.vue │ ├── modalManage.js │ └── modalMap.js ├── main.js ├── router.js └── util.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/.DS_Store -------------------------------------------------------------------------------- /FLIP/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /FLIP/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-flip", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.7.0", 7 | "react-dom": "^16.7.0", 8 | "react-scripts": "2.1.3" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /FLIP/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/FLIP/public/favicon.ico -------------------------------------------------------------------------------- /FLIP/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 25 | React App 26 | 27 | 28 | 29 |
30 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /FLIP/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /FLIP/src/App.css: -------------------------------------------------------------------------------- 1 | li { 2 | list-style: none; 3 | } 4 | .route { 5 | padding: 20px; 6 | } 7 | .route span { 8 | font-size: 14px; 9 | color: #1890ff; 10 | cursor: pointer; 11 | margin-left: 40px; 12 | } -------------------------------------------------------------------------------- /FLIP/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import './App.css' 3 | 4 | // 卡片 Card增删动画 5 | import Card from './components/Card' 6 | // 图片放大/恢复动画 7 | import Preview from './components/Preview' 8 | 9 | class App extends Component { 10 | state = { 11 | showIndex: 0 12 | } 13 | componentDidMount () { 14 | const mt = window.location.search.match(/showIndex=(\d)/) 15 | if (mt) { 16 | this.setState({ 17 | showIndex: +mt[1] 18 | }) 19 | } 20 | } 21 | changeCor (showIndex) { 22 | this.setState({ 23 | showIndex 24 | }) 25 | } 26 | render() { 27 | return ( 28 |
29 |
30 | 点击切换到 卡片增删动效 31 | 点击切换到 图片放大预览/活肤动效 32 |
33 |
34 | { 35 | this.state.showIndex === 0 36 | ? 37 | : 38 | } 39 |
40 | ) 41 | } 42 | } 43 | 44 | export default App 45 | -------------------------------------------------------------------------------- /FLIP/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /FLIP/src/components/Card/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: rgb(236, 236, 236); 3 | } 4 | h3, p { 5 | margin: 0; 6 | } 7 | .card-item { 8 | position: relative; 9 | display: inline-block; 10 | margin-left: 30px; 11 | width: 260px; 12 | overflow: hidden; 13 | border-radius: 10px; 14 | border: 1px solid #e8e8e8; 15 | background-color: #fff; 16 | } 17 | .card-item:hover { 18 | box-shadow: 0 2px 8px rgba(0,0,0,0.09); 19 | border-color: rgba(0,0,0,0.09); 20 | } 21 | .card-item.active { 22 | transition: transform 1s ease; 23 | } 24 | .card-title { 25 | padding: 16px 24px; 26 | overflow: hidden; 27 | white-space: nowrap; 28 | text-overflow: ellipsis; 29 | border-bottom: 1px solid #e8e8e8; 30 | } 31 | .card-title h3 { 32 | display: inline-block; 33 | } 34 | .card-content{ 35 | padding: 24px; 36 | } 37 | .icon-btn { 38 | float: right; 39 | font-size: 14px; 40 | color: #1890ff; 41 | cursor: pointer; 42 | } 43 | .update-count { 44 | text-align: center; 45 | } -------------------------------------------------------------------------------- /FLIP/src/components/Preview/index.css: -------------------------------------------------------------------------------- 1 | .pic-item { 2 | position: relative; 3 | display: inline-block; 4 | width: 100px; 5 | overflow: hidden; 6 | font-size: 0; 7 | border-radius: 10px; 8 | background-size: cover; 9 | background-repeat: no-repeat; 10 | } 11 | 12 | .pic-item::before { 13 | content: ' '; 14 | position: absolute; 15 | left: 0; 16 | top: 0; 17 | width: 100%; 18 | height: 100%; 19 | opacity: 0; 20 | cursor: pointer; 21 | background-color: rgba(0,0,0,0.5); 22 | transition: all .3s; 23 | z-index: 1; 24 | } 25 | .pic-item:hover::before { 26 | opacity: 1; 27 | } 28 | .pic { 29 | width: 100%; 30 | width: 100%; 31 | } 32 | 33 | .preview-box { 34 | position: fixed; 35 | top: 0; 36 | right: 0; 37 | bottom: 0; 38 | left: 0; 39 | opacity: 0; 40 | background-color: #000; 41 | transition: opacity .36s ease-in-out; 42 | z-index: 1000; 43 | } 44 | .img { 45 | position: fixed; 46 | top: 0; 47 | right: 0; 48 | bottom: 0; 49 | left: 0; 50 | margin: auto; 51 | max-width: 100%; 52 | max-height: 100%; 53 | border-radius: 10px; 54 | z-index: 1002; 55 | } 56 | .img.active { 57 | transition: all .36s ease-in-out; 58 | } -------------------------------------------------------------------------------- /FLIP/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /FLIP/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 QuietNight 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Popover/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/Popover/.DS_Store -------------------------------------------------------------------------------- /Popover/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + TypeScript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /Popover/dist/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Popover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Popover/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "popover-vue3", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "vue": "^3.3.4" 13 | }, 14 | "devDependencies": { 15 | "@vitejs/plugin-vue": "^4.2.3", 16 | "sass": "^1.66.1", 17 | "typescript": "^5.0.2", 18 | "vite": "^4.4.5", 19 | "vue-tsc": "^1.8.5" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Popover/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Popover/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Popover/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | 34 | 39 | -------------------------------------------------------------------------------- /Popover/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /Popover/src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | .card { 59 | padding: 2em; 60 | } 61 | 62 | #app { 63 | max-width: 1280px; 64 | margin: 0 auto; 65 | padding: 2rem; 66 | text-align: center; 67 | } 68 | 69 | @media (prefers-color-scheme: light) { 70 | :root { 71 | color: #213547; 72 | background-color: #ffffff; 73 | } 74 | a:hover { 75 | color: #747bff; 76 | } 77 | button { 78 | background-color: #f9f9f9; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /Popover/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Popover/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /Popover/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Popover/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | }) 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # blog-data 2 | 3 | >存放一些在博客中用到的示例代码 4 | > 5 | >此项目会频繁更新，建议 `Star` 或 `Watch`，以便及时得到更新通知 6 | 7 | 博客地址：[CSDN](https://blog.csdn.net/DeepLies) [掘金](https://juejin.im/user/59bfc33851882531b730ba4d/posts) 8 | 9 | ## 如何下载单一文件夹或文件 10 | 11 | 本仓库中的每个文件夹都是一个独立的项目，互不干扰，如果你只是对其中一个文件夹中的项目，或某一项目中的某个文件感兴趣，所以不想下载所有的代码，这里提供两种方法。 12 | 13 | - 参考知乎 [如何从 GitHub 上下载单个文件夹？](https://www.zhihu.com/question/25369412) 下的回答 14 | 推荐其中一个高赞回答中提到的 [DownGit](https://minhaskamal.github.io/DownGit/#/home)，当然，你也可以选择你喜欢的回答 15 | 16 | - 如果不想下载安装任何的工具 17 | 本仓库中有个 [/cloneDir/index.js](cloneDir/index.js) 文件，将此文件中的代码复制下来，然后将复制的代码存放到本地，例如命名为 `cloneDir.js`，然后 `node cloneDir.js`，根据控制台的提示输入你所需要的文件(夹)路径即可，例如： 18 | 19 | ![image](cloneDir/example.png) 20 | >ps: 这份代码是我还在上大学的时候写的，可以满足基本的功能使用，但不保证没有任何 bug，关于此文件的详细说明可见 [如何在github上下载单个文件夹？](https://blog.csdn.net/DeepLies/article/details/52754980) -------------------------------------------------------------------------------- /ReactSSR/Basic/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | jsconfig.json -------------------------------------------------------------------------------- /ReactSSR/Basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "dev": "npm-run-all --parallel dev:**", 7 | "dev:start": "nodemon --watch build --exec node \"./build/bundle.js\"", 8 | "dev:build:server": "webpack --config webpack.server.js --watch", 9 | "dev:build:client": "webpack --config webpack.client.js --watch", 10 | "dev:dataServer": "nodemon --watch \"./src/dataServer.js\" --exec node \"./src/dataServer.js\"" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "axios": "^0.18.0", 16 | "hoist-non-react-statics": "^3.3.0", 17 | "http-proxy": "^1.17.0", 18 | "koa": "^2.7.0", 19 | "koa-session": "^5.10.1", 20 | "koa-static": "^5.0.0", 21 | "react": "^16.7.0", 22 | "react-dom": "^16.7.0", 23 | "react-redux": "^6.0.0", 24 | "react-router-config": "^4.4.0-beta.6", 25 | "react-router-dom": "^4.3.1", 26 | "redux": "^4.0.1", 27 | "redux-thunk": "^2.3.0", 28 | "stream-to-promise": "^2.2.0" 29 | }, 30 | "devDependencies": { 31 | "babel-core": "^6.26.3", 32 | "babel-loader": "^7.1.5", 33 | "babel-plugin-transform-runtime": "^6.23.0", 34 | "babel-preset-env": "^1.7.0", 35 | "babel-preset-react": "^6.24.1", 36 | "babel-preset-stage-0": "^6.24.1", 37 | "css-loader": "^2.1.0", 38 | "isomorphic-style-loader": "^5.0.1", 39 | "mini-css-extract-plugin": "^0.5.0", 40 | "webpack": "^4.29.0", 41 | "webpack-cli": "^3.2.1", 42 | "webpack-merge": "^4.2.1", 43 | "webpack-node-externals": "^1.7.2" 44 | }, 45 | "description": "" 46 | } 47 | -------------------------------------------------------------------------------- /ReactSSR/Basic/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { renderRoutes } from 'react-router-config' 3 | 4 | import Header from './components/Header' 5 | import { getHeaderInfo } from '@/store/Header/actions' 6 | import withStyles from 'isomorphic-style-loader/withStyles' 7 | import styles from './style.css' 8 | 9 | const App = props => { 10 | return ( 11 |
12 |
13 | {renderRoutes(props.route.routes)} 14 |
15 | ) 16 | } 17 | 18 | // 给服务器端渲染使用 19 | App.loadData = store => store.dispatch(getHeaderInfo()) 20 | 21 | export default withStyles(styles)(App) 22 | -------------------------------------------------------------------------------- /ReactSSR/Basic/src/Routes.js: -------------------------------------------------------------------------------- 1 | import App from './App' 2 | import NotFound from './containers/NotFound' 3 | import Home from './containers/Home' 4 | import Personal from './containers/Personal' 5 | 6 | export default [{ 7 | path: '/', 8 | component: App, 9 | loadData: App.loadData, 10 | // 多级路由 11 | routes: [{ 12 | path: '/', 13 | component: Home, 14 | exact: true, 15 | loadData: Home.loadData, 16 | key: 'home' 17 | }, { 18 | path: '/personal', 19 | component: Personal, 20 | exact: true, 21 | key: 'personal', 22 | needAuth: true 23 | }, { 24 | component: NotFound 25 | }] 26 | }] 27 | -------------------------------------------------------------------------------- /ReactSSR/Basic/src/client/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import { BrowserRouter } from 'react-router-dom' 4 | import { Provider } from 'react-redux' 5 | import { renderRoutes } from 'react-router-config' 6 | import StyleContext from 'isomorphic-style-loader/StyleContext' 7 | 8 | import { getClientStore } from '../store' 9 | import routes from '../Routes' 10 | 11 | const store = getClientStore() 12 | 13 | const insertCss = (...styles) => { 14 | const removeCss = styles.map(style => style._insertCss()) 15 | return () => removeCss.forEach(dispose => dispose()) 16 | } 17 | 18 | const App = () => { 19 | return ( 20 | 21 | 22 | 23 | {renderRoutes(routes)} 24 | 25 | 26 | 27 | ) 28 | } 29 | 30 | ReactDOM.hydrate(, document.getElementById('root')) -------------------------------------------------------------------------------- /ReactSSR/Basic/src/client/request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default axios.create({ 4 | baseURL: 'http://localhost:3000', 5 | withCredentials: true 6 | }) 7 | -------------------------------------------------------------------------------- /ReactSSR/Basic/src/components/Header/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { connect } from 'react-redux' 4 | 5 | import { login, logout } from '@/store/Header/actions' 6 | import withStyles from 'isomorphic-style-loader/withStyles' 7 | import styles from './style.css' 8 | 9 | class Header extends React.Component { 10 | render () { 11 | const { login, handleLogin, handleLogout } = this.props 12 | return ( 13 |
14 |
15 | 首页 16 | 个人中心 17 |
18 | { 19 | login 20 | ? 21 | : 22 | } 23 |
24 | ) 25 | } 26 | } 27 | 28 | const mapState = state => ({ 29 | login: state.headerReducer.login 30 | }) 31 | 32 | const mapDispatch = dispatch => ({ 33 | handleLogin () { 34 | dispatch(login()) 35 | }, 36 | handleLogout () { 37 | dispatch(logout()) 38 | } 39 | }) 40 | 41 | export default connect(mapState, mapDispatch)(withStyles(styles)(Header)) -------------------------------------------------------------------------------- /ReactSSR/Basic/src/components/Header/style.css: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding: 0 20px; 6 | height: 28px; 7 | color: #d5d5d5; 8 | background-color: #545652; 9 | } 10 | .commonText { 11 | color: #d5d5d5; 12 | outline: none; 13 | border: none; 14 | cursor: pointer; 15 | background-color: transparent; 16 | } 17 | .link { 18 | margin-right: 24px; 19 | text-decoration: none; 20 | font-weight: 700; 21 | } 22 | .link:hover { 23 | text-decoration: underline; 24 | color: #fff; 25 | } -------------------------------------------------------------------------------- /ReactSSR/Basic/src/containers/Home/index.css: -------------------------------------------------------------------------------- 1 | .home { 2 | padding: 0 20px; 3 | } 4 | .itemBox { 5 | display: inline-block; 6 | width: 115px; 7 | margin-right: 25px; 8 | overflow: hidden; 9 | cursor: pointer; 10 | text-align: center; 11 | } 12 | .pic { 13 | width: 100%; 14 | height: 161px; 15 | background-repeat: no-repeat; 16 | background-position: 50% 50%; 17 | background-size: cover; 18 | } 19 | .name { 20 | width: 100%; 21 | overflow: hidden; 22 | white-space: nowrap; 23 | text-overflow: ellipsis; 24 | font-size: 14px; 25 | color: #333; 26 | } 27 | .score { 28 | } 29 | .payTicket { 30 | height: 24px; 31 | width: 90px; 32 | line-height: 24px; 33 | cursor: pointer; 34 | color: #fff; 35 | font-size: 12px; 36 | border-radius: 2px; 37 | outline: none; 38 | border: none; 39 | background-color: #268dcd; 40 | } -------------------------------------------------------------------------------- /ReactSSR/Basic/src/containers/NotFound/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class NotFound extends React.Component { 4 | render () { 5 | if (this.props.staticContext) { 6 | this.props.staticContext.isNotFound = true 7 | } 8 | return ( 9 |

404

10 | ) 11 | } 12 | } 13 | 14 | export default NotFound 15 | -------------------------------------------------------------------------------- /ReactSSR/Basic/src/containers/Personal/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { connect } from 'react-redux' 3 | import { Redirect } from 'react-router-dom' 4 | 5 | import withStyles from 'isomorphic-style-loader/withStyles' 6 | import styles from './style.css' 7 | 8 | class Personal extends React.Component { 9 | render () { 10 | return this.props.login 11 | ?

个人中心

12 | : 13 | } 14 | } 15 | 16 | const mapState = state => ({ 17 | login: state.headerReducer.login 18 | }) 19 | 20 | export default connect(mapState, null)(withStyles(styles)(Personal)) 21 | -------------------------------------------------------------------------------- /ReactSSR/Basic/src/containers/Personal/style.css: -------------------------------------------------------------------------------- 1 | .personal { 2 | padding: 20px; 3 | } -------------------------------------------------------------------------------- /ReactSSR/Basic/src/server/request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default req => axios.create({ 4 | baseURL: 'http://localhost:9000', 5 | headers: { 6 | // 转发请求验证登录，需要把 cookie 带上 7 | cookie: req.header.cookie || '' 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /ReactSSR/Basic/src/store/Header/actions.js: -------------------------------------------------------------------------------- 1 | import { CHANGE_LOGIN } from './constants' 2 | 3 | const changeLogin = value => ({ 4 | type: CHANGE_LOGIN, 5 | value 6 | }) 7 | 8 | export const getHeaderInfo = () => { 9 | // 这里路径要写全（包括域名），如果写成 /api/douban/movie 服务器端会认为请求域名是 127.0.0.1:80 10 | return (dispatch, getState, axiosInstance) => axiosInstance('/api/isLogin').then(res => { 11 | console.log('请求 islogin接口', res.data) 12 | dispatch(changeLogin(res.data)) 13 | }).catch(e => { 14 | console.log('请求 islogin接口失败：', e) 15 | }) 16 | } 17 | 18 | export const login = () => { 19 | // 这里路径要写全（包括域名），如果写成 /api/douban/movie 服务器端会认为请求域名是 127.0.0.1:80 20 | return (dispatch, getState, axiosInstance) => axiosInstance('/api/login').then(res => { 21 | console.log('请求 login接口', res.data) 22 | dispatch(changeLogin(true)) 23 | }).catch(e => { 24 | console.log('请求 login接口失败：', e) 25 | }) 26 | } 27 | 28 | export const logout = () => { 29 | return (dispatch, getState, axiosInstance) => axiosInstance('/api/logout').then(res => { 30 | console.log('请求 logout接口', res.data) 31 | dispatch(changeLogin(false)) 32 | }).catch(e => { 33 | console.log('请求 logout接口失败：', e) 34 | }) 35 | } 36 | -------------------------------------------------------------------------------- /ReactSSR/Basic/src/store/Header/constants.js: -------------------------------------------------------------------------------- 1 | export const CHANGE_LOGIN = 'HEADER/CHANGE_LOGIN' -------------------------------------------------------------------------------- /ReactSSR/Basic/src/store/Header/reducer.js: -------------------------------------------------------------------------------- 1 | import { CHANGE_LOGIN } from './constants' 2 | 3 | const defaultState = { 4 | login: false 5 | } 6 | 7 | export default (state = defaultState, action) => { 8 | switch(action.type) { 9 | case CHANGE_LOGIN: 10 | return { 11 | ...state, 12 | login: action.value 13 | } 14 | default: 15 | return state 16 | } 17 | } -------------------------------------------------------------------------------- /ReactSSR/Basic/src/store/Home/actions.js: -------------------------------------------------------------------------------- 1 | import { CHANGE_LIST } from './constants' 2 | 3 | const changeList = list => ({ 4 | type: CHANGE_LIST, 5 | list 6 | }) 7 | 8 | export const getHomeList = () => { 9 | // 这里路径要写全（包括域名），如果写成 /api/douban/movie 服务器端会认为请求域名是 127.0.0.1:80 10 | return (dispatch, getState, axiosInstance) => axiosInstance.get('/api/v2/movie/in_theaters').then(res => { 11 | console.log('请求 v2/movie/in_theaters接口：') 12 | if (res.data.code === 0) { 13 | dispatch(changeList(res.data.respData)) 14 | } 15 | }).catch(e => { 16 | console.log('请求 v2/movie/in_theaters接口失败：', e) 17 | }) 18 | } -------------------------------------------------------------------------------- /ReactSSR/Basic/src/store/Home/constants.js: -------------------------------------------------------------------------------- 1 | export const CHANGE_LIST = 'HOME/CHANGE_LIST' -------------------------------------------------------------------------------- /ReactSSR/Basic/src/store/Home/reducer.js: -------------------------------------------------------------------------------- 1 | import { CHANGE_LIST } from './constants' 2 | 3 | const defaultState = { 4 | newsList: {} 5 | } 6 | 7 | export default (state = defaultState, action) => { 8 | switch(action.type) { 9 | case CHANGE_LIST: 10 | return { 11 | ...state, 12 | newsList: action.list 13 | } 14 | default: 15 | return state 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /ReactSSR/Basic/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware, combineReducers } from 'redux' 2 | import thunk from 'redux-thunk' 3 | import headerReducer from './Header/reducer' 4 | import homeReducer from './Home/reducer' 5 | import clientAxios from '../client/request' 6 | import serverAxios from '../server/request' 7 | 8 | const reducer = combineReducers({ 9 | homeReducer, 10 | headerReducer 11 | }) 12 | 13 | export const getStore = req => { 14 | return createStore(reducer, applyMiddleware(thunk.withExtraArgument(serverAxios(req)))) 15 | } 16 | 17 | export const getClientStore = () => { 18 | // 从服务器端输出的页面上拿到脱水的数据 19 | const defaultState = window.context.state 20 | // 当做 store的初始数据（即注水） 21 | return createStore(reducer, defaultState, applyMiddleware(thunk.withExtraArgument(clientAxios))) 22 | } -------------------------------------------------------------------------------- /ReactSSR/Basic/src/style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | } -------------------------------------------------------------------------------- /ReactSSR/Basic/webpack.base.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | resolve: { 5 | alias: { 6 | '@root': path.resolve(__dirname), 7 | '@': path.resolve(__dirname, 'src') 8 | } 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.js$/, 14 | loader: 'babel-loader', 15 | exclude: /node_modules/, 16 | options: { 17 | // 需要支持 react 18 | // 需要兼容 stage-0 19 | presets: [ 20 | 'react', 21 | 'stage-0', 22 | ['env', { 23 | targets: { 24 | browsers: ['last 2 versions'] 25 | } 26 | }] 27 | ], 28 | plugins: [ 29 | 'transform-runtime' 30 | ] 31 | } 32 | }, 33 | { 34 | test: /\.css$/, 35 | use: ['isomorphic-style-loader', { 36 | loader: 'css-loader', 37 | options: { 38 | importLoaders: 1, 39 | modules: true, 40 | localIdentName: '[name]_[local]_[hash:base64:5]' 41 | } 42 | }] 43 | }, 44 | ] 45 | } 46 | } -------------------------------------------------------------------------------- /ReactSSR/Basic/webpack.client.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const merge = require('webpack-merge') 3 | const config = require('./webpack.base.js') 4 | 5 | module.exports = merge(config, { 6 | // 入口文件 7 | entry: './src/client/index.js', 8 | // 表示是开发环境还是生产环境的代码 9 | mode: 'development', 10 | // 输出信息 11 | output: { 12 | // 输出文件名 13 | filename: 'index.js', 14 | // 输出文件路径 15 | path: path.resolve(__dirname, 'public') 16 | } 17 | }) 18 | -------------------------------------------------------------------------------- /ReactSSR/Basic/webpack.server.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const nodeExternals = require('webpack-node-externals') 3 | const merge = require('webpack-merge') 4 | const config = require('./webpack.base.js') 5 | 6 | module.exports = merge(config, { 7 | // 告诉 webpack打包的是 node端代码，避免把nodejs内置的模块打包到输出文件中，例如 fs path 8 | target: 'node', 9 | // 避免把 node_modules包下的第三方模块中包含的 nodejs内置的模块打包到出书文件中 10 | externals: [nodeExternals()], 11 | // 入口文件 12 | entry: './src/server/index.js', 13 | // 表示是开发环境还是生产环境的代码 14 | mode: 'development', 15 | // 输出信息 16 | output: { 17 | // 输出文件名 18 | filename: 'bundle.js', 19 | // 输出文件路径 20 | path: path.resolve(__dirname, 'build') 21 | } 22 | }) 23 | -------------------------------------------------------------------------------- /ReactSSR/README.md: -------------------------------------------------------------------------------- 1 | 2 | 进入 `Basic` 或 `SplitChunkV`目录（两个目录下都是完整的客户端代码，相互独立，`Basic`项目中是基本的 `SSR`项目，`SplitChunkV`是使用了代码分割的 `SSR`项目），启动客户端项目： 3 | ```js 4 | npm run dev 5 | ``` 6 | 7 | 然后访问 `http://127.0.0.1:3000`(端口号是 `koa server`端的端口号) 即可 -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | public 4 | jsconfig.json -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { renderRoutes } from 'react-router-config' 3 | 4 | import Header from './components/Header' 5 | import styles from './style.css' 6 | 7 | const App = props => { 8 | return ( 9 |
10 |
11 | {renderRoutes(props.route.routes)} 12 |
13 | ) 14 | } 15 | 16 | export default App 17 | -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/Routes.js: -------------------------------------------------------------------------------- 1 | import App from './App' 2 | 3 | import loadable from '@loadable/component' 4 | 5 | import NotFound from './containers/NotFound' 6 | import Loading from './containers/Loading' 7 | 8 | import { getHomeList } from '@/store/Home/actions' 9 | import { getHeaderInfo } from '@/store/Header/actions' 10 | 11 | const Home = loadable( 12 | () => import('./containers/Home'), 13 | { 14 | fallback: Loading, 15 | } 16 | ); 17 | const Personal = loadable( 18 | () => import('./containers/Personal'), 19 | { 20 | fallback: Loading, 21 | } 22 | ); 23 | const About = loadable( 24 | () => import('./containers/About'), 25 | { 26 | fallback: Loading, 27 | } 28 | ); 29 | 30 | export default [{ 31 | path: '/', 32 | component: App, 33 | loadData: store => store.dispatch(getHeaderInfo()), 34 | // 多级路由 35 | routes: [{ 36 | path: '/', 37 | component: Home, 38 | exact: true, 39 | loadData: store => store.dispatch(getHomeList()), 40 | key: 'home' 41 | }, { 42 | path: '/personal', 43 | component: Personal, 44 | exact: true, 45 | key: 'personal' 46 | }, { 47 | path: '/about', 48 | component: About, 49 | exact: true, 50 | key: 'about' 51 | }, { 52 | component: NotFound 53 | }] 54 | }] 55 | -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/client/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import { BrowserRouter } from 'react-router-dom' 4 | import { Provider } from 'react-redux' 5 | import { renderRoutes } from 'react-router-config' 6 | import StyleContext from 'isomorphic-style-loader/StyleContext' 7 | 8 | import { loadableReady } from '@loadable/component' 9 | 10 | import { getClientStore } from '../store' 11 | import routes from '../Routes' 12 | 13 | const store = getClientStore() 14 | 15 | const insertCss = (...styles) => { 16 | const removeCss = styles.map(style => style._insertCss()) 17 | return () => removeCss.forEach(dispose => dispose()) 18 | } 19 | 20 | const App = () => { 21 | return ( 22 | 23 | 24 | 25 | {renderRoutes(routes)} 26 | 27 | 28 | 29 | ) 30 | } 31 | 32 | loadableReady(() => { 33 | ReactDOM.hydrate(, document.getElementById('root')) 34 | }) -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/client/request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default axios.create({ 4 | baseURL: 'http://localhost:3000', 5 | withCredentials: true 6 | }) 7 | -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/components/Header/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'react-router-dom' 3 | import { connect } from 'react-redux' 4 | 5 | import { login, logout } from '@/store/Header/actions' 6 | import './style.css' 7 | 8 | class Header extends React.Component { 9 | render () { 10 | const { login, handleLogin, handleLogout } = this.props 11 | return ( 12 |
13 |
14 | 首页 15 | 个人中心 16 | 关于 17 |
18 | { 19 | login 20 | ? 21 | : 22 | } 23 |
24 | ) 25 | } 26 | } 27 | 28 | const mapState = state => ({ 29 | login: state.headerReducer.login 30 | }) 31 | 32 | const mapDispatch = dispatch => ({ 33 | handleLogin () { 34 | dispatch(login()) 35 | }, 36 | handleLogout () { 37 | dispatch(logout()) 38 | } 39 | }) 40 | 41 | export default connect(mapState, mapDispatch)(Header) -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/components/Header/style.css: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding: 0 20px; 6 | height: 28px; 7 | color: #d5d5d5; 8 | background-color: #545652; 9 | } 10 | .commonText { 11 | color: #d5d5d5; 12 | outline: none; 13 | border: none; 14 | cursor: pointer; 15 | background-color: transparent; 16 | } 17 | .link { 18 | margin-right: 24px; 19 | text-decoration: none; 20 | font-weight: 700; 21 | } 22 | .link:hover { 23 | text-decoration: underline; 24 | color: #fff; 25 | } -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/containers/About.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default () =>

About

-------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/containers/Home/index.css: -------------------------------------------------------------------------------- 1 | .home { 2 | padding: 0 20px; 3 | } 4 | .itemBox { 5 | display: inline-block; 6 | width: 115px; 7 | margin-right: 25px; 8 | overflow: hidden; 9 | cursor: pointer; 10 | text-align: center; 11 | } 12 | .pic { 13 | width: 100%; 14 | height: 161px; 15 | background-repeat: no-repeat; 16 | background-position: 50% 50%; 17 | background-size: cover; 18 | } 19 | .name { 20 | width: 100%; 21 | overflow: hidden; 22 | white-space: nowrap; 23 | text-overflow: ellipsis; 24 | font-size: 14px; 25 | color: #333; 26 | } 27 | .score { 28 | } 29 | .payTicket { 30 | height: 24px; 31 | width: 90px; 32 | line-height: 24px; 33 | cursor: pointer; 34 | color: #fff; 35 | font-size: 12px; 36 | border-radius: 2px; 37 | outline: none; 38 | border: none; 39 | background-color: #268dcd; 40 | } -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/containers/Loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default

Loading...

-------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/containers/NotFound/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | class NotFound extends React.Component { 4 | render () { 5 | if (this.props.staticContext) { 6 | this.props.staticContext.isNotFound = true 7 | } 8 | return ( 9 |

404

10 | ) 11 | } 12 | } 13 | 14 | export default NotFound 15 | -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/containers/Personal/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { connect } from 'react-redux' 3 | import { Redirect } from 'react-router-dom' 4 | 5 | import './style.css' 6 | 7 | class Personal extends React.Component { 8 | render () { 9 | return this.props.login 10 | ?

个人中心

11 | : 12 | } 13 | } 14 | 15 | const mapState = state => ({ 16 | login: state.headerReducer.login 17 | }) 18 | 19 | export default connect(mapState, null)(Personal) 20 | -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/containers/Personal/style.css: -------------------------------------------------------------------------------- 1 | .personal { 2 | padding: 20px; 3 | } -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/server/request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default req => axios.create({ 4 | baseURL: 'http://localhost:9000', 5 | headers: { 6 | // 转发请求验证登录，需要把 cookie 带上 7 | cookie: req.header.cookie || '' 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/store/Header/actions.js: -------------------------------------------------------------------------------- 1 | import { CHANGE_LOGIN } from './constants' 2 | 3 | const changeLogin = value => ({ 4 | type: CHANGE_LOGIN, 5 | value 6 | }) 7 | 8 | export const getHeaderInfo = () => { 9 | // 这里路径要写全（包括域名），如果写成 /api/douban/movie 服务器端会认为请求域名是 127.0.0.1:80 10 | return (dispatch, getState, axiosInstance) => axiosInstance('/api/isLogin').then(res => { 11 | console.log('请求 islogin接口', res.data) 12 | dispatch(changeLogin(res.data)) 13 | }).catch(e => { 14 | console.log('请求 islogin接口失败：', e) 15 | }) 16 | } 17 | 18 | export const login = () => { 19 | // 这里路径要写全（包括域名），如果写成 /api/douban/movie 服务器端会认为请求域名是 127.0.0.1:80 20 | return (dispatch, getState, axiosInstance) => axiosInstance('/api/login').then(res => { 21 | console.log('请求 login接口', res.data) 22 | dispatch(changeLogin(true)) 23 | }).catch(e => { 24 | console.log('请求 login接口失败：', e) 25 | }) 26 | } 27 | 28 | export const logout = () => { 29 | return (dispatch, getState, axiosInstance) => axiosInstance('/api/logout').then(res => { 30 | console.log('请求 logout接口', res.data) 31 | dispatch(changeLogin(false)) 32 | }).catch(e => { 33 | console.log('请求 logout接口失败：', e) 34 | }) 35 | } 36 | -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/store/Header/constants.js: -------------------------------------------------------------------------------- 1 | export const CHANGE_LOGIN = 'HEADER/CHANGE_LOGIN' -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/store/Header/reducer.js: -------------------------------------------------------------------------------- 1 | import { CHANGE_LOGIN } from './constants' 2 | 3 | const defaultState = { 4 | login: false 5 | } 6 | 7 | export default (state = defaultState, action) => { 8 | switch(action.type) { 9 | case CHANGE_LOGIN: 10 | return { 11 | ...state, 12 | login: action.value 13 | } 14 | default: 15 | return state 16 | } 17 | } -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/store/Home/actions.js: -------------------------------------------------------------------------------- 1 | import { CHANGE_LIST } from './constants' 2 | 3 | const changeList = list => ({ 4 | type: CHANGE_LIST, 5 | list 6 | }) 7 | 8 | export const getHomeList = () => { 9 | // 这里路径要写全（包括域名），如果写成 /api/douban/movie 服务器端会认为请求域名是 127.0.0.1:80 10 | return (dispatch, getState, axiosInstance) => axiosInstance.get('/api/v2/movie/in_theaters').then(res => { 11 | console.log('请求 v2/movie/in_theaters接口：') 12 | if (res.data.code === 0) { 13 | dispatch(changeList(res.data.respData)) 14 | } 15 | }).catch(e => { 16 | console.log('请求 v2/movie/in_theaters接口失败：', e) 17 | }) 18 | } -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/store/Home/constants.js: -------------------------------------------------------------------------------- 1 | export const CHANGE_LIST = 'HOME/CHANGE_LIST' -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/store/Home/reducer.js: -------------------------------------------------------------------------------- 1 | import { CHANGE_LIST } from './constants' 2 | 3 | const defaultState = { 4 | newsList: {} 5 | } 6 | 7 | export default (state = defaultState, action) => { 8 | switch(action.type) { 9 | case CHANGE_LIST: 10 | return { 11 | ...state, 12 | newsList: action.list 13 | } 14 | default: 15 | return state 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/store/index.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware, combineReducers } from 'redux' 2 | import thunk from 'redux-thunk' 3 | import headerReducer from './Header/reducer' 4 | import homeReducer from './Home/reducer' 5 | import clientAxios from '../client/request' 6 | import serverAxios from '../server/request' 7 | 8 | const reducer = combineReducers({ 9 | homeReducer, 10 | headerReducer 11 | }) 12 | 13 | export const getStore = req => { 14 | return createStore(reducer, applyMiddleware(thunk.withExtraArgument(serverAxios(req)))) 15 | } 16 | 17 | export const getClientStore = () => { 18 | // 从服务器端输出的页面上拿到脱水的数据 19 | const defaultState = window.context.state 20 | // 当做 store的初始数据（即注水） 21 | return createStore(reducer, defaultState, applyMiddleware(thunk.withExtraArgument(clientAxios))) 22 | } -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/src/style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | } -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/webpack.base.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 3 | const LoadablePlugin = require('@loadable/webpack-plugin') 4 | 5 | module.exports = { 6 | plugins: [ 7 | new LoadablePlugin(), 8 | new MiniCssExtractPlugin({ 9 | filename: `styles/[name].css` 10 | }) 11 | ], 12 | resolve: { 13 | alias: { 14 | '@': path.resolve(__dirname, 'src') 15 | } 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.js$/, 21 | loader: 'babel-loader', 22 | exclude: /node_modules/, 23 | options: { 24 | // 需要支持 react 25 | // 需要兼容 stage-0 26 | presets: [ 27 | '@babel/preset-react', 28 | // 'stage-0', 29 | ['@babel/preset-env', { 30 | targets: { 31 | browsers: ['last 2 versions'] 32 | } 33 | }] 34 | ], 35 | plugins: [ 36 | '@babel/plugin-transform-runtime', 37 | '@loadable/babel-plugin' 38 | ] 39 | } 40 | }, 41 | { 42 | test: /\.css$/, 43 | use: [ 44 | { 45 | loader: MiniCssExtractPlugin.loader, 46 | options: { 47 | publicPath: path.resolve(__dirname, 'public') 48 | } 49 | }, 50 | "css-loader" 51 | ] 52 | } 53 | ] 54 | } 55 | } -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/webpack.client.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const merge = require('webpack-merge') 3 | const config = require('./webpack.base.js') 4 | 5 | module.exports = merge(config, { 6 | // 入口文件 7 | entry: './src/client/index.js', 8 | // 表示是开发环境还是生产环境的代码 9 | mode: 'development', 10 | // 输出信息 11 | output: { 12 | // 输出文件名 13 | filename: 'index.js', 14 | // 输出文件路径 15 | path: path.resolve(__dirname, 'public') 16 | } 17 | }) 18 | -------------------------------------------------------------------------------- /ReactSSR/SplitChunkV/webpack.server.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const nodeExternals = require('webpack-node-externals') 3 | const merge = require('webpack-merge') 4 | const config = require('./webpack.base.js') 5 | 6 | module.exports = merge(config, { 7 | // 告诉 webpack打包的是 node端代码，避免把nodejs内置的模块打包到输出文件中，例如 fs path 8 | target: 'node', 9 | // 避免把 node_modules包下的第三方模块中包含的 nodejs内置的模块打包到出书文件中 10 | externals: [nodeExternals()], 11 | // 入口文件 12 | entry: './src/server/index.js', 13 | // 表示是开发环境还是生产环境的代码 14 | mode: 'development', 15 | // 输出信息 16 | output: { 17 | // 输出文件名 18 | filename: 'bundle.js', 19 | // 输出文件路径 20 | path: path.resolve(__dirname, 'build') 21 | }, 22 | // 避免路径丢失 23 | node: { 24 | __filename: true, 25 | __dirname: true 26 | } 27 | }) 28 | -------------------------------------------------------------------------------- /astrolabe/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /astrolabe/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /astrolabe/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + TypeScript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /astrolabe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "astrolabe", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vue-tsc --noEmit && vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "vue": "^3.2.25" 12 | }, 13 | "devDependencies": { 14 | "@vitejs/plugin-vue": "^2.3.3", 15 | "less": "^4.1.2", 16 | "typescript": "^4.5.4", 17 | "vite": "^2.9.9", 18 | "vue-tsc": "^0.34.7" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /astrolabe/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/public/favicon.ico -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/双子座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/双子座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/双鱼座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/双鱼座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/处女座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/处女座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/天秤座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/天秤座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/天蝎座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/天蝎座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/射手座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/射手座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/巨蟹座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/巨蟹座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/摩羯座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/摩羯座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/水瓶座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/水瓶座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/狮子座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/狮子座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/白羊座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/白羊座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/constellation/金牛座.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/constellation/金牛座.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/冥王星.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/冥王星.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/凯龙.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/凯龙.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/土星.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/土星.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/天王星.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/天王星.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/太阳.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/太阳.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/月亮.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/月亮.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/月北交.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/月北交.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/木星.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/木星.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/水星.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/水星.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/海王星.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/海王星.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/火星.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/火星.png -------------------------------------------------------------------------------- /astrolabe/src/assets/planet/金星.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/astrolabe/src/assets/planet/金星.png -------------------------------------------------------------------------------- /astrolabe/src/components/astrolabe.vue: -------------------------------------------------------------------------------- 1 | 6 | 33 | -------------------------------------------------------------------------------- /astrolabe/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /astrolabe/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /astrolabe/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"], 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /astrolabe/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /astrolabe/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }) 8 | -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/1.gif -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/11.png -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/2.png -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/3.png -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/4.png -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/5.png -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/6.png -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/7.gif -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/7.png -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/8.png -------------------------------------------------------------------------------- /canvas&&CSS&&SVG三种实现仪表盘的方式/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas&&CSS&&SVG三种实现仪表盘的方式/9.png -------------------------------------------------------------------------------- /canvas绘制雷达图/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas绘制雷达图/1.gif -------------------------------------------------------------------------------- /canvas绘制雷达图/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas绘制雷达图/2.png -------------------------------------------------------------------------------- /canvas绘制雷达图/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas绘制雷达图/3.png -------------------------------------------------------------------------------- /canvas绘制雷达图/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas绘制雷达图/4.gif -------------------------------------------------------------------------------- /canvas绘制雷达图/5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/canvas绘制雷达图/5.gif -------------------------------------------------------------------------------- /cloneDir/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/cloneDir/example.png -------------------------------------------------------------------------------- /cloneDir/index.js: -------------------------------------------------------------------------------- 1 | const execSync = require('child_process').execSync 2 | const fs = require('fs') 3 | 4 | const cmd1 = 'git init' 5 | let cmd2 = 'git remote add -f origin ' 6 | const cmd3 = 'git config core.sparsecheckout true' 7 | const cmd4 = 'git pull origin master' 8 | 9 | let path = '' 10 | 11 | process.stdin.setEncoding('utf8') 12 | process.stdout.write('请输入仓库远程地址，以及想要复制的文件路径？两个输入以及多个路径都用空格分开:\n') 13 | process.stdin.on('data', data => { 14 | console.log(data) 15 | cmd2 += data.split(' ')[0] 16 | path = data.slice(data.indexOf(' ') + 1).split(' ').join('\n') 17 | process.stdin.emit('end') 18 | }) 19 | 20 | process.stdin.on('end', () => { 21 | execSync(cmd1) 22 | console.log('完成度：25%') 23 | execSync(cmd2) 24 | console.log('完成度：50%') 25 | execSync(cmd3) 26 | console.log('完成度：75%') 27 | fs.writeFileSync('./.git/info/sparse-checkout', path) 28 | execSync(cmd4) 29 | console.log('It\'s ok!') 30 | }) -------------------------------------------------------------------------------- /code-pen/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /code-pen/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | code-pen 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /code-pen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "code-pen", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@babel/standalone": "^7.18.8", 13 | "@monaco-editor/react": "^4.4.5", 14 | "js-base64": "^3.7.2", 15 | "monaco-editor": "^0.33.0", 16 | "normalize.css": "^8.0.1", 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0", 19 | "vue": "^3.2.37", 20 | "less": "^4.1.3", 21 | "vue-template-compiler": "^2.7.6", 22 | "vue-template-es2015-compiler": "^1.9.1" 23 | }, 24 | "devDependencies": { 25 | "@types/less": "^3.0.3", 26 | "@types/react": "^18.0.15", 27 | "@types/react-dom": "^18.0.6", 28 | "@vitejs/plugin-react": "^2.0.0", 29 | "typescript": "^4.6.4", 30 | "vite": "^3.0.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /code-pen/public/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | preview 8 | 9 | 10 | 11 | 42 | 43 | -------------------------------------------------------------------------------- /code-pen/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /code-pen/src/App.less: -------------------------------------------------------------------------------- 1 | .App { 2 | display: flex; 3 | height: 100vh; 4 | } 5 | 6 | .editor-wrapper { 7 | display: flex; 8 | flex-direction: column; 9 | height: 100%; 10 | width: 40%; 11 | overflow: hidden; 12 | .editor-box { 13 | height: 25%; 14 | overflow: hidden; 15 | &.script-box { 16 | height: 50%; 17 | } 18 | } 19 | } 20 | .preview-wrapper { 21 | @headerH: 32px; 22 | width: 60%; 23 | display: flex; 24 | height: 100%; 25 | .slider-bar { 26 | width: 16px; 27 | cursor: ew-resize; 28 | background-color: #000; 29 | } 30 | .main-content { 31 | flex: 1; 32 | display: flex; 33 | flex-direction: column; 34 | overflow: hidden; 35 | .preview-header { 36 | display: flex; 37 | align-items: center; 38 | height: @headerH; 39 | padding: 6px 12px; 40 | background-color: #060606; 41 | .run-btn { 42 | padding: 6px 12px; 43 | font-size: 14px; 44 | } 45 | } 46 | >iframe { 47 | flex: 1; 48 | width: 100%; 49 | pointer-events: none; 50 | } 51 | } 52 | } 53 | .grey-btn { 54 | padding: 4px 8px; 55 | border: none; 56 | outline: none; 57 | cursor: pointer; 58 | white-space: nowrap; 59 | user-select: none; 60 | font-size: 12px; 61 | color: #fff; 62 | border-radius: 4px; 63 | background-color: #444857; 64 | &:hover { 65 | background-color: #5a5f73; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /code-pen/src/components/edit-box/index.less: -------------------------------------------------------------------------------- 1 | .edit-com { 2 | @headerH: 40px; 3 | @headerPV: 4px; 4 | height: 100%; 5 | .header-box { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | height: @headerH; 10 | padding: @headerPV 12px; 11 | user-select: none; 12 | color: #fff; 13 | cursor: ns-resize; 14 | background-color: #060606; 15 | .box-left { 16 | white-space: nowrap; 17 | .language-text { 18 | cursor: default; 19 | } 20 | >select { 21 | width: 120px; 22 | margin-left: 16px; 23 | &:focus { 24 | outline: none; 25 | } 26 | >option { 27 | width: 100%; 28 | } 29 | } 30 | } 31 | } 32 | .editor-parent { 33 | height: calc(100% - @headerPV * 2 - @headerH); 34 | background-color: #1e1e1e; 35 | color: #fff; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /code-pen/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import 'normalize.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /code-pen/src/test.less: -------------------------------------------------------------------------------- 1 | .test { 2 | display: flex; 3 | height: 100vh; 4 | .box1.box { 5 | display: flex; 6 | flex-direction: column; 7 | height: 100%; 8 | .child { 9 | position: relative; 10 | height: 30%; 11 | background-color: #1e1e1e; 12 | &:hover { 13 | z-index: 2; 14 | } 15 | .before, .after { 16 | content: ""; 17 | position: absolute; 18 | width: 100%; 19 | height: 16px; 20 | cursor: ns-resize; 21 | } 22 | .before { 23 | top: 0; 24 | } 25 | .after { 26 | bottom: 0; 27 | } 28 | } 29 | .child1 { 30 | height: 10%; 31 | } 32 | } 33 | .box { 34 | position: relative; 35 | width: calc(25% - 4px); 36 | height: 100%; 37 | background-color: #1e1e1e; 38 | z-index: 4; 39 | &:hover { 40 | z-index: 5; 41 | } 42 | .before, .after { 43 | content: ""; 44 | position: absolute; 45 | height: 100%; 46 | width: 16px; 47 | cursor: ew-resize; 48 | } 49 | .before { 50 | left: 0; 51 | } 52 | .after { 53 | right: 0; 54 | } 55 | } 56 | } 57 | 58 | .before, .after { 59 | position: relative; 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | font-size: 12px; 64 | user-select: none; 65 | color: #fff; 66 | background-color: #000; 67 | &:before { 68 | display: none; 69 | content: ""; 70 | position: absolute; 71 | top: 0; 72 | right: 0; 73 | bottom: 0; 74 | left: 0; 75 | z-index: 6; 76 | box-shadow: 0px 0px 5px 0px #007fd4; 77 | } 78 | &:hover::before { 79 | display: block; 80 | } 81 | } 82 | 83 | .box { 84 | >.before, >.after { 85 | z-index: 4; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /code-pen/src/util/edit-util.ts: -------------------------------------------------------------------------------- 1 | export const languages = { 2 | html: { id: 'html', label: 'html' }, 3 | css: { id: 'css', label: 'css' }, 4 | less: { id:'less', label: 'less' }, 5 | javascript: { id: 'javascript', label: 'javascript' }, 6 | typescript: { id: 'typescript', label: 'typescript' }, 7 | vue2: { id: 'vue2', label: 'vue2' }, 8 | vue3: { id: 'vue3', label: 'vue3' }, 9 | react: { id: 'javascript', label: 'react' }, 10 | reactTs: { id: 'typescript', label: 'reactTs' }, 11 | } as const 12 | 13 | export type TLanguageKeys = keyof typeof languages 14 | 15 | export type TLanguageData = typeof languages[keyof typeof languages] 16 | 17 | export const themeMap = { 18 | [languages.vue2.id]: 'vue2', 19 | [languages.vue3.id]: 'vue3', 20 | [languages.react.id]: 'react', 21 | [languages.reactTs.id]: 'reactTs' 22 | } as const 23 | 24 | export type TEditBoxForwardRef = { 25 | getValue: () => string 26 | getMoveRef: () => HTMLDivElement | null 27 | } 28 | 29 | export const getCustomThemeNameByLanguage = (language: keyof typeof themeMap) => (themeMap[language] + '-theme') 30 | -------------------------------------------------------------------------------- /code-pen/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | type SFCBlock = { 4 | type: string 5 | content: string 6 | attrs: Record 7 | start?: number 8 | end?: number 9 | lang?: string 10 | src?: string 11 | scoped?: boolean 12 | module?: string | boolean 13 | } 14 | declare module 'vue-template-compiler/browser' { 15 | export function compile(template: string): { render: string; staticRenderFns: string[] } 16 | export function parseComponent(file: string): { 17 | template: SFCBlock | undefined 18 | script: SFCBlock | undefined 19 | styles: SFCBlock[] 20 | customBlocks: SFCBlock[] 21 | } 22 | } 23 | 24 | declare module 'vue-template-es2015-compiler/buble' { 25 | export function transform(str: string, options?: any): { code: string } 26 | } 27 | 28 | declare module '@babel/standalone' { 29 | export function transform(str: string, options?: any): { code: string } 30 | } 31 | -------------------------------------------------------------------------------- /code-pen/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx", 18 | "baseUrl": ".", 19 | "paths": { 20 | "@/*": ["src/*"], 21 | }, 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /code-pen/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /code-pen/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | resolve: { 8 | alias: { 9 | '@/': '/src/' 10 | } 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /conversion-ui/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | package-lock.json 26 | -------------------------------------------------------------------------------- /conversion-ui/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /conversion-ui/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + TypeScript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /conversion-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "conversion-ui", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vue-tsc --noEmit && vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "vue": "^3.2.25" 12 | }, 13 | "devDependencies": { 14 | "@vitejs/plugin-vue": "^2.3.3", 15 | "less": "^4.1.2", 16 | "typescript": "^4.5.4", 17 | "vite": "^2.9.9", 18 | "vue-tsc": "^0.34.7" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /conversion-ui/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/conversion-ui/public/favicon.ico -------------------------------------------------------------------------------- /conversion-ui/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/conversion-ui/src/assets/logo.png -------------------------------------------------------------------------------- /conversion-ui/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /conversion-ui/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /conversion-ui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"], 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /conversion-ui/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /conversion-ui/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()] 7 | }) 8 | -------------------------------------------------------------------------------- /shopping-cart/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /shopping-cart/.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /shopping-cart/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | extends: [ 7 | 'plugin:vue/vue3-essential', 8 | '@vue/typescript/recommended', 9 | ], 10 | parserOptions: { 11 | ecmaVersion: 2020, 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /shopping-cart/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /shopping-cart/README.md: -------------------------------------------------------------------------------- 1 | # shopping-cart 2 | 3 | 对 `vuex` 提供更好的 `TypeScript` 类型支持的例子 4 | -------------------------------------------------------------------------------- /shopping-cart/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /shopping-cart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shopping-cart", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "vue": "^3.0.0", 13 | "vuex": "^4.0.0-0" 14 | }, 15 | "devDependencies": { 16 | "@typescript-eslint/eslint-plugin": "^4.18.0", 17 | "@typescript-eslint/parser": "^4.18.0", 18 | "@vue/cli-plugin-babel": "~4.5.0", 19 | "@vue/cli-plugin-eslint": "~4.5.0", 20 | "@vue/cli-plugin-typescript": "~4.5.0", 21 | "@vue/cli-plugin-vuex": "~4.5.0", 22 | "@vue/cli-service": "~4.5.0", 23 | "@vue/compiler-sfc": "^3.0.0", 24 | "@vue/eslint-config-typescript": "^7.0.0", 25 | "eslint": "^6.7.2", 26 | "eslint-plugin-import": "^2.20.2", 27 | "eslint-plugin-vue": "^7.0.0", 28 | "less": "^3.0.4", 29 | "less-loader": "^5.0.0", 30 | "typescript": "^4.3.5" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /shopping-cart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/shopping-cart/public/favicon.ico -------------------------------------------------------------------------------- /shopping-cart/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /shopping-cart/src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 25 | 26 | -------------------------------------------------------------------------------- /shopping-cart/src/api/shop.ts: -------------------------------------------------------------------------------- 1 | const _products = [ 2 | { 'id': 1, 'title': 'iPad 4 Mini', 'price': 500.01, 'quantity': 2, inventory: 2 }, 3 | { 'id': 2, 'title': 'H&M T-Shirt White', 'price': 10.99, 'quantity': 10, inventory: 2 }, 4 | { 'id': 3, 'title': 'Charli XCX - Sucker CD', 'price': 19.99, 'quantity': 5, inventory: 2 } 5 | ] 6 | 7 | export default { 8 | async getProducts () { 9 | await wait(100) 10 | return _products 11 | }, 12 | 13 | async buyProducts (products: { id: number; quantity: number; }[]) { 14 | await wait(100) 15 | console.log('buyProducts products') 16 | } 17 | } 18 | 19 | function wait (ms: number) { 20 | return new Promise(resolve => { 21 | setTimeout(resolve, ms) 22 | }) 23 | } -------------------------------------------------------------------------------- /shopping-cart/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/shopping-cart/src/assets/logo.png -------------------------------------------------------------------------------- /shopping-cart/src/components/ProductList.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 39 | 40 | 41 | 57 | -------------------------------------------------------------------------------- /shopping-cart/src/components/ShoppingCart.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | -------------------------------------------------------------------------------- /shopping-cart/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue'; 2 | import App from './App.vue'; 3 | import store, { key } from './store'; 4 | 5 | const app = createApp(App); 6 | app.use(store, key); 7 | app.mount('#app'); 8 | -------------------------------------------------------------------------------- /shopping-cart/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | import { ComponentCustomProperties } from 'vue' 2 | import { TRootStore } from '@/store/index' 3 | 4 | /* eslint-disable */ 5 | declare module '*.vue' { 6 | import type { DefineComponent } from 'vue' 7 | const component: DefineComponent<{}, {}, any> 8 | export default component 9 | } 10 | declare module '@vue/runtime-core' { 11 | interface ComponentCustomProperties { 12 | $store: TRootStore 13 | } 14 | } -------------------------------------------------------------------------------- /shopping-cart/src/store/index.ts: -------------------------------------------------------------------------------- 1 | import { InjectionKey } from 'vue' 2 | import { createStore, createLogger, Store as VuexStore, useStore as baseUseStore } from 'vuex' 3 | import { 4 | store as cartStore, TState as TCartState, TGetters as TCartGetters, moduleName as cartModuleName, 5 | TActions as TCartActions, TMutations as TCartMutations, TCartStore 6 | } from '@/store/modules/cart' 7 | import { 8 | store as productStore, TState as TProductState, TGetters as TProductsGetters, moduleName as productsModuleName, 9 | TActions as TProductsActions, TMutations as TProductsMutations, TProductsStore 10 | } from '@/store/modules/products' 11 | import { RootGettersReturnType } from '@/store/type' 12 | 13 | const debug = process.env.NODE_ENV !== 'production' 14 | 15 | export type TRootState = { 16 | [cartModuleName]: TCartState; 17 | [productsModuleName]: TProductState; 18 | } 19 | export type TRootActions = { 20 | [cartModuleName]: TCartActions; 21 | [productsModuleName]: TProductsActions; 22 | } 23 | export type TRootMutations = { 24 | [cartModuleName]: TCartMutations; 25 | [productsModuleName]: TProductsMutations; 26 | } 27 | export type TRootGetters = RootGettersReturnType 28 | & RootGettersReturnType 29 | 30 | export type TRootStore = TCartStore & TProductsStore 31 | 32 | export default createStore({ 33 | modules: { 34 | [cartModuleName]: cartStore, 35 | [productsModuleName]: productStore 36 | }, 37 | strict: debug, 38 | plugins: debug ? [createLogger()] : [] 39 | }) 40 | 41 | export const key: InjectionKey> = Symbol('store') 42 | 43 | export function useStore (): TRootStore { 44 | return baseUseStore(key) 45 | } 46 | -------------------------------------------------------------------------------- /shopping-cart/src/utils/currency.ts: -------------------------------------------------------------------------------- 1 | const digitsRE = /(\d{3})(?=\d)/g 2 | 3 | export function currency (value: string | number, currency?: string, decimals?: number) { 4 | const strValue = parseFloat(String(value)) 5 | if (!isFinite(strValue) || (!strValue && strValue !== 0)) return '' 6 | currency = currency || '$' 7 | decimals = typeof decimals === 'number' ? decimals : 2 8 | var stringified = Math.abs(strValue).toFixed(decimals) 9 | var _int = decimals 10 | ? stringified.slice(0, -1 - decimals) 11 | : stringified 12 | var i = _int.length % 3 13 | var head = i > 0 14 | ? (_int.slice(0, i) + (_int.length > 3 ? ',' : '')) 15 | : '' 16 | var _float = decimals 17 | ? stringified.slice(-1 - decimals) 18 | : '' 19 | var sign = strValue < 0 ? '-' : '' 20 | return sign + currency + head + 21 | _int.slice(i).replace(digitsRE, '$1,') + 22 | _float 23 | } -------------------------------------------------------------------------------- /shopping-cart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "skipLibCheck": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | }, 22 | "lib": [ 23 | "esnext", 24 | "dom", 25 | "dom.iterable", 26 | "scripthost" 27 | ] 28 | }, 29 | "include": [ 30 | "src/**/*.ts", 31 | "src/**/*.tsx", 32 | "src/**/*.vue", 33 | "tests/**/*.ts", 34 | "tests/**/*.tsx" 35 | ], 36 | "exclude": [ 37 | "node_modules" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /xstate-table/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /xstate-table/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /xstate-table/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + TypeScript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /xstate-table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xstate-table", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@arco-design/web-vue": "^2.33.0", 12 | "@xstate/vue": "^2.0.0", 13 | "vue": "^3.2.25", 14 | "xstate": "^4.32.1" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^2.3.3", 18 | "consola": "^2.15.3", 19 | "less": "^4.1.3", 20 | "typescript": "^4.5.4", 21 | "vite": "^2.9.9", 22 | "vite-plugin-style-import": "^2.0.0", 23 | "vue-tsc": "^0.34.7" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /xstate-table/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/xstate-table/public/favicon.ico -------------------------------------------------------------------------------- /xstate-table/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 18 | -------------------------------------------------------------------------------- /xstate-table/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/xstate-table/src/assets/logo.png -------------------------------------------------------------------------------- /xstate-table/src/components/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | -------------------------------------------------------------------------------- /xstate-table/src/components/util.ts: -------------------------------------------------------------------------------- 1 | export type TData = { 2 | list: { 3 | name: string 4 | age: number 5 | }[] 6 | total: number 7 | } 8 | 9 | // 模拟远程数据请求 10 | export const getTableData = async (page: number, searchValue = '') => { 11 | return new Promise((resolve, reject) => { 12 | setTimeout(() => { 13 | if (page === 3) { 14 | reject() 15 | return 16 | } 17 | resolve({ 18 | list: Array.from({ length: 10 }).fill(1).map((_, i) => ({ 19 | name: page + '__' + searchValue + '__' + Math.random().toString(36).substring(2), 20 | age: Math.round(Math.random() * 100) 21 | })), 22 | total: 100 23 | }) 24 | }, (Math.random() * 1 + 0.5) * 1000) 25 | }) 26 | } 27 | 28 | export const columns = [ 29 | { 30 | title: 'Name', 31 | dataIndex: 'name', 32 | }, 33 | { 34 | title: 'Age', 35 | dataIndex: 'age', 36 | }, 37 | ] 38 | -------------------------------------------------------------------------------- /xstate-table/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /xstate-table/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /xstate-table/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "sourceMap": true, 10 | "resolveJsonModule": true, 11 | "isolatedModules": true, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"], 14 | "skipLibCheck": true 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 17 | "references": [{ "path": "./tsconfig.node.json" }] 18 | } 19 | -------------------------------------------------------------------------------- /xstate-table/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "esnext", 5 | "moduleResolution": "node" 6 | }, 7 | "include": ["vite.config.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /xstate-table/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import { createStyleImportPlugin } from 'vite-plugin-style-import' 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [ 8 | vue(), 9 | createStyleImportPlugin({ 10 | libs: [ 11 | { 12 | libraryName: '@arco-design/web-vue', 13 | esModule: true, 14 | resolveStyle: (name) => { 15 | // less 16 | return `@arco-design/web-vue/es/${name}/style/index.js` 17 | }, 18 | } 19 | ] 20 | }) 21 | ], 22 | }) 23 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/README.md: -------------------------------------------------------------------------------- 1 | # vue-test1 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-test1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.6.6", 12 | "vue-router": "^3.0.2" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.5.0", 16 | "@vue/cli-plugin-eslint": "^3.5.0", 17 | "@vue/cli-service": "^3.5.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.8.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | }, 37 | "postcss": { 38 | "plugins": { 39 | "autoprefixer": {} 40 | } 41 | }, 42 | "browserslist": [ 43 | "> 1%", 44 | "last 2 versions", 45 | "not ie <= 8" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/一种移动端模拟实现返回拦截的方案/public/favicon.ico -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 17 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/一种移动端模拟实现返回拦截的方案/src/assets/logo.png -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/src/components/physicsBack/footerModal.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 57 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/src/components/physicsBack/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 48 | 49 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import router from './router' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | render: h => h(App), 10 | router 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /一种移动端模拟实现返回拦截的方案/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import physicsBack from './components/physicsBack' 5 | 6 | Vue.use(VueRouter) 7 | 8 | const router = new VueRouter({ 9 | routes: [{ 10 | path: '/physicsBack/(footerModal)?', 11 | component: physicsBack 12 | }] 13 | }) 14 | 15 | export default router -------------------------------------------------------------------------------- /元素跟随滚动/img/0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/0.png -------------------------------------------------------------------------------- /元素跟随滚动/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/1.png -------------------------------------------------------------------------------- /元素跟随滚动/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/2.png -------------------------------------------------------------------------------- /元素跟随滚动/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/3.png -------------------------------------------------------------------------------- /元素跟随滚动/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/4.png -------------------------------------------------------------------------------- /元素跟随滚动/img/ek.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/ek.jpg -------------------------------------------------------------------------------- /元素跟随滚动/img/math1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/math1.png -------------------------------------------------------------------------------- /元素跟随滚动/img/math2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/math2.png -------------------------------------------------------------------------------- /元素跟随滚动/img/math3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/math3.png -------------------------------------------------------------------------------- /元素跟随滚动/img/scrollBy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/scrollBy.gif -------------------------------------------------------------------------------- /元素跟随滚动/img/scrollBy_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/scrollBy_1.gif -------------------------------------------------------------------------------- /元素跟随滚动/img/scrollBy_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/scrollBy_2.gif -------------------------------------------------------------------------------- /元素跟随滚动/img/scrollBy_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/scrollBy_3.gif -------------------------------------------------------------------------------- /元素跟随滚动/img/scrollBy_4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/scrollBy_4.gif -------------------------------------------------------------------------------- /元素跟随滚动/img/scrollBy_5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/scrollBy_5.gif -------------------------------------------------------------------------------- /元素跟随滚动/img/w3c1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/w3c1.png -------------------------------------------------------------------------------- /元素跟随滚动/img/zj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/元素跟随滚动/img/zj.jpg -------------------------------------------------------------------------------- /动效柱状图/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 -------------------------------------------------------------------------------- /动效柱状图/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/airbnb' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } -------------------------------------------------------------------------------- /动效柱状图/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /动效柱状图/.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } -------------------------------------------------------------------------------- /动效柱状图/README.md: -------------------------------------------------------------------------------- 1 | # vue-test2 2 | 3 | >本示例基于 `Vue CLI 3`，需要 `node`版本 `8.10.0+` 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | 20 | ### Lints and fixes files 21 | ``` 22 | npm run lint 23 | ``` 24 | -------------------------------------------------------------------------------- /动效柱状图/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /动效柱状图/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-test2", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.16" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.0.0-rc.10", 15 | "@vue/cli-plugin-eslint": "^3.0.0-rc.10", 16 | "@vue/cli-service": "^3.0.0-rc.10", 17 | "@vue/eslint-config-airbnb": "^3.0.0-rc.10", 18 | "node-sass": "^4.9.2", 19 | "sass-loader": "^7.1.0", 20 | "vue-template-compiler": "^2.5.16" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /动效柱状图/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/动效柱状图/public/favicon.ico -------------------------------------------------------------------------------- /动效柱状图/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-test2 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /动效柱状图/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 28 | 29 | 39 | -------------------------------------------------------------------------------- /动效柱状图/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/动效柱状图/src/assets/logo.png -------------------------------------------------------------------------------- /动效柱状图/src/assets/star_gf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/动效柱状图/src/assets/star_gf.png -------------------------------------------------------------------------------- /动效柱状图/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /在线编辑器/README.md: -------------------------------------------------------------------------------- 1 | 项目文档说明： 2 | 3 | [自己实现一个功能较为简单的编辑器](./README/README1.md) 4 | 5 | [使用 Ace 和 CodeMirror 实现一个编辑器](./README/README2.md) 6 | 7 | ## 启动项目 8 | 9 | 将项目 `clone` 到本地，进入 `./project`目录输入： 10 | >npm start 11 | 12 | ## 页面 13 | 14 | 地址栏输入下面的地址，进入[自己实现一个功能较为简单的编辑器](./README/README1.md)的页面 15 | >http://localhost:3000 或 http://localhost:3000/a 16 | 17 | 地址栏输入下面的地址，进入[使用 Ace使用一个编辑器](./README/README2.md)的页面 18 | >http://localhost:3000/b 19 | 20 | 地址栏输入下面的地址，进入[使用 CodeMirror](./README/README2.md)的页面 21 | >http://localhost:3000/c 22 | -------------------------------------------------------------------------------- /在线编辑器/img/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/img/1.gif -------------------------------------------------------------------------------- /在线编辑器/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/img/1.png -------------------------------------------------------------------------------- /在线编辑器/img/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/img/2.gif -------------------------------------------------------------------------------- /在线编辑器/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/img/3.png -------------------------------------------------------------------------------- /在线编辑器/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/img/4.png -------------------------------------------------------------------------------- /在线编辑器/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/img/5.png -------------------------------------------------------------------------------- /在线编辑器/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/img/6.png -------------------------------------------------------------------------------- /在线编辑器/img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/img/7.png -------------------------------------------------------------------------------- /在线编辑器/img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/img/8.png -------------------------------------------------------------------------------- /在线编辑器/project/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /在线编辑器/project/README.md: -------------------------------------------------------------------------------- 1 | >在线编辑器示例代码 -------------------------------------------------------------------------------- /在线编辑器/project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-test", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "brace": "^0.11.0", 7 | "codemirror": "^5.33.0", 8 | "highlight.js": "^9.12.0", 9 | "lodash.debounce": "^4.0.8", 10 | "lodash.isequal": "^4.5.0", 11 | "marked": "^4.0.10", 12 | "node-sass-chokidar": "^0.0.3", 13 | "npm-run-all": "^4.1.2", 14 | "prop-types": "^15.6.0", 15 | "react": "^16.2.0", 16 | "react-dom": "^16.2.0", 17 | "react-router-dom": "^4.2.2", 18 | "react-scripts": "1.0.17" 19 | }, 20 | "scripts": { 21 | "build-css": "node-sass-chokidar src/ -o src/", 22 | "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive", 23 | "start-js": "react-scripts start", 24 | "start": "npm-run-all -p watch-css start-js", 25 | "build-js": "react-scripts build", 26 | "build": "npm-run-all build-css build-js", 27 | "test": "react-scripts test --env=jsdom", 28 | "eject": "react-scripts eject" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /在线编辑器/project/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/project/public/favicon.ico -------------------------------------------------------------------------------- /在线编辑器/project/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /在线编辑器/project/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /在线编辑器/project/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /在线编辑器/project/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | BrowserRouter as Router, 4 | Route 5 | } from 'react-router-dom' 6 | 7 | import EditorA from './Component/EditorA' 8 | import EditorC from './Component/EditorC' 9 | import EditorB from './Component/EditorB' 10 | 11 | class App extends Component { 12 | render() { 13 | return ( 14 | 15 |
16 | 17 | 18 | 19 | 20 |
21 | 22 | ) 23 | } 24 | } 25 | 26 | export default App 27 | -------------------------------------------------------------------------------- /在线编辑器/project/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /在线编辑器/project/src/Component/AceEditor/editorOptions.js: -------------------------------------------------------------------------------- 1 | const editorOptions = [ 2 | 'minLines', 3 | 'maxLines', 4 | 'readOnly', 5 | 'highlightActiveLine', 6 | 'tabSize', 7 | 'enableBasicAutocompletion', 8 | 'enableLiveAutocompletion', 9 | 'enableSnippets', 10 | ] 11 | 12 | const editorEvents = [ 13 | 'onChange', 14 | 'onFocus', 15 | 'onInput', 16 | 'onBlur', 17 | 'onCopy', 18 | 'onPaste', 19 | 'onSelectionChange', 20 | 'onCursorChange', 21 | 'onScroll', 22 | 'handleOptions', 23 | 'updateRef', 24 | ] 25 | 26 | export { 27 | editorOptions, 28 | editorEvents 29 | } -------------------------------------------------------------------------------- /在线编辑器/project/src/Component/EditorA/style.css: -------------------------------------------------------------------------------- 1 | .editor-main-a { 2 | display: flex; 3 | flex: 1; } 4 | .editor-main-a .common-container { 5 | width: 50%; 6 | overflow-y: scroll; 7 | border: 1px solid #ddd; 8 | border-top: none; } 9 | .editor-main-a .common-container .common-wrapper { 10 | padding: 20px; 11 | min-height: 100%; 12 | outline: none; } 13 | -------------------------------------------------------------------------------- /在线编辑器/project/src/Component/EditorA/style.scss: -------------------------------------------------------------------------------- 1 | // 编辑框主体样式 2 | .editor-main-a { 3 | display: flex; 4 | flex: 1; 5 | .common-container { 6 | width: 50%; 7 | overflow-y: scroll; 8 | border: 1px solid #ddd; 9 | border-top: none; 10 | .common-wrapper { 11 | padding: 20px; 12 | min-height: 100%; 13 | outline: none; 14 | } 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /在线编辑器/project/src/Component/EditorB/style.css: -------------------------------------------------------------------------------- 1 | .editor-main-b { 2 | display: flex; 3 | flex: 1; 4 | overflow: hidden; } 5 | .editor-main-b .common-container { 6 | width: 50%; 7 | border: 1px solid #ddd; 8 | overflow-y: hidden; 9 | border-top: none; 10 | padding: 0 20px; } 11 | .editor-main-b .editor-container { 12 | padding-right: 0; 13 | overflow: hidden; } 14 | .editor-main-b .preview-container { 15 | overflow-y: scroll; } 16 | -------------------------------------------------------------------------------- /在线编辑器/project/src/Component/EditorB/style.scss: -------------------------------------------------------------------------------- 1 | // 编辑框主体样式 2 | .editor-main-b { 3 | display: flex; 4 | flex: 1; 5 | overflow: hidden; 6 | .common-container { 7 | width: 50%; 8 | border: 1px solid #ddd; 9 | overflow-y: hidden; 10 | border-top: none; 11 | padding: 0 20px; 12 | } 13 | .editor-container { 14 | padding-right: 0; 15 | overflow: hidden; 16 | } 17 | .preview-container { 18 | overflow-y: scroll; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /在线编辑器/project/src/Component/EditorC/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 3 | font-size: 14px; 4 | color: #333; 5 | margin: 0; 6 | padding: 0; } 7 | 8 | a { 9 | color: #08c; 10 | text-decoration: none; } 11 | 12 | a:hover { 13 | text-decoration: underline; } 14 | 15 | h1, h2, h3, h4, h5, h6 { 16 | color: #222; 17 | font-weight: 100; 18 | margin: 1em 0; } 19 | 20 | .editor-main-c { 21 | display: flex; 22 | overflow: hidden; } 23 | .editor-main-c .common-container { 24 | width: 50%; } 25 | .editor-main-c .editor-container { 26 | border-bottom: 1px solid #ddd; } 27 | .editor-main-c .preview-container { 28 | overflow-y: scroll; 29 | border: 1px solid #ddd; 30 | border-top: none; } 31 | .editor-main-c .preview-container .preview-wrapper { 32 | padding: 20px; } 33 | .editor-main-c .preview-container .preview-wrapper *:last-child { 34 | margin-bottom: 0; } 35 | .editor-main-c .preview-container .preview-wrapper *:first-child { 36 | margin-top: 0; } 37 | 38 | .ReactCodeMirror { 39 | height: 100%; } 40 | .ReactCodeMirror .CodeMirror { 41 | height: 100%; } 42 | -------------------------------------------------------------------------------- /在线编辑器/project/src/Component/EditorC/style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 3 | font-size: 14px; 4 | color: #333; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | a { 10 | color: #08c; 11 | text-decoration: none; 12 | } 13 | 14 | a:hover { 15 | text-decoration: underline; 16 | } 17 | 18 | h1, h2, h3, h4, h5, h6 { 19 | color: #222; 20 | font-weight: 100; 21 | margin: 1em 0; 22 | } 23 | 24 | 25 | // 编辑框主体样式 26 | .editor-main-c { 27 | display: flex; 28 | overflow: hidden; 29 | .common-container { 30 | width: 50%; 31 | } 32 | .editor-container { 33 | border-bottom: 1px solid #ddd; 34 | } 35 | .preview-container { 36 | overflow-y: scroll; 37 | border: 1px solid #ddd; 38 | border-top: none; 39 | .preview-wrapper { 40 | padding: 20px; 41 | *:last-child { 42 | margin-bottom: 0; 43 | } 44 | *:first-child { 45 | margin-top: 0; 46 | } 47 | } 48 | } 49 | } 50 | 51 | .ReactCodeMirror { 52 | height: 100%; 53 | .CodeMirror { 54 | height: 100%; 55 | } 56 | } -------------------------------------------------------------------------------- /在线编辑器/project/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /在线编辑器/project/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /在线编辑器/project/src/routeMap.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | BrowserRouter as Router, 4 | Route, 5 | Link 6 | } from 'react-router-dom' 7 | 8 | import App from './App' 9 | 10 | 11 | export default ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | ) -------------------------------------------------------------------------------- /在线编辑器/project/src/static/img/md.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/project/src/static/img/md.png -------------------------------------------------------------------------------- /在线编辑器/project/src/static/img/upload-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/在线编辑器/project/src/static/img/upload-img.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/12.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/13.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/14.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/15.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/16.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/17.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/18.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/19.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/20.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/img/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/将自己在CSDN上的文章下载到本地并上传到掘金/img/21.png -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 此为入口文件，定位到此文件所在目录，打开控制台，输入 `node index` 即可启动项目 3 | */ 4 | require('./src/getCSDNData.js')() -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "puppeteertest", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1" 7 | }, 8 | "author": "", 9 | "license": "ISC", 10 | "description": "", 11 | "dependencies": { 12 | "puppeteer": "^1.7.0", 13 | "vue": "^2.5.17" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/src/download.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const fs = require('fs') 3 | const upload = require('./upload') 4 | const downloadImg = require('./downloadImg') 5 | const { clearFilePath } = require('./util') 6 | const successDownLoad = [], errorDownload = [] 7 | 8 | // 将下载下来的文章保存到本地文件 9 | const download = async(title, content, articleId) => { 10 | // 写文件前，先把图片下载下来，并替换文件名 11 | // 因为标题被处理过了，可能不是原来的标题，所以这里将原来完整的标题也加到正文里去 12 | const realTitle = clearFilePath(title) 13 | fs.mkdirSync(path.resolve(__dirname, '../article', realTitle)) 14 | const manageContent = await downloadImg({title: realTitle, content, articleId}) 15 | console.log('开始下载：', title) 16 | const realContent = `# ${title}\n\n` + manageContent 17 | fs.writeFile(path.resolve(__dirname, '../article', realTitle, 'index.md'), realContent, err => { 18 | if (err) { 19 | console.log('createFile Err:', title, err) 20 | errorDownload.push(title) 21 | console.log(`下载失败的文章(共${errorDownload.length}篇)：`, errorDownload) 22 | } else { 23 | // 如果你不想上传，就不调用 upload 即可 24 | upload(title, manageContent) 25 | successDownLoad.push(title) 26 | console.log(`已经下载完毕${successDownLoad.length}篇文章`) 27 | } 28 | }) 29 | } 30 | 31 | module.exports = download -------------------------------------------------------------------------------- /将自己在CSDN上的文章下载到本地并上传到掘金/src/util.js: -------------------------------------------------------------------------------- 1 | const puppeteer = require('puppeteer') 2 | 3 | // 导航超时时间 4 | const timeout = 0 5 | // 系统 6 | const browserFetcher = puppeteer.createBrowserFetcher() 7 | const platform = browserFetcher.platform() 8 | 9 | /** 10 | * 有的标题中含有特殊字符，例如 / :等，无法作为文件名，所以需要清理一下 11 | * @param {*} filePath: 需要被清理的源文件名 12 | */ 13 | const clearFilePath = filePath => { 14 | return filePath.replace(/[\/:*?"<>|]/g, '!') 15 | } 16 | 17 | const sleep = (timer = 500) => { 18 | return new Promise(resolve => { 19 | const st = setTimeout(() => { 20 | clearTimeout(st) 21 | resolve() 22 | }, timer) 23 | }) 24 | } 25 | 26 | module.exports = { 27 | timeout, 28 | platform, 29 | sleep, 30 | clearFilePath 31 | } -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/1.png -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | 4 | } 5 | }) 6 | -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "index/index", 4 | "index/solutionA/index", 5 | "index/solutionB/index" 6 | ], 7 | "window":{ 8 | "backgroundTextStyle":"light", 9 | "navigationBarBackgroundColor": "#fff", 10 | "navigationBarTitleText": "WeChat", 11 | "navigationBarTextStyle":"black" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/app.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/app.wxss -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/58a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/58a.png -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/index.js: -------------------------------------------------------------------------------- 1 | // index/index.js 2 | Page({ 3 | goSolution(e) { 4 | wx.navigateTo({ 5 | url: e.target.id === 'a' ? '/index/solutionA/index' : '/index/solutionB/index' 6 | }) 7 | } 8 | }) -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/index.wxss: -------------------------------------------------------------------------------- 1 | /* index/index.wxss */ -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/solutionA/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp() 2 | 3 | // 以iphone6 作为基准 4 | const baseWidth = 375 5 | const baseHeight= 603 6 | // 当前设备与iphone6的宽度比例 7 | let scale = 1 8 | 9 | Page({ 10 | data: { 11 | canvasWidth: 0, 12 | canvasHeight: 0 13 | }, 14 | onLoad () { 15 | this.getCurrentSize() 16 | }, 17 | drawCanvas () { 18 | const ctx = wx.createCanvasContext('shareCard') 19 | ctx.drawImage('../58a.png', this.remSize(85), this.remSize(100), this.remSize(205), this.remSize(250)) 20 | ctx.setFontSize(this.remSize(16)) 21 | ctx.setFillStyle('yellowgreen') 22 | ctx.fillText('flexible canvas', this.remSize(100), this.remSize(130)) 23 | ctx.draw() 24 | }, 25 | // 获取当前设备尺寸信息 26 | getCurrentSize () { 27 | const { windowWidth, windowHeight } = wx.getSystemInfoSync() 28 | scale = windowWidth / baseWidth 29 | this.setData({ 30 | canvasWidth: windowWidth, 31 | canvasHeight: windowWidth * (baseHeight / baseWidth) 32 | }, () => { 33 | this.drawCanvas() 34 | }) 35 | }, 36 | remSize (num) { 37 | return num * scale 38 | } 39 | }) 40 | -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/solutionA/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/solutionA/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/solutionA/index.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/solutionA/index.wxss -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/solutionB/index.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/solutionB/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/index/solutionB/index.wxss: -------------------------------------------------------------------------------- 1 | page { 2 | overflow-x: scroll; 3 | } -------------------------------------------------------------------------------- /小程序 Canvas绘图不同尺寸设备 UI兼容的两个解决方案/project/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.94", 12 | "appid": "touristappid", 13 | "projectname": "canvasFlexible", 14 | "condition": { 15 | "search": { 16 | "current": -1, 17 | "list": [] 18 | }, 19 | "conversation": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "game": { 24 | "currentL": -1, 25 | "list": [] 26 | }, 27 | "miniprogram": { 28 | "current": -1, 29 | "list": [] 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/小程序canvas绘制圆角矩形/img/1.png -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/小程序canvas绘制圆角矩形/img/2.png -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/小程序canvas绘制圆角矩形/img/3.png -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/小程序canvas绘制圆角矩形/img/4.png -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/project/app.js: -------------------------------------------------------------------------------- 1 | App({ 2 | onLaunch: function () { 3 | 4 | } 5 | }) 6 | -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/project/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "index/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle":"black" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/project/app.wxss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/小程序canvas绘制圆角矩形/project/app.wxss -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/project/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/project/index/index.wxss: -------------------------------------------------------------------------------- 1 | .card_canvas { 2 | background-color: pink; 3 | } -------------------------------------------------------------------------------- /小程序canvas绘制圆角矩形/project/project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件。", 3 | "setting": { 4 | "urlCheck": true, 5 | "es6": true, 6 | "postcss": true, 7 | "minified": true, 8 | "newFeature": true 9 | }, 10 | "compileType": "miniprogram", 11 | "libVersion": "1.9.94", 12 | "appid": "touristappid", 13 | "projectname": "borderRadius", 14 | "condition": { 15 | "search": { 16 | "current": -1, 17 | "list": [] 18 | }, 19 | "conversation": { 20 | "current": -1, 21 | "list": [] 22 | }, 23 | "game": { 24 | "currentL": -1, 25 | "list": [] 26 | }, 27 | "miniprogram": { 28 | "current": -1, 29 | "list": [] 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /抛物线小球react+vue/img/ele.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/抛物线小球react+vue/img/ele.gif -------------------------------------------------------------------------------- /抛物线小球react+vue/img/react.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/抛物线小球react+vue/img/react.gif -------------------------------------------------------------------------------- /抛物线小球react+vue/img/vue.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/抛物线小球react+vue/img/vue.gif -------------------------------------------------------------------------------- /抛物线小球react+vue/img/xy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/抛物线小球react+vue/img/xy.png -------------------------------------------------------------------------------- /抛物线小球react+vue/img/xy2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/抛物线小球react+vue/img/xy2.png -------------------------------------------------------------------------------- /抛物线小球react+vue/react-flyball/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /抛物线小球react+vue/react-flyball/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | -------------------------------------------------------------------------------- /抛物线小球react+vue/react-flyball/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | 4 | import Cart from './parabola' 5 | 6 | render( 7 | , 8 | document.getElementById('root') 9 | ) 10 | -------------------------------------------------------------------------------- /抛物线小球react+vue/react-flyball/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_test", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --devtool eval --colors --history-api-fallback --hot" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "react": "^15.6.1", 13 | "react-dom": "^15.6.1" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.25.0", 17 | "babel-loader": "^7.1.1", 18 | "babel-preset-es2015": "^6.24.1", 19 | "babel-preset-react": "^6.24.1", 20 | "babel-preset-stage-0": "^6.24.1", 21 | "css-loader": "^0.28.4", 22 | "html-webpack-plugin": "^2.30.1", 23 | "style-loader": "^0.18.2", 24 | "webpack": "^3.4.1", 25 | "webpack-dev-server": "^2.6.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /抛物线小球react+vue/react-flyball/parabola/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | } 4 | .target { 5 | width: 40px; 6 | height: 40px; 7 | background-color: yellowgreen; 8 | transform: translate(280px, 300px); 9 | } 10 | .flyBall { 11 | position: absolute; 12 | width: 20px; 13 | height: 20px; 14 | border-radius: 50%; 15 | background-color: skyblue; 16 | } -------------------------------------------------------------------------------- /抛物线小球react+vue/react-flyball/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const HtmlWebpackPlugin = require('html-webpack-plugin') 4 | 5 | module.exports = { 6 | entry: path.resolve(__dirname, 'index.js'), 7 | output: { 8 | path: path.resolve(__dirname, 'build'), 9 | filename: 'bundle.js' 10 | }, 11 | resolve: { 12 | enforceExtension: false, 13 | extensions: ['.js', '.jsx'], 14 | }, 15 | module: { 16 | rules: [ 17 | { 18 | test: /\.(js|jsx)$/, 19 | exclude: /node_modules/, 20 | use: [ 21 | { 22 | loader: 'babel-loader', 23 | options: { 24 | presets: ['es2015', 'react', 'stage-0'] 25 | } 26 | } 27 | ] 28 | }, 29 | { 30 | test: /\.css$/, 31 | exclude: /node_modules/, 32 | use: ['style-loader', 'css-loader'] 33 | } 34 | ] 35 | }, 36 | 37 | plugins: [ 38 | // html 模板插件 39 | new HtmlWebpackPlugin({ 40 | template: __dirname + '/index.html' 41 | }), 42 | // 热加载插件 43 | new webpack.HotModuleReplacementPlugin(), 44 | ], 45 | 46 | devServer: { 47 | host: '0.0.0.0', 48 | port: 8086, 49 | historyApiFallback: true, //不跳转 50 | inline: true, //实时刷新 51 | hot: true // 使用热加载插件 HotModuleReplacementPlugin 52 | } 53 | } -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | *.js 4 | *.vue 5 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | test/unit/coverage 8 | test/e2e/reports 9 | selenium-debug.log 10 | 11 | # Editor directories and files 12 | .idea 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/README.md: -------------------------------------------------------------------------------- 1 | # vue-test 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | 20 | # run unit tests 21 | npm run unit 22 | 23 | # run e2e tests 24 | npm run e2e 25 | 26 | # run all tests 27 | npm test 28 | ``` 29 | 30 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 31 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/build/build.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | var ora = require('ora') 6 | var rm = require('rimraf') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var webpack = require('webpack') 10 | var config = require('../config') 11 | var webpackConfig = require('./webpack.prod.conf') 12 | 13 | var spinner = ora('building for production...') 14 | spinner.start() 15 | 16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 17 | if (err) throw err 18 | webpack(webpackConfig, function (err, stats) { 19 | spinner.stop() 20 | if (err) throw err 21 | process.stdout.write(stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, 25 | chunks: false, 26 | chunkModules: false 27 | }) + '\n\n') 28 | 29 | if (stats.hasErrors()) { 30 | console.log(chalk.red(' Build failed with errors.\n')) 31 | process.exit(1) 32 | } 33 | 34 | console.log(chalk.cyan(' Build complete.\n')) 35 | console.log(chalk.yellow( 36 | ' Tip: built files are meant to be served over an HTTP server.\n' + 37 | ' Opening index.html over file:// won\'t work.\n' 38 | )) 39 | }) 40 | }) 41 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | var shell = require('shelljs') 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | } 15 | ] 16 | 17 | if (shell.which('npm')) { 18 | versionRequirements.push({ 19 | name: 'npm', 20 | currentVersion: exec('npm --version'), 21 | versionRequirement: packageConfig.engines.npm 22 | }) 23 | } 24 | 25 | module.exports = function () { 26 | var warnings = [] 27 | for (var i = 0; i < versionRequirements.length; i++) { 28 | var mod = versionRequirements[i] 29 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 30 | warnings.push(mod.name + ': ' + 31 | chalk.red(mod.currentVersion) + ' should be ' + 32 | chalk.green(mod.versionRequirement) 33 | ) 34 | } 35 | } 36 | 37 | if (warnings.length) { 38 | console.log('') 39 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 40 | console.log() 41 | for (var i = 0; i < warnings.length; i++) { 42 | var warning = warnings[i] 43 | console.log(' ' + warning) 44 | } 45 | console.log() 46 | process.exit(1) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }), 12 | transformToRequire: { 13 | video: 'src', 14 | source: 'src', 15 | img: 'src', 16 | image: 'xlink:href' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/build/webpack.test.conf.js: -------------------------------------------------------------------------------- 1 | // This is the webpack config used for unit tests. 2 | 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseConfig = require('./webpack.base.conf') 7 | 8 | var webpackConfig = merge(baseConfig, { 9 | // use inline sourcemap for karma-sourcemap-loader 10 | module: { 11 | rules: utils.styleLoaders() 12 | }, 13 | devtool: '#inline-source-map', 14 | resolveLoader: { 15 | alias: { 16 | // necessary to to make lang="scss" work in test when using vue-loader's ?inject option 17 | // see discussion at https://github.com/vuejs/vue-loader/issues/724 18 | 'scss-loader': 'sass-loader' 19 | } 20 | }, 21 | plugins: [ 22 | new webpack.DefinePlugin({ 23 | 'process.env': require('../config/test.env') 24 | }) 25 | ] 26 | }) 27 | 28 | // no need for app entry during tests 29 | delete webpackConfig.entry 30 | 31 | module.exports = webpackConfig 32 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | vue-test 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/抛物线小球react+vue/vue-flyball/src/assets/logo.png -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | router, 13 | template: '', 14 | components: { App } 15 | }) 16 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import FlyBall from '@/components/FlyBall/index.vue' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | routes: [ 9 | { 10 | path: '/', 11 | name: 'FlyBall', 12 | component: FlyBall 13 | } 14 | ] 15 | }) 16 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/抛物线小球react+vue/vue-flyball/static/.gitkeep -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count 11 | this.expected = count 12 | this.pass = function (val) { 13 | return val === this.expected 14 | } 15 | this.value = function (res) { 16 | return res.value 17 | } 18 | this.command = function (cb) { 19 | var self = this 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length 22 | }, [selector], function (res) { 23 | cb.call(self, res) 24 | }) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing' 3 | var server = require('../../build/dev-server.js') 4 | 5 | server.ready.then(() => { 6 | // 2. run the nightwatch test suite against it 7 | // to run in additional browsers: 8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 9 | // 2. add it to the --env flag below 10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 11 | // For more information on Nightwatch's config file, see 12 | // http://nightwatchjs.org/guide#settings-file 13 | var opts = process.argv.slice(2) 14 | if (opts.indexOf('--config') === -1) { 15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 16 | } 17 | if (opts.indexOf('--env') === -1) { 18 | opts = opts.concat(['--env', 'chrome']) 19 | } 20 | 21 | var spawn = require('cross-spawn') 22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 23 | 24 | runner.on('exit', function (code) { 25 | server.close() 26 | process.exit(code) 27 | }) 28 | 29 | runner.on('error', function (err) { 30 | server.close() 31 | throw err 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf') 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' } 30 | ] 31 | } 32 | }) 33 | } 34 | -------------------------------------------------------------------------------- /抛物线小球react+vue/vue-flyball/test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Hello from '@/components/Hello' 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(Hello) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .to.equal('Welcome to Your Vue.js App') 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /电商sku组合状态查询/.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /电商sku组合状态查询/.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /电商sku组合状态查询/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | '@vue/standard', 9 | '@vue/typescript' 10 | ], 11 | rules: { 12 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 14 | }, 15 | parserOptions: { 16 | parser: '@typescript-eslint/parser' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /电商sku组合状态查询/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /电商sku组合状态查询/README.md: -------------------------------------------------------------------------------- 1 | # sku-manage 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /电商sku组合状态查询/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /电商sku组合状态查询/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sku-manage", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10", 13 | "vue-class-component": "^7.0.2", 14 | "vue-property-decorator": "^8.1.0", 15 | "sku-manager": "^1.0.0" 16 | }, 17 | "devDependencies": { 18 | "@vue/cli-plugin-babel": "^3.11.0", 19 | "@vue/cli-plugin-eslint": "^3.11.0", 20 | "@vue/cli-plugin-typescript": "^3.11.0", 21 | "@vue/cli-service": "^3.11.0", 22 | "@vue/eslint-config-standard": "^4.0.0", 23 | "@vue/eslint-config-typescript": "^4.0.0", 24 | "babel-eslint": "^10.0.1", 25 | "eslint": "^5.16.0", 26 | "eslint-plugin-vue": "^5.0.0", 27 | "typescript": "^3.4.3", 28 | "vue-template-compiler": "^2.6.10" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /电商sku组合状态查询/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /电商sku组合状态查询/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/电商sku组合状态查询/public/favicon.ico -------------------------------------------------------------------------------- /电商sku组合状态查询/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | sku-manage 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /电商sku组合状态查询/src/.eslintignore: -------------------------------------------------------------------------------- 1 | **/mockData.ts -------------------------------------------------------------------------------- /电商sku组合状态查询/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 27 | -------------------------------------------------------------------------------- /电商sku组合状态查询/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/电商sku组合状态查询/src/assets/logo.png -------------------------------------------------------------------------------- /电商sku组合状态查询/src/main.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /电商sku组合状态查询/src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /电商sku组合状态查询/src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue' 3 | export default Vue 4 | } 5 | -------------------------------------------------------------------------------- /电商sku组合状态查询/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "experimentalDecorators": true, 10 | "esModuleInterop": true, 11 | "allowSyntheticDefaultImports": true, 12 | "sourceMap": true, 13 | "baseUrl": ".", 14 | "types": [ 15 | "webpack-env" 16 | ], 17 | "paths": { 18 | "@/*": [ 19 | "src/*" 20 | ] 21 | }, 22 | "lib": [ 23 | "esnext", 24 | "dom", 25 | "dom.iterable", 26 | "scripthost" 27 | ] 28 | }, 29 | "include": [ 30 | "src/**/*.ts", 31 | "src/**/*.tsx", 32 | "src/**/*.vue", 33 | "tests/**/*.ts", 34 | "tests/**/*.tsx" 35 | ], 36 | "exclude": [ 37 | "node_modules" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /简单分页/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SimplePagination 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 | 17 | 18 | 30 | -------------------------------------------------------------------------------- /简单分页/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/简单分页/img/1.png -------------------------------------------------------------------------------- /简单分页/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/简单分页/img/2.png -------------------------------------------------------------------------------- /简单分页/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/简单分页/img/3.png -------------------------------------------------------------------------------- /简单分页/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/简单分页/img/4.png -------------------------------------------------------------------------------- /简单分页/img/pagination.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/简单分页/img/pagination.gif -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/跟混乱的页面弹窗说再见/12.png -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/跟混乱的页面弹窗说再见/34.png -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-test1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.6.6", 12 | "vue-router": "^3.0.2" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.5.0", 16 | "@vue/cli-plugin-eslint": "^3.5.0", 17 | "@vue/cli-service": "^3.5.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.8.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | }, 37 | "postcss": { 38 | "plugins": { 39 | "autoprefixer": {} 40 | } 41 | }, 42 | "browserslist": [ 43 | "> 1%", 44 | "last 2 versions", 45 | "not ie <= 8" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/跟混乱的页面弹窗说再见/public/favicon.ico -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 17 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/api.js: -------------------------------------------------------------------------------- 1 | import apiMock from './apiMock' 2 | 3 | // 实际开发中，接口的数据定义和返回肯定是不一样的 4 | // 这里只是为了更形象地模拟多个接口 5 | export const api1 = name => apiMock(name) 6 | export const api2 = name => apiMock(name) 7 | export const api3 = name => apiMock(name) 8 | export const api4 = name => apiMock(name) 9 | export const api5 = name => apiMock(name) 10 | export const api6 = name => apiMock(name) -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/apiMock.js: -------------------------------------------------------------------------------- 1 | export default item => { 2 | return new Promise(resolve => { 3 | // 通过 setTimeout模拟接口的异步请求 4 | setTimeout(() => { 5 | resolve({ 6 | rdShow: true, 7 | item 8 | }) 9 | }, Math.random() * 3000) 10 | }) 11 | } -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/accforgit/blog-data/d3cd2da33c933c7aa967e7653190f5748e17f029/跟混乱的页面弹窗说再见/src/assets/logo.png -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/components/common/modal/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Modal from './index.vue' 3 | 4 | const ModalConstructor = Vue.extend(Modal) 5 | // 当前存在的实例，全局唯一即可 6 | let instance = null 7 | 8 | const setAnInstance = () => { 9 | if (!instance) { 10 | instance = new ModalConstructor({ 11 | el: document.createElement('div') 12 | }) 13 | document.body.appendChild(instance.$el) 14 | } 15 | } 16 | 17 | export const showModal = title => { 18 | setAnInstance() 19 | instance.title = title 20 | Vue.nextTick(() => { 21 | instance.visible = true 22 | }) 23 | } 24 | 25 | export const hideModal = callback => { 26 | if (instance) { 27 | instance.visible = false 28 | callback && callback() 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/components/common/modal/index.vue: -------------------------------------------------------------------------------- 1 | 10 | 31 | 32 | 62 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/components/modalIndex/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 45 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/components/modalIndex/modalMap.js: -------------------------------------------------------------------------------- 1 | export default { 2 | index: { 3 | modalList: [{ 4 | id: 1, 5 | condition: 'condition_1', 6 | level: 100, 7 | feShow: true 8 | }, { 9 | id: 2, 10 | condition: 'condition_2', 11 | level: 22, 12 | feShow: true 13 | }, { 14 | id: 3, 15 | condition: 'condition_3', 16 | level: 70, 17 | feShow: true 18 | }], 19 | children: { 20 | child1: { 21 | modalList: [{ 22 | id: 11, 23 | condition: 'condition_1_1', 24 | level: 82, 25 | feShow: true 26 | }, { 27 | id: 12, 28 | condition: ['condition_1_2', 'condition_1_3', 'condition_1_4'], 29 | level: 1200, 30 | feShow: false 31 | }], 32 | children: { 33 | child1_1: { 34 | modalList: [{ 35 | id: 21, 36 | condition: ['condition_1_1_1', 'condition_1_1_2'], 37 | level: 320, 38 | feShow: true 39 | }, { 40 | id: 22, 41 | condition: 'condition_1_1_3', 42 | level: 300, 43 | feShow: true 44 | }] 45 | } 46 | } 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | import router from './router' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | render: h => h(App), 10 | router 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import ModalIndex from './components/modalIndex' 5 | 6 | Vue.use(VueRouter) 7 | 8 | const router = new VueRouter({ 9 | routes: [{ 10 | path: '/modalIndex', 11 | component: ModalIndex 12 | }] 13 | }) 14 | 15 | export default router -------------------------------------------------------------------------------- /跟混乱的页面弹窗说再见/src/util.js: -------------------------------------------------------------------------------- 1 | // 从 moalMap中读取所有的 modal项 2 | export const getAllModalList = modalInfo => { 3 | let currentList = [] 4 | if (modalInfo.modalList) { 5 | currentList = currentList.concat( 6 | modalInfo.modalList.reduce((t, c) => t.concat(c.name), []) 7 | ) 8 | } 9 | if (modalInfo.children) { 10 | currentList = currentList.concat( 11 | Object.keys(modalInfo.children).reduce((t, c) => { 12 | return t.concat(getAllModalList(modalInfo.children[c])) 13 | }, []) 14 | ) 15 | } 16 | return currentList 17 | } 18 | --------------------------------------------------------------------------------