video-cutter add

src/components/sideNav/index.vue

@@ -2,7 +2,7 @@
     <div class="comp-sidenav">
         <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
-        <router-link to="/bao1">bao1</router-link>
+        <router-link to="/cutter">cutter</router-link>
         <router-link to="/bao2">bao2</router-link>
     </div>
 </template>

src/views/bao1.vue → src/components/videoCutter/videoPlayer.vue

 <template>
-    <div class="comp-bao1">
-        bao1
+    <div class="video-player">
+        <video></video>
     </div>
 </template>
-
 <script>
 export default {
     data() {
         return {}
-    },
-    created() {},
-    mounted() {}
+    }
 }
 </script>
-
-<style scoped lang="scss">
-/* @import url(); 引入css类 */
-</style>
+<style lang="scss" scoped></style>

src/router/index.js

@@ -19,9 +19,9 @@ const routes = [
         component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
     },
     {
-        path: '/bao1',
-        name: 'Bao1',
-        component: () => import(/* webpackChunkName: "bao1" */ '../views/bao1.vue')
+        path: '/cutter',
+        name: 'Cutter',
+        component: () => import(/* webpackChunkName: "bao1" */ '../views/videoCutter.vue')
     },
     {
         path: '/bao2',

src/views/videoCutter.vue

+<template>
+    <div class="video-cutter">
+        <div class="video-content">
+            <video-player></video-player>
+        </div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</template>
+
+<script>
+import VideoPlayer from '@/components/videoCutter/videoPlayer.vue'
+export default {
+    components: {
+        VideoPlayer
+    },
+    data() {
+        return {}
+    },
+    created() {},
+    mounted() {}
+}
+</script>
+
+<style scoped lang="scss">
+/* @import url(); 引入css类 */
+.video-cutter {
+    width: 100%;
+    height: 100%;
+}
+</style>