diff --git a/.editorconfig b/.editorconfig index da599f4..7034f9b 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,12 +1,22 @@ +# 告诉EditorConfig插件，这是根文件，不用继续往上查找 root = true +# 匹配全部文件 [*] +# 设置字符集 charset = utf-8 +# 缩进风格，可选space、tab indent_style = space -indent_size = 4 +# 缩进的空格数 +indent_size = 2 +# 结尾换行符，可选lf、cr、crlf end_of_line = lf +# 在文件结尾插入新行 insert_final_newline = true +# 删除一行中的前后空格 trim_trailing_whitespace = true +# 匹配md结尾的文件 [*.md] +insert_final_newline = false trim_trailing_whitespace = false diff --git a/.env.development b/.env.development index d764f67..ee24708 100644 --- a/.env.development +++ b/.env.development @@ -2,9 +2,6 @@ VUE_APP_TITLE = 填鸭测试环境 # 接口请求地址，会设置到 axios 的 baseURL 参数上 VUE_APP_API_ROOT = /tduck-api -# 是否开启 CDN 支持，开启设置 ON，关闭设置 OFF -# 详情介绍请阅读 http://eoner.gitee.io/vue-automation/#/cdn -VUE_APP_CDN = OFF # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空 VUE_APP_DEBUG_TOOL = # 高德地图key diff --git a/.env.production b/.env.production index c414eda..ca2778f 100644 --- a/.env.production +++ b/.env.production @@ -2,9 +2,6 @@ VUE_APP_TITLE = 填鸭 # 接口请求地址，会设置到 axios 的 baseURL 参数上 VUE_APP_API_ROOT = /tduck-api -# 是否开启 CDN 支持，开启设置 ON，关闭设置 OFF -# 详情介绍请阅读 http://eoner.gitee.io/vue-automation/#/cdn -VUE_APP_CDN = OFF # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空 VUE_APP_DEBUG_TOOL = # 高德地图key diff --git a/.huskyrc b/.huskyrc deleted file mode 100644 index 5090235..0000000 --- a/.huskyrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "hooks": { - "pre-commit": "lint-staged" - } -} diff --git a/.lintstagedrc b/.lintstagedrc deleted file mode 100644 index e370f34..0000000 --- a/.lintstagedrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "src/**/*.{js,vue}": [ - "vue-cli-service lint", - "vue-cli-service lint:style" - ] -} diff --git a/.stylelintignore b/.stylelintignore deleted file mode 100644 index aba4d1b..0000000 --- a/.stylelintignore +++ /dev/null @@ -1,6 +0,0 @@ -dist/ -node_modules/ -src/assets/sprites/ -src/theme/ -src/components/FontIcon/ -src/components/verifition diff --git a/.stylelintrc b/.stylelintrc deleted file mode 100644 index ba9b91b..0000000 --- a/.stylelintrc +++ /dev/null @@ -1,18 +0,0 @@ -{ - "extends": [ - "stylelint-config-standard", - "stylelint-config-recommended-scss" - ], - "plugins": [ - "stylelint-scss" - ], - "rules": { - "indentation": 4, - "rule-empty-line-before": "never", - "at-rule-empty-line-before": "never", - "no-descending-specificity": null, - "selector-pseudo-class-no-unknown": null, - "selector-pseudo-element-no-unknown": [true, { "ignorePseudoElements": ["v-deep"] }], - "property-no-unknown": null - } -} diff --git a/babel.config.js b/babel.config.js index e7a3d31..073da90 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,10 +1,13 @@ module.exports = { presets: [ + // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app '@vue/cli-plugin-babel/preset' ], - env: { - development: { - plugins: ['dynamic-import-node'] + 'env': { + 'development': { + // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require(). + // This plugin can significantly increase the speed of hot updates, when you have a large number of pages. + 'plugins': ['dynamic-import-node'] } } } diff --git a/dependencies.cdn.js b/dependencies.cdn.js deleted file mode 100644 index b3d174b..0000000 --- a/dependencies.cdn.js +++ /dev/null @@ -1,56 +0,0 @@ -module.exports = [ - { - name: 'vue', - library: 'Vue', - js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', - css: '' - }, - { - name: 'vue-router', - library: 'VueRouter', - js: 'https://cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js', - css: '' - }, - { - name: 'vuex', - library: 'Vuex', - js: 'https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js', - css: '' - }, - { - name: 'axios', - library: 'axios', - js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', - css: '' - }, - { - name: 'qs', - library: 'Qs', - js: 'https://cdn.jsdelivr.net/npm/qs@6.9.3/dist/qs.js', - css: '' - }, - { - name: 'nprogress', - library: 'NProgress', - js: 'https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js', - css: 'https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.css' - }, - { - name: 'vue-meta', - library: 'VueMeta', - js: 'https://cdn.jsdelivr.net/npm/vue-meta@2.4.0/dist/vue-meta.min.js', - css: '' - }, - { - name: 'js-cookie', - library: 'Cookies', - js: 'https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js', - css: '' - }, - { - name: 'dayjs', - library: 'dayjs', - js: 'https://cdn.jsdelivr.net/npm/dayjs@1.8.29/dayjs.min.js', - css: '' - } -] diff --git a/docs/.nojekyll b/docs/.nojekyll deleted file mode 100644 index e69de29..0000000 diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index b21dade..0000000 --- a/docs/README.md +++ /dev/null @@ -1,30 +0,0 @@ -# 关于 vue-automation - -## 这是什么 - -一款开箱即用的 Vue 项目模版，基于 Vue CLI - -## 特点 - -- 默认集成 vue-router 和 vuex -- 全局 SASS 资源自动引入 -- 精灵图自动生成 -- 全局组件自动注册 -- CDN支持，优化打包体积 -- 轻松实现团队代码规范 - -## 支持 - -给个小 ❤️ 吧~ - -[![star](https://img.shields.io/github/stars/hooray/vue-automation?style=social)](https://github.com/hooray/vue-automation/stargazers) - -[![star](https://gitee.com/eoner/vue-automation/badge/star.svg?theme=dark)](https://gitee.com/eoner/vue-automation/stargazers) - -## 生态 - -[![](https://hooray.gitee.io/fantastic-admin/logo.png)](https://hooray.gitee.io/fantastic-admin) - -[Fantastic-admin](https://hooray.gitee.io/fantastic-admin) - -一款开箱即用的 Vue 中后台管理系统框架 diff --git a/docs/_coverpage.md b/docs/_coverpage.md deleted file mode 100644 index 08644b5..0000000 --- a/docs/_coverpage.md +++ /dev/null @@ -1,7 +0,0 @@ -# vue-automation - -> 一款开箱即用的 Vue 项目模版 - -[开始使用](#关于-vue-automation) -[项目 Github 地址](https://github.com/hooray/vue-automation) -[项目 Gitee 地址](https://gitee.com/eoner/vue-automation) diff --git a/docs/_navbar.md b/docs/_navbar.md deleted file mode 100644 index f640c44..0000000 --- a/docs/_navbar.md +++ /dev/null @@ -1,2 +0,0 @@ -* [Fantastic-admin](https://hooray.gitee.io/fantastic-admin) -* [文档打开慢？试试 Gitee 地址](http://eoner.gitee.io/vue-automation) diff --git a/docs/_sidebar.md b/docs/_sidebar.md deleted file mode 100644 index ebb6dec..0000000 --- a/docs/_sidebar.md +++ /dev/null @@ -1,14 +0,0 @@ -* [使用](start) -* [配置](configure) -* [全局 SASS 资源](sass-resources) -* [精灵图](sprite) -* [SVG图标](svg) -* [全局组件](global-component) -* [Vue-router](vue-router) -* [Vuex](vuex) -* [Axios拦截器](axios) -* [快速创建文件](plop) -* [代码规范](coding-standard.md) -* 扩展 - * [CDN支持](cdn.md) - * [移动端支持](mobile-support.md) \ No newline at end of file diff --git a/docs/axios.md b/docs/axios.md deleted file mode 100644 index 3764a5a..0000000 --- a/docs/axios.md +++ /dev/null @@ -1,11 +0,0 @@ -# Axios拦截器 - -拦截器的用处就是拦截每一次的请求和响应，然后做一些全局的处理。 - -例如接口响应报错，可以在拦截器里用统一的报错提示来展示，方便业务开发。 - -本框架提供了一份拦截器参考代码 `src/api/index.js` ，因为每个公司提供的接口标准不同，所以该文件需要开发者根据各自公司的接口去定制对应的拦截器。 - -代码很简单，首先初始化 `axios` 对象，然后 `axios.interceptors.request.use()` 和 `axios.interceptors.response.use()` 就分别是请求和响应的拦截代码了。 - -参考代码里只做了简单的拦截处理，例如请求的时候会自动带上 `token` ，响应的时候会根据错误信息判断是登录失效还是接口报错。 \ No newline at end of file diff --git a/docs/cdn.md b/docs/cdn.md deleted file mode 100644 index c106266..0000000 --- a/docs/cdn.md +++ /dev/null @@ -1,27 +0,0 @@ -# CDN支持 - -开启 CDN 的好处在于，项目中引用的一些第三方库不会打包进项目内，从而减小打包出的文件体积，同时借用 CDN 的优势，大大提高项目加载速度。 - -CDN 支持默认不开启，如果需要开启，则在 `.env.production` 生产环境配置文件中修改： - -``` -VUE_APP_CDN = ON -``` - -CDN 配置文件存放在项目根目录下的 `dependencies.cdn.js` 文件里，可按照标准格式自行扩展配置。 - -```js -{ - name: '', - library: '', - js: '', - css: '' -} -``` - -其中 `name` 和 `library` 最终会转成 webpack 中 externals 的配置项， `name` 是引入的包名， `library` 是全局变量。 - -这里需要注意以下两点： - -1. 如果只在生产环境开启 CDN 支持，请确保第三方库的 CDN 版本与本地依赖包的版本一致，以免出现开发环境是正常的，但生产环境缺不行的情况，也就是因为版本不同造成的 bug -2. 开发环境开启 CDN 支持后会导致 [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 无法使用，所以不建议开发环境开启 \ No newline at end of file diff --git a/docs/coding-standard.md b/docs/coding-standard.md deleted file mode 100644 index 62a4159..0000000 --- a/docs/coding-standard.md +++ /dev/null @@ -1,77 +0,0 @@ -# 代码规范 - -## IDE 编辑器 - -为保证代码风格统一，统一使用 [VS Code](https://code.visualstudio.com/) 做为开发 IDE ，并安装以下扩展： - -- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) -- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) -- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) -- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) -- [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - -安装完后在 `settings.json` 中增加如下配置： - -```json -"editor.codeActionsOnSave": { - "source.fixAll.eslint": true, - "source.fixAll.stylelint": true -} -``` - -最终效果为，在保存时，会自动对当前文件进行代码格式化操作。 - -## Git 钩子 - -上述操作仅对代码的写法规范进行格式化，例如缩进、空格、结尾的分号等。 - -而在提交代码时， Git 的钩子会检查代码中是否有错误，这些错误是 IDE 无法自动修复的，例如出现未使用过的变量。如果有错误，则会取消此次提交，直到开发者修复完所有错误后才允许提交成功，确保仓库里的代码绝对正确。 - -> 可通过修改 `.eslintignore` 和 `.stylelintignore` 忽略无需做代码规范的文件，例如在项目中引用了一些第三方的插件或组件，我们就可以将其忽略 - -如果 `git init` 仓库初始化是在依赖包安装之后执行的，则无法初始化 Git 钩子，建议在 `git init` 之后再执行一遍 `yarn` 或者 `npm i` ，重新安装一遍依赖包。 - -## 配置代码规范 - -配置文件主要有 3 处，分别为 IDE 配置（`.editorconfig`）、ESLint 配置（`.eslintrc.js` 和 `.eslintignore`）、StyleLint 配置（`.stylelintrc` 和 `.stylelintignore`）。 - -以代码缩进举例，本模版默认是以 4 空格进行缩进，如果要调整为 2 空格，则需要在 `.editorconfig` 里修改： - -``` -indent_size = 2 -``` - -在 `.eslintrc.js` 里修改： - -``` -'indent': [2, 2, { - 'SwitchCase': 1 -}], - -... - -'vue/html-indent': [2, 2], - -... - -'vue/script-indent': [2, 2, { - 'switchCase': 1 -}] -``` - -在 `.stylelintrc` 里修改： - -``` -"indentation": 2 -``` - -修改完毕后，再分别执行下面两句命令： - -```bash -yarn run lint -yarn run stylelint -``` - -该操作会将代码进行一次格式校验，如果规则支持自动修复，则会将不符合规则的代码自动进行格式化。 - -以上面的例子，当缩进规则调整后，我们无需手动去每个文件调整，通过命令可以自动应用新的缩进规则。 diff --git a/docs/configure.md b/docs/configure.md deleted file mode 100644 index 6608347..0000000 --- a/docs/configure.md +++ /dev/null @@ -1,5 +0,0 @@ -# 配置 - -默认提供开发环境和生产环境两套配置，分别在根目录下 `.env.development` 和 `.env.production` 文件里，可配置项有网站标题、接口请求地址和是否开启CDN支持。 - -开发者可根据实际业务需求进行扩展，如果对这块不熟悉，可阅读 Vue CLI [环境变量和模式](https://cli.vuejs.org/zh/guide/mode-and-env.html) 章节。 \ No newline at end of file diff --git a/docs/global-component.md b/docs/global-component.md deleted file mode 100644 index 62c0aeb..0000000 --- a/docs/global-component.md +++ /dev/null @@ -1,11 +0,0 @@ -# 全局组件 - -全局组件存放在 `components/global/` 目录下，需要注意各个组件按文件夹区分。 - -每个组件的文件夹内至少保留一个文件名为 `index` 的组件入口，例如 `index.vue` 。 - -组件必须设置 `name` 并保证其唯一，自动注册会将组件的 `name` 设为组件名，可参考 SvgIcon 组件写法。 - -虽然文件夹名称和 `name` 无关联，但建议与 `name` 保持一致。 - -如果组件是通过 js 进行调用，则确保组件入口文件为 `index.js`，可参考 ExampleNotice 组件。 \ No newline at end of file diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 309e168..0000000 --- a/docs/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - vue-automation - - - - - - - -
载入中...
- - - - - - - - - diff --git a/docs/mobile-support.md b/docs/mobile-support.md deleted file mode 100644 index 7ac3e44..0000000 --- a/docs/mobile-support.md +++ /dev/null @@ -1,39 +0,0 @@ -# 移动端支持 - -移动端各司都有自己的解决方案，以下为我司为例，做为参考： - -我司统一使用 vw/vh 做为移动端的布局单位，单位转换通过 [postcss-px-to-viewport](https://www.npmjs.com/package/postcss-px-to-viewport) 进行处理。 - -首先安装依赖： - -`yarn add -D postcss-px-to-viewport` - -然后在 `vue.config.js` 里进行配置，具体配置信息可根据项目实际调整： - -```js -module.exports = { - css: { - loaderOptions: { - postcss: { - plugins: [ - require('postcss-px-to-viewport')({ - 'unitToConvert': 'px', - 'viewportWidth': 750, - 'unitPrecision': 3, - 'viewportUnit': 'vw', - 'selectorBlackList': [ - 'ignore', - 'van', - 'mescroll' - ], - 'minPixelValue': 1, - 'mediaQuery': false - }) - ] - } - } - } -} -``` - -最后在开发中就可以直接使用 px 了，最终输出就是 vw 。 diff --git a/docs/plop.md b/docs/plop.md deleted file mode 100644 index ec883d4..0000000 --- a/docs/plop.md +++ /dev/null @@ -1,13 +0,0 @@ -# 快速创建文件 - -开发过程中，避免不了手动去频繁创建页面、组件等文件，并且还要在文件里写一些必要的代码，是不是觉得很麻烦？现在你可以用更简洁的方式来处理这一切。 - -![](https://s1.ax1x.com/2020/06/30/N5jWcV.gif) - -> 该功能基于 [plop](https://www.npmjs.com/package/plop) 实现。 - -模版默认提供了 page(页面/布局) 、component(组件) 、store(全局状态) 三个模版文件，通过 `yarn new` 指令可以自行选择。 - -在实际项目开发中，建议根据项目定制适合项目的模版文件，可以大大提高开发效率，当多人协作开发时，也能统一部分标准。 - -模版目录为 `./plop-templates/` ，如果是新建模版，记得在项目根目录 `plopfile.js` 里引用一下。 \ No newline at end of file diff --git a/docs/sass-resources.md b/docs/sass-resources.md deleted file mode 100644 index 260e3b9..0000000 --- a/docs/sass-resources.md +++ /dev/null @@ -1,9 +0,0 @@ -# 全局 SASS 资源 - -> 全局 SASS 资源并不是全局样式，是变量、@mixin 、@function 这些东西 - -在 `assets/styles/resources/` 目录下存放全局的 SASS 资源，也就是说在这个目录里的文件，无需在页面上引用即可生效并使用。 - -项目中默认存放了 `utils.scss` 文件，里面有几个 `@mixin` 和 `%` ，你可以尝试在页面中使用它们看看效果。 - -同样，[精灵图](sprite)目录下生成的 SASS 资源也是全局可调用的。 diff --git a/docs/sprite.md b/docs/sprite.md deleted file mode 100644 index 9039a6a..0000000 --- a/docs/sprite.md +++ /dev/null @@ -1,59 +0,0 @@ -# 精灵图 - -> 又称雪碧图，原理是将多张小图合并到一张大图上，以便减少 HTTP 请求，提高网站访问速度。 - -精灵图原始图片的存放位置位于 `assets/sprites/` 目录下，注意按文件夹区分。 - -项目运行前会根据文件夹生成对应的精灵图文件（精灵图图片和 `.scss` 文件），多个文件夹则会生成多个精灵图文件。需要注意的是，在项目运行时，修改文件夹里的图片，会重新生成相关精灵图文件，但如果新建文件夹，则需要重新运行项目才会生成对应精灵图文件。 - -在 `.vue` 文件中可通过 `@include` 直接使用精灵图，无需手动引入 `.scss` 文件： - -```scss -// 方法 1 -// @include [文件夹名称]-sprite([文件名称]); -.icon { - @include example-sprite(address); -} - -// 方法 2 -// @include all-[文件夹名称]-sprites; -@include all-example-sprites; -``` - -最终输出如下： - -```css -/* 方法 1 */ -.icon { - background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); - background-position: 0px 0px; - background-size: 210px 210px; - width: 100px; - height: 100px; -} - -/* 方法 2 */ -.example-address-sprites { - background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); - background-position: 0 0; - background-size: 210px 210px; - width: 100px; - height: 100px; -} -.example-feedback-sprites { - background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); - background-position: -110px 0; - background-size: 210px 210px; - width: 100px; - height: 100px; -} -.example-payment-sprites { - background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png); - background-position: 0 -110px; - background-size: 210px 210px; - width: 100px; - height: 100px; -} -``` - -如果是小型项目，静态图标不多，可全部放在一个文件夹内；如果是中大型项目，文件夹可按模块来划分，这样不同的模块最终会生成各自的精灵图文件。 \ No newline at end of file diff --git a/docs/start.md b/docs/start.md deleted file mode 100644 index fe84aaa..0000000 --- a/docs/start.md +++ /dev/null @@ -1,35 +0,0 @@ -# 使用 - -使用前确保本地环境已安装 [Vue CLI](https://cli.vuejs.org/zh/) 。 - -## 方法 1 - -> 适用于初学者快速上手，项目里包含演示文件，方便学习 - -```bash -git clone https://gitee.com/eoner/vue-automation.git -cd vue-automation -yarn install -``` - -拉取该项目到本地，安装依赖包后即可运行。 - -运行后，可以看到功能演示，同时项目目录里带有 `example` 的均为演示代码。 - -## 方法 2 - -> 适用于已熟练使用的老手，项目里无演代码，方便快速开展工作 - -安装并使用 [1one-project](https://www.npmjs.com/package/1one-project) 进行项目初始化。 - -## 注意事项 - -~~值得一提的是，如果安装过程出现 sass 相关的安装错误，请在安装 [mirror-config-china](https://www.npmjs.com/package/mirror-config-china) 后重试。~~ - -~~```yarn global add mirror-config-china```~~ - -大部分安装报错都是因为 `node-sass` 依赖导致，尤其是 Windows 用户，它会强制安装 `python2` 和 `Visual Studio` 才能编译成功。 - -目前本模版已将 `node-sass` 替换为 `sass` ，简化用户安装成本，同时 Sass 官方也已经将 `dart-sass` 作为未来主要的的开发方向了。 - -参考《[Node Sass to Dart Sass](https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/advanced/sass.html)》 diff --git a/docs/svg.md b/docs/svg.md deleted file mode 100644 index 5efb582..0000000 --- a/docs/svg.md +++ /dev/null @@ -1,11 +0,0 @@ -# SVG图标 - -现在越来越多项目开始使用 SVG 图标做为精灵图的替代品，本框架也提供了 SVG 图标支持，方便使用。推荐去[阿里巴巴矢量图标库](https://www.iconfont.cn/)下载高质量 SVG 图标 - -首先将 svg 文件放到 `src/assets/icons/` 目录下，然后在页面中就可以使用了，`name` 就是 svg 文件名 - -```html - -``` - -> `` 组件为全局组件，所以无需注册即可使用 \ No newline at end of file diff --git a/docs/vue-router.md b/docs/vue-router.md deleted file mode 100644 index f53f0ab..0000000 --- a/docs/vue-router.md +++ /dev/null @@ -1,5 +0,0 @@ -# Vue-router - -路由也实现了自动注册，但因为有优先级的概念，先定义的会先匹配，所以同一模块下的路由需要放在一个路由配置文件里。 - -开发者只需关心 `router/modules/` 目录下的文件，一个模块对应一个 `.js` 文件，可参考 `router/modules/example.js` 文件。 \ No newline at end of file diff --git a/docs/vuex.md b/docs/vuex.md deleted file mode 100644 index 5ffce51..0000000 --- a/docs/vuex.md +++ /dev/null @@ -1,31 +0,0 @@ -# Vuex - -Vuex 同样实现了自动注册，开发只需关注 `store/modules/` 文件夹里的文件即可，同样也按照模块区分文件。 - -新建模版： - -```js -// example.js -const state = {} -const getters = {} -const actions = {} -const mutations = {} -export default { - namespaced: true, - state, - actions, - getters, - mutations -} -``` - -文件默认开启命名空间，文件名会默认注册为模块名。 - -使用方法： - -```js -this.$store.state.example.xxx; -this.$store.getters['example/xxx']; -this.$store.dispatch('example/xxx'); -this.$store.commit('example/xxx'); -``` \ No newline at end of file diff --git a/package.json b/package.json index 1b5ff88..dab0f22 100644 --- a/package.json +++ b/package.json @@ -1,72 +1,76 @@ { - "name": "tduck-front", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "vue-cli-service serve", - "serve": "vue-cli-service serve", - "build-dev": "vue-cli-service build --mode development --dest dist-dev", - "build": "vue-cli-service build", - "lint": "vue-cli-service lint", - "stylelint": "vue-cli-service lint:style", - "svgo": "svgo -f src/assets/icons", - "new": "plop" - }, - "dependencies": { - "animate.css": "^4.1.1", - "axios": "^0.21.0", - "core-js": "^3.6.4", - "crypto-js": "^4.0.0", - "dayjs": "^1.9.4", - "echarts": "^5.0.0", - "element-ui": "^2.15.2", - "file-saver": "^2.0.2", - "js-cookie": "^2.2.1", - "nprogress": "^0.2.0", - "signature_pad": "^3.0.0-beta.4", - "ua-parser-js": "^0.7.23", - "vue": "^2.6.12", - "vue-clipboard2": "^0.3.1", - "vue-image-crop-upload": "^2.5.0", - "vue-meta": "^2.4.0", - "vue-qr": "^2.3.0", - "vue-router": "^3.4.8", - "vuedraggable": "^2.24.3", - "vuex": "^3.5.1" - }, - "devDependencies": { - "@vue/cli-plugin-babel": "^4.5.8", - "@vue/cli-plugin-eslint": "^4.5.8", - "@vue/cli-service": "^4.5.8", - "@winner-fed/vue-cli-plugin-stylelint": "^1.0.4", - "babel-eslint": "^10.1.0", - "babel-plugin-dynamic-import-node": "^2.3.3", - "eslint": "^7.12.1", - "eslint-plugin-vue": "^7.1.0", - "html-webpack-plugin": "^4.5.0", - "husky": "^4.3.0", - "lint-staged": "^10.5.1", - "plop": "^2.7.4", - "sass": "~1.32.1", - "sass-loader": "^10.0.4", - "sass-resources-loader": "^2.1.1", - "stylelint": "^13.7.2", - "stylelint-config-recommended-scss": "^4.2.0", - "stylelint-config-standard": "^20.0.0", - "stylelint-scss": "^3.18.0", - "svg-sprite-loader": "^5.0.0", - "svgo": "^1.3.0", - "vue-template-compiler": "^2.6.12", - "webpack-spritesmith": "^1.1.0" - }, - "postcss": { - "plugins": { - "autoprefixer": {} - } - }, - "browserslist": [ - "> 1%", - "last 2 versions", - "not ie <= 8" + "name": "tduck-front", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "vue-cli-service serve", + "serve": "vue-cli-service serve", + "build-dev": "vue-cli-service build --mode development --dest dist-dev", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint", + "svgo": "svgo -f src/assets/icons", + "new": "plop" + }, + "dependencies": { + "animate.css": "^4.1.1", + "axios": "^0.21.0", + "core-js": "^3.6.4", + "crypto-js": "^4.0.0", + "dayjs": "^1.9.4", + "echarts": "^5.0.0", + "element-ui": "^2.15.2", + "file-saver": "^2.0.2", + "js-cookie": "^2.2.1", + "nprogress": "^0.2.0", + "signature_pad": "^3.0.0-beta.4", + "ua-parser-js": "^0.7.23", + "vue": "^2.6.12", + "vue-clipboard2": "^0.3.1", + "vue-image-crop-upload": "^2.5.0", + "vue-meta": "^2.4.0", + "vue-qr": "^2.3.0", + "vue-router": "^3.4.8", + "vuedraggable": "^2.24.3", + "vuex": "^3.5.1" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "^4.5.8", + "@vue/cli-plugin-eslint": "^4.5.8", + "@vue/cli-service": "^4.5.8", + "babel-eslint": "^10.1.0", + "babel-plugin-dynamic-import-node": "^2.3.3", + "eslint": "^7.12.1", + "eslint-plugin-vue": "^7.1.0", + "html-webpack-plugin": "^4.5.0", + "husky": "1.3.1", + "lint-staged": "8.1.5", + "plop": "^2.7.4", + "sass": "~1.32.1", + "sass-loader": "^10.0.4", + "sass-resources-loader": "^2.1.1", + "svg-sprite-loader": "^5.0.0", + "svgo": "^1.3.0", + "vue-template-compiler": "^2.6.12" + }, + "postcss": { + "plugins": { + "autoprefixer": {} + } + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 8" + ], + "lint-staged": { + "src/**/*.{js,vue}": [ + "eslint --fix", + "git add" ] + }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + } } diff --git a/plop-templates/component/index.hbs b/plop-templates/component/index.hbs deleted file mode 100644 index ee1151a..0000000 --- a/plop-templates/component/index.hbs +++ /dev/null @@ -1,23 +0,0 @@ - - - - - diff --git a/plop-templates/component/prompt.js b/plop-templates/component/prompt.js deleted file mode 100644 index ba1ca5b..0000000 --- a/plop-templates/component/prompt.js +++ /dev/null @@ -1,63 +0,0 @@ -const fs = require('fs') - -function getFolder(path) { - let components = [] - const files = fs.readdirSync(path) - files.forEach(function(item) { - let stat = fs.lstatSync(path + '/' + item) - if (stat.isDirectory() === true && item != 'components') { - components.push(path + '/' + item) - components.push.apply(components, getFolder(path + '/' + item)) - } - }) - return components -} - -module.exports = { - description: '创建组件', - prompts: [ - { - type: 'confirm', - name: 'isGlobal', - message: '是否为全局组件', - default: false - }, - { - type: 'list', - name: 'path', - message: '请选择组件创建目录', - choices: getFolder('src/views'), - when: answers => { - return !answers.isGlobal - } - }, - { - type: 'input', - name: 'name', - message: '请输入组件名称', - validate: v => { - if (!v || v.trim === '') { - return '组件名称不能为空' - } else { - return true - } - } - } - ], - actions: data => { - let path = '' - if (data.isGlobal) { - path = 'src/components/{{properCase name}}/oldIndex.vue' - } else { - path = `${data.path}/components/{{properCase name}}/index.vue` - } - const actions = [ - { - type: 'add', - path: path, - templateFile: 'plop-templates/component/index.hbs' - } - ] - return actions - } -} diff --git a/plop-templates/page/index.hbs b/plop-templates/page/index.hbs deleted file mode 100644 index f3b44ec..0000000 --- a/plop-templates/page/index.hbs +++ /dev/null @@ -1,20 +0,0 @@ - - - - - diff --git a/plop-templates/page/prompt.js b/plop-templates/page/prompt.js deleted file mode 100644 index f5be348..0000000 --- a/plop-templates/page/prompt.js +++ /dev/null @@ -1,53 +0,0 @@ -const path = require('path') -const fs = require('fs') - -function getFolder(path) { - let components = [] - const files = fs.readdirSync(path) - files.forEach(function(item) { - let stat = fs.lstatSync(path + '/' + item) - if (stat.isDirectory() === true && item != 'components') { - components.push(path + '/' + item) - components.push.apply(components, getFolder(path + '/' + item)) - } - }) - return components -} - -module.exports = { - description: '创建页面', - prompts: [ - { - type: 'list', - name: 'path', - message: '请选择页面创建目录', - choices: getFolder('src/views') - }, - { - type: 'input', - name: 'name', - message: '请输入文件名', - validate: v => { - if (!v || v.trim === '') { - return '文件名不能为空' - } else { - return true - } - } - } - ], - actions: data => { - let relativePath = path.relative('src/views', data.path) - const actions = [ - { - type: 'add', - path: `${data.path}/{{dotCase name}}.vue`, - templateFile: 'plop-templates/page/index.hbs', - data: { - componentName: `${relativePath} ${data.name}` - } - } - ] - return actions - } -} diff --git a/plop-templates/store/index.hbs b/plop-templates/store/index.hbs deleted file mode 100644 index f282ba7..0000000 --- a/plop-templates/store/index.hbs +++ /dev/null @@ -1,15 +0,0 @@ -const state = {} - -const getters = {} - -const actions = {} - -const mutations = {} - -export default { - namespaced: true, - state, - actions, - getters, - mutations -} diff --git a/plop-templates/store/prompt.js b/plop-templates/store/prompt.js deleted file mode 100644 index d86b619..0000000 --- a/plop-templates/store/prompt.js +++ /dev/null @@ -1,27 +0,0 @@ -module.exports = { - description: '创建全局状态', - prompts: [ - { - type: 'input', - name: 'name', - message: '请输入模块名称', - validate: v => { - if (!v || v.trim === '') { - return '模块名称不能为空' - } else { - return true - } - } - } - ], - actions: data => { - const actions = [ - { - type: 'add', - path: `src/store/modules/${data.name}.js`, - templateFile: 'plop-templates/store/index.hbs' - } - ] - return actions - } -} diff --git a/plopfile.js b/plopfile.js deleted file mode 100644 index 326c5f2..0000000 --- a/plopfile.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = function(plop) { - plop.setWelcomeMessage('请选择需要创建的模式：') - plop.setGenerator('page', require('./plop-templates/page/prompt')) - plop.setGenerator('component', require('./plop-templates/component/prompt')) - plop.setGenerator('store', require('./plop-templates/store/prompt')) -} diff --git a/scss.template.hbs b/scss.template.hbs deleted file mode 100644 index 7821aed..0000000 --- a/scss.template.hbs +++ /dev/null @@ -1,66 +0,0 @@ -{ - // Default options - 'functions': true, - 'variableNameTransforms': ['dasherize'] -} - -{{#block "sprites"}} -{{#each sprites}} -${{../spritesheet_info.strings.name}}-sprite-{{strings.name}}: ({{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}', '{{name}}'); -{{/each}} - -${{spritesheet_info.strings.name}}-sprites: ( -{{#each sprites}} - {{strings.name}}: ${{../spritesheet_info.strings.name}}-sprite-{{strings.name}}, -{{/each}} -); -{{/block}} - -{{#block "sprite-functions"}} -{{#if options.functions}} -@mixin {{spritesheet_info.strings.name}}-sprite-width($sprite) { - width: nth($sprite, 5); -} - -@mixin {{spritesheet_info.strings.name}}-sprite-height($sprite) { - height: nth($sprite, 6); -} - -@mixin {{spritesheet_info.strings.name}}-sprite-position($sprite) { - $sprite-offset-x: nth($sprite, 3); - $sprite-offset-y: nth($sprite, 4); - background-position: $sprite-offset-x $sprite-offset-y; -} - -@mixin {{spritesheet_info.strings.name}}-sprite-size($sprite) { - background-size: nth($sprite, 7) nth($sprite, 8); -} - -@mixin {{spritesheet_info.strings.name}}-sprite-image($sprite) { - $sprite-image: nth($sprite, 9); - background-image: url(#{$sprite-image}); -} - -@mixin {{spritesheet_info.strings.name}}-sprite($name) { - @include {{spritesheet_info.strings.name}}-sprite-image(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name})); - @include {{spritesheet_info.strings.name}}-sprite-position(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name})); - @include {{spritesheet_info.strings.name}}-sprite-size(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name})); - @include {{spritesheet_info.strings.name}}-sprite-width(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name})); - @include {{spritesheet_info.strings.name}}-sprite-height(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name})); - background-repeat: no-repeat; -} -{{/if}} -{{/block}} - -{{#block "spritesheet-functions"}} -{{#if options.functions}} -@mixin all-{{spritesheet_info.strings.name}}-sprites() { - @each $key, $val in ${{spritesheet_info.strings.name}}-sprites { - $sprite-name: nth($val, 10); - .{{spritesheet_info.strings.name}}-#{$sprite-name}-sprites { - @include {{spritesheet_info.strings.name}}-sprite($key); - } - } -} -{{/if}} -{{/block}} diff --git a/src/assets/images/official/use-commony.png b/src/assets/images/official/use-commony.png new file mode 100644 index 0000000..c040464 Binary files /dev/null and b/src/assets/images/official/use-commony.png differ diff --git a/src/assets/images/old-logo-blue.png b/src/assets/images/old-logo-blue.png deleted file mode 100644 index 75a1723..0000000 Binary files a/src/assets/images/old-logo-blue.png and /dev/null differ diff --git a/src/assets/images/tducklogo-v2-blue.png b/src/assets/images/tducklogo-v2-blue.png deleted file mode 100644 index bee9792..0000000 Binary files a/src/assets/images/tducklogo-v2-blue.png and /dev/null differ diff --git a/src/assets/sprites/example/address.png b/src/assets/sprites/example/address.png deleted file mode 100644 index 2b5d1db..0000000 Binary files a/src/assets/sprites/example/address.png and /dev/null differ diff --git a/src/assets/sprites/example/feedback.png b/src/assets/sprites/example/feedback.png deleted file mode 100644 index 065b55d..0000000 Binary files a/src/assets/sprites/example/feedback.png and /dev/null differ diff --git a/src/assets/sprites/example/payment.png b/src/assets/sprites/example/payment.png deleted file mode 100644 index 1c2f680..0000000 Binary files a/src/assets/sprites/example/payment.png and /dev/null differ diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index d4f82f6..427d63a 100644 --- a/src/assets/styles/index.scss +++ b/src/assets/styles/index.scss @@ -127,6 +127,7 @@ div:focus { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + } .clearfix { &::after { @@ -198,14 +199,6 @@ aside { color: rgb(32, 160, 255); } } -.filter-container { - padding-bottom: 10px; - .filter-item { - display: inline-block; - vertical-align: middle; - margin-bottom: 10px; - } -} //refine vue-multiselect plugin .multiselect { diff --git a/src/utils/sign.js b/src/utils/sign.js index fb9beb0..30e0702 100644 --- a/src/utils/sign.js +++ b/src/utils/sign.js @@ -5,9 +5,9 @@ import _ from 'lodash' export default class sign { /** - * json参数升序 - * @param jsonObj 发送参数 - */ + * json参数升序 + * @param jsonObj 发送参数 + */ static sortAsc(jsonObj) { let arr = new Array() @@ -25,10 +25,10 @@ export default class sign { } /** - * @param url 请求的url,应该包含请求参数(url的?后面的参数) - * @param requestParams 请求参数(POST的JSON参数) - * @returns {string} 获取签名 - */ + * @param url 请求的url,应该包含请求参数(url的?后面的参数) + * @param requestParams 请求参数(POST的JSON参数) + * @returns {string} 获取签名 + */ static getSign(url, request) { let requestParams = {} if (request.params) { @@ -38,6 +38,9 @@ export default class sign { if (value == undefined || value == null) { return undefined } + if (value instanceof Object) { + return JSON.stringify(value) + } return '' + value } return value @@ -53,9 +56,9 @@ export default class sign { } /** - * @param url 请求的url - * @returns {{}} 将url中请求参数组装成json对象(url的?后面的参数) - */ + * @param url 请求的url + * @returns {{}} 将url中请求参数组装成json对象(url的?后面的参数) + */ static parseQueryString(url) { let urlReg = /^[^?]+\?([\w\W]+)$/, paramReg = /([^&=]+)=([\w\W]*?)(&|$|#)/g, @@ -71,8 +74,8 @@ export default class sign { } /** - * @returns {*} 将两个对象合并成一个 - */ + * @returns {*} 将两个对象合并成一个 + */ static mergeObject(objectOne, objectTwo) { if (Object.keys(objectTwo).length > 0) { for (let key in objectTwo) { diff --git a/src/views/account/ForgetPwd.vue b/src/views/account/ForgetPwd.vue index b4f1a7f..2863a1a 100644 --- a/src/views/account/ForgetPwd.vue +++ b/src/views/account/ForgetPwd.vue @@ -4,19 +4,25 @@

找回密码

- - @@ -87,7 +102,7 @@ import constants from '@/utils/constants' export default { name: 'RetrievePwd', data() { - let validateRePass = (rule, value, callback) => { + const validateRePass = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')) } else if (value !== this.resetPwdForm.rePassword) { @@ -115,17 +130,17 @@ export default { }, phoneRules: { phoneNumber: [ - {required: true, trigger: 'blur', message: '请输入手机号'}, + { required: true, trigger: 'blur', message: '请输入手机号' }, { pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/, message: '请输入正确的手机号' } ], - code: {required: true, trigger: 'blur', message: '请输入验证码'} + code: { required: true, trigger: 'blur', message: '请输入验证码' } }, emailRules: { email: [ - {required: true, trigger: 'blur', message: '请输入邮箱'}, + { required: true, trigger: 'blur', message: '请输入邮箱' }, { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '请输入正确的邮箱' @@ -134,18 +149,18 @@ export default { }, pwdRules: { password: [ - {required: true, trigger: 'blur', message: '请输入新密码'}, + { required: true, trigger: 'blur', message: '请输入新密码' }, { pattern: constants.passwordReg, message: constants.passwordRegDesc } ], - rePassword: [{required: true, trigger: 'blur', validator: validateRePass}] + rePassword: [{ required: true, trigger: 'blur', validator: validateRePass }] } } }, created() { - let code = this.$route.query.code + const code = this.$route.query.code if (code) { this.resetAccount = this.$route.query.email this.resetPwdForm.code = code @@ -161,19 +176,19 @@ export default { }) }, sendPhoneValidateCode() { - let phoneNumber = this.retrieveAccountForm.phoneNumber + const phoneNumber = this.retrieveAccountForm.phoneNumber this.$refs['phoneForm'].validateField('phoneNumber', err => { if (!err) { this.emailValidateCodeBtn = true this.$api.request({ url: '/retrieve/password/phone/code', method: 'get', - params: {phoneNumber: phoneNumber} + params: { phoneNumber: phoneNumber } }).then(() => { this.msgSuccess('验证码发送成功，5分钟内有效') this.emailValidateCodeBtn = true let count = 60 - let timer = setInterval(() => { + const timer = setInterval(() => { count-- this.emailValidateCodeBtnText = count + 's后重新发送' if (count == 0) { @@ -207,7 +222,7 @@ export default { if (res.data) { this.msgSuccess('密码重置成功，快去登录吧') setTimeout(() => { - this.$router.push({path: '/login'}) + this.$router.push({ path: '/login' }) }, 2000) } }) @@ -227,7 +242,7 @@ export default { this.$api.request({ url: '/retrieve/password/email', method: 'get', - params: {email: this.retrieveAccountForm.email} + params: { email: this.retrieveAccountForm.email } }).then(() => { this.retrieveStep = 3 }) @@ -240,55 +255,64 @@ export default { diff --git a/src/views/form/editor/IconsDialog.vue b/src/views/form/editor/IconsDialog.vue index db5bb7a..f400100 100644 --- a/src/views/form/editor/IconsDialog.vue +++ b/src/views/form/editor/IconsDialog.vue @@ -62,7 +62,8 @@ export default { this.active = this.current this.key = '' }, - onClose() {}, + onClose() { + }, onSelect(icon) { this.active = icon this.$emit('select', icon) @@ -73,51 +74,58 @@ export default { diff --git a/src/views/form/index.vue b/src/views/form/index.vue index 9517b66..56f0c3c 100644 --- a/src/views/form/index.vue +++ b/src/views/form/index.vue @@ -56,7 +56,7 @@ export default { title: '逻辑', icon: 'el-icon-menu', route: '/project/form/logic' - }, { + }, { title: '外观', icon: 'el-icon-view', route: '/project/form/theme' @@ -99,67 +99,80 @@ export default { diff --git a/src/views/form/oldIndex.vue b/src/views/form/oldIndex.vue deleted file mode 100644 index 9c40257..0000000 --- a/src/views/form/oldIndex.vue +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/views/form/statistics/chart.vue b/src/views/form/statistics/chart.vue index 39f76ad..de2bd37 100644 --- a/src/views/form/statistics/chart.vue +++ b/src/views/form/statistics/chart.vue @@ -1,42 +1,38 @@