screenshot

.editorconfig

 root = true
 
 
-# 对所有文件有效  //[*js]只对js文件有效
+# 对所有文件有效.
+# [*js]只对js文件有效
+# [*.{js,jsx,ts,tsx,vue}]对指定文件类型有效
 [*]
 charset = utf-8
 

.eslintrc.js

@@ -3,12 +3,15 @@ module.exports = {
     env: {
         node: true
     },
-    extends: [
-        'plugin:vue/essential',
-        'eslint:recommended',
-        '@vue/prettier',
-        'plugin:prettier/recommended'
-    ],
+    // 1: ESLint with error prevention only
+    // extends: ['plugin:vue/essential', 'eslint:recommended'],
+    // 2: ESLint + Airbnb config
+    // extends: ['plugin:vue/essential', '@vue/airbnb',],
+    // 3: ESLint + Standard config
+    // extends: [ 'plugin:vue/essential', '@vue/airbnb',],
+    // ESLint + Prettier
+    extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
+    plugins: [],
     parserOptions: {
         parser: 'babel-eslint'
     },
@@ -20,221 +23,10 @@ module.exports = {
      * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
      */
     rules: {
-        // 是否开启prettier校验,默认开启
-        // "prettier/prettier": "off",
+        // 是否开启prettier校验,默认开启.可选 warn / error / off
+        // "prettier/prettier": "warn",
         // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
         'no-console': [0, { llow: ['warn', 'error'] }],
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-        //缩进风格.默认4，否则会报错
-        indent: [
-            2,
-            4,
-            {
-                SwitchCase: 1 // 针对switch case的缩进
-            }
-        ],
-        //'linebreak-style': ['warn', 'unix'],
-        'linebreak-style': [0, 'error', 'windows'],
-        'no-irregular-whitespace': [
-            1,
-            { skipComments: true, skipTemplates: true, skipRegExps: true }
-        ],
-        // 强制双引号
-        // "quotes": ["error", "double"],
-        // 语句强制分号结尾
-        // "semi": ["error", "always"],
-        // "semi": false,
-        // 分号前后空格。默认选项禁止分号之前有空格，强制分号之后有空格。
-        'semi-spacing': [
-            1,
-            {
-                before: false,
-                after: true
-            }
-        ],
-        // 变量声明后必须使用；参数arg不做限制
-        'no-unused-vars': [
-            1,
-            {
-                vars: 'all',
-                args: 'none'
-            }
-        ],
-        // 禁止对原生对象或只读的全局对象进行赋值
-        'no-native-reassign': 2,
-        // 变量声明、数组字面量、对象字面量、函数参数 和 序列中的逗号前不能有空格，后面必须有一个空格
-        'comma-spacing': [
-            1,
-            {
-                before: false,
-                after: true
-            }
-        ],
-        // 是否用驼峰风格命名变量：never || always
-        camelcase: ['error', { properties: 'never' }],
-        // 强制函数括号之前的空格的一致性.
-        // 每个选项可以设置为 "always"、"never" 或 "ignore"
-        'space-before-function-paren': [
-            'warn',
-            {
-                // 针对匿名函数表达式 (比如 function () {})
-                anonymous: 'always',
-                // 针对命名的函数表达式 (比如 function foo () {})。
-                named: 'never',
-                // 针对异步的箭头函数表达式(比如 async () => {})
-                asyncArrow: 'always'
-            }
-        ],
-        // 该规则禁止在 return、throw、continue 和 break 语句后出现不可达代码。
-        'no-unreachable': 1,
-        // 消除非故意 case 落空行为
-        'no-fallthrough': 1,
-        // 在条件语句中，很容易将一个比较运算符（像 ==）错写成赋值运算符（如 =）
-        // 所以，该规则禁止在 if、for、while 和 do...while 语句中出现模棱两可的赋值操作符
-        'no-cond-assign': [2, 'always'],
-        // 强制多行的三目运算符换行
-        'multiline-ternary': [1, 'always-multiline'],
-        // else关键字要与花括号保持在同一行。
-        // 'brace-style': 1,
-        // 'block-spacing': 1, //单行代码块两边加空格。
-        // 'spaced-comment': 1, //注释首尾留空格
-        'vue/html-indent': [
-            'error',
-            4,
-            {
-                attribute: 1,
-                baseIndent: 1,
-                closeBracket: 0,
-                alignAttributesVertically: true,
-                ignores: []
-            }
-        ],
-        // 是否禁止在正则表达式中出现控制字符
-        'no-control-regex': 0,
-        // 指定html各种元素、svg、vue组件自闭和标签的规则
-        'vue/html-self-closing': [
-            'error',
-            {
-                html: {
-                    void: 'never',
-                    normal: 'never',
-                    component: 'never',
-                },
-                svg: 'always',
-                math: 'always'
-            }
-        ],
-        // 每一行的属性数量
-        'vue/max-attributes-per-line': [
-            'error',
-            {
-                // 单行的话，每行属性的数量
-                singleline: 2,
-                // 多行的话，每行属性的数量
-                multiline: {
-                    max: 1,
-                    // 第一个属性是否与开始标签在同一行
-                    allowFirstLine: false
-                }
-            }
-        ],
-        'vue/multiline-html-element-content-newline': [
-            'error',
-            {
-                ignoreWhenEmpty: true,
-                ignores: ['pre', 'textarea'],
-                allowEmptyLines: false
-            }
-        ],
-        // 单行元素内容是否换行
-        'vue/singleline-html-element-content-newline': [
-            0,
-            {
-                ignoreWhenEmpty: true,
-                ignores: ['pre', 'textarea'],
-                ignoreWhenNoAttributes: true
-            }
-        ],
-        // 多行元素闭合标签（右括号）换行规则
-        'vue/html-closing-bracket-newline': [
-            'error',
-            {
-                singleline: 'never',
-                multiline: 'never'
-            }
-        ],
-        // 单行元素闭合标签（右括号）换行规则
-        'vue/html-closing-bracket-spacing': [
-            'error',
-            {
-                startTag: 'never',
-                endTag: 'never',
-                selfClosingTag: 'never'
-            }
-        ],
-        // 属性值引号："double" | "single"
-        'vue/html-quotes': ['error', 'double'],
-        // 组件name属性值的格式
-        // PascalCase:驼峰 || kebab-case:连接线
-        'vue/name-property-casing': ['warn', 'PascalCase'],
-        // v-bind写法。shorthand：简写 || longform：不缩写
-        'vue/v-bind-style': ['error', 'shorthand'],
-        'vue/v-on-style': ['error', 'shorthand'],
-        // html元素中属性顺序
-        'vue/attributes-order': [
-            'warn',
-            {
-                order: [
-                    'DEFINITION',
-                    'LIST_RENDERING',
-                    'CONDITIONALS',
-                    'RENDER_MODIFIERS',
-                    'GLOBAL',
-                    'UNIQUE',
-                    'TWO_WAY_BINDING',
-                    'OTHER_DIRECTIVES',
-                    'OTHER_ATTR',
-                    'EVENTS',
-                    'CONTENT'
-                ]
-            }
-        ],
-        // 组件中属性的顺序
-        'vue/order-in-components': [
-            'warn',
-            {
-                order: [
-                    'el',
-                    'name',
-                    'parent',
-                    'functional',
-                    ['delimiters', 'comments'],
-                    ['components', 'directives', 'filters'],
-                    'extends',
-                    'mixins',
-                    'inheritAttrs',
-                    'model',
-                    ['props', 'propsData'],
-                    'data',
-                    'computed',
-                    'watch',
-                    'LIFECYCLE_HOOKS',
-                    'methods',
-                    ['template', 'render'],
-                    'renderError'
-                ]
-            }
-        ],
-        // 强制在v-on方法后加括号
-        'vue/v-on-function-call': [2, 'never'],
-        // 报告<template>中的语法错误
-        'vue/no-parsing-error': [
-            2,
-            {
-                'x-invalid-end-tag': false
-            }
-        ],
-        // 去掉检测无用转义的规则
-        'no-useless-escape': [0]
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
     }
 }

.prettierrc.js

 module.exports = {
+    // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
+    ignorePath: ".prettierignore",
     // 与eslint集成（让prettier使用eslint的代码格式进行校验）
     eslintIntegration: true,
     // 换行长度
-    printWidth: 100,
+    printWidth: 150,
     // tab缩进大小,默认为2
     tabWidth: 4,
     // 使用tab缩进，默认false
     useTabs: false,
-    // 使用分号, 默认true
+    // 是否使用分号, 默认true
     semi: false,
-    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
+    // 是否使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
     singleQuote: true,
     // 行尾逗号,默认none,可选 none|es5|all
     // es5 包括es5中的数组、对象
@@ -32,5 +34,10 @@ module.exports = {
     // avoid 能省略括号的时候就省略 例如x => x
     // always 总是有括号
     arrowParens: 'always',
-    endOfline: "auto"
+    // 结尾是 \n \r \n\r auto
+    endOfline: "auto",
+    // 在jsx中把'>' 是否单独放一行
+    jsxBracketSameLine: false,
 }
+
+

package.json

@@ -34,6 +34,7 @@
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
+    "vue-bus": "^1.2.1",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
@@ -44,7 +45,7 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.0",
-    "@vue/cli-plugin-eslint": "^4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.4",
     "@vue/cli-plugin-pwa": "^4.5.0",
     "@vue/cli-service": "^4.5.0",
     "@vue/eslint-config-prettier": "^6.0.0",
@@ -52,7 +53,7 @@
     "commitizen": "^4.2.0",
     "cz-conventional-changelog": "^3.2.1",
     "element-ui": "^2.13.2",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
     "husky": "^3.1.0",

src/App.vue

@@ -29,17 +29,6 @@ export default {
 </script>
 
 <style lang="scss">
-* {
-    box-sizing: border-box;
-    line-height: 1;
-    margin: 0;
-    padding: 0;
-}
-html,
-body {
-    padding: 0;
-    margin: 0;
-}
 #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -50,6 +39,7 @@ body {
     flex-direction: column;
     height: 100vh;
 }
+
 .body-container {
     flex: 1;
     display: flex;

src/assets/style/index.scss

+
+// 所有样式文件的入口
+
+@import "./reset";
+@import "./variable";
+

src/assets/style/reset.scss

+
+
+* {
+    box-sizing: border-box;
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+}
+
+
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+a,
+p,
+ul,
+li {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    font-size: 14px;
+    background-color: #fff;
+    color: #000;
+    letter-spacing: 0.5px;
+    font-family: "Microsoft YaHei", "微软雅黑", "Source Sans Pro", Arial, sans-serif;
+    // 顺滑滚动
+    scroll-behavior: smooth;
+}
+
+
+ul,
+li {
+    list-style: none;
+}
+
+
+a,
+a:hover,
+a:focus,
+a:visited {
+    color: #000;
+}
+
+a {
+    text-decoration: none;
+    outline: none;
+}
+
+/* 去掉获取焦点时的蓝色发光边框 */
+input,
+textarea,
+video,
+button {
+    outline: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+/*解决谷歌浏览器中的input背景色默认是黄色*/
+input:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+}
+
+

src/assets/style/variable.scss

+
+// 样式变量文件
+
+$color-1: pink;
+$bg-color:rgb(229,185,40);

src/components/videoCutter/videoPlayer.vue

 <template>
     <div class="video-player">
-        <video></video>
+        <video ref="videoDom" src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"></video>
     </div>
 </template>
 <script>
 export default {
     data() {
-        return {}
+        return {
+            state: 'pluse',
+            times: 0,
+            canPlay: false
+        }
+    },
+    mounted() {
+        this.$bus.on('videoPlayer.play', (data) => {
+            console.log(data)
+            // if(data.state)
+        })
+        this.$nextTick(() => {
+            this.$refs.videoDom.addEventListener('canplay', () => {
+                this.canPlay = true
+            })
+        })
+    },
+    methods: {
+        play() {
+            if (!this.canPlay) return
+            this.$refs.videoDom.play()
+        }
     }
 }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.video-player {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background-color: beige;
+
+    video {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+</style>

src/main.js

@@ -3,7 +3,11 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import './registerServiceWorker'
+import './assets/style/index.scss'
 import axios from 'axios'
+import VueBus from 'vue-bus'
+
+Vue.use(VueBus)
 
 import baseURL from '../config/baseUrl.js'
 console.log('baseURL:', baseURL)

src/registerServiceWorker.js

@@ -5,10 +5,7 @@ import { register } from 'register-service-worker'
 if (process.env.NODE_ENV === 'production') {
     register(`${process.env.BASE_URL}service-worker.js`, {
         ready() {
-            console.log(
-                'App is being served from cache by a service worker.\n' +
-                    'For more details, visit https://goo.gl/AFskqB'
-            )
+            console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB')
         },
         registered() {
             console.log('Service worker has been registered.')

src/views/screenshot.vue

@@ -4,7 +4,7 @@
             <video id="screenshot-video"></video>
         </div>
         <div class="operate-area">
-            <input id="screenshot-input" type="file" style="display:none;">
+            <input id="screenshot-input" type="file" style="display:none;" />
         </div>
     </div>
 </template>

src/views/videoCutter.vue

@@ -31,4 +31,8 @@ export default {
     width: 100%;
     height: 100%;
 }
+.video-content {
+    width: 100%;
+    height: 700px;
+}
 </style>

vue.config.js

-// console.log(`process.env1:`, process.env)
+// console.log(`process.env1:`, process.env);
 console.log(`process.env.NODE_ENV1:`, process.env.NODE_ENV)
-//
+
 module.exports = {
     // outputDir: process.env.outputDir,
     // assetsDir: 'static',
@@ -19,5 +19,23 @@ module.exports = {
                 pathRewrite: { '^/webapi': '/' }
             }
         }
+    },
+    chainWebpack: (config) => {
+        config.module
+            .rule('eslint')
+            .use('eslint-loader')
+            .loader('eslint-loader')
+            .tap((options) => {
+                // 保存自动eslint修复
+                options.fix = true
+                return options
+            })
+    },
+    css: {
+        loaderOptions: {
+            sass: {
+                prependData: `@import "@/assets/style/index.scss";`
+            }
+        }
     }
 }