添加路由和状态管理

whychdw

2020-04-14 27ba585a671ff6dbc3a0b99fd9d359c4a5b2a48f

添加路由和状态管理

 package.json

@@ -9,7 +9,9 @@
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vuex": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.3.0",

 src/App.vue

@@ -17,6 +17,7 @@
                        :title-left=true>
                            <div class="whyc-breadcrumb" slot="title">当前位置：首页 > 站点查询</div>
                            <five-sides-line></five-sides-line>
                            <right-triangle></right-triangle>
                        </content-box>
                    </div>
                </div>
@@ -31,6 +32,7 @@
import ContentBox from './components/ContentBox'
import MyTree from './components/tree/Index'
import FiveSidesLine from './components/FiveSidesLine'
import RightTriangle from './components/RightTriangle'

export default {
    name: 'App',
@@ -39,7 +41,8 @@
        PageNav,
        ContentBox,
        MyTree,
        FiveSidesLine
        FiveSidesLine,
        RightTriangle
    },
    methods: {
        treeClick: function(res) {

 src/components/RightTriangle.vue

@@ -1,21 +1,28 @@
<template>
    <div class="right-triangle">
        <span class="triangle-txt">交流配电柜</span>
        <video id="video" width="480" height="320"></video>
    </div>
</template>

<script>
export default {
    
    name: 'RightTriangle',
    data() {
        return {
            video: ''
        }
    },
    methods: {
        
    },
    mounted() {
        
    }
}
</script>

<style scoped>
.right-triangle {
    display: inline-block;
    background-image: linear-gradient(rgba(197,212,236, 0), rgba(197,212,236, 1));
    line-height: 0.8rem;
}

</style>



 src/main.js

@@ -1,5 +1,7 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/css/common.css'
import './assets/iconfont/iconfont.css'

@@ -17,9 +19,13 @@
    }
    htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;
};

window.onresize = setHtmlFontSize;

setHtmlFontSize();

new Vue({
    router,
    store,
    render: h => h(App),
}).$mount('#app')

 src/router/index.js

New file
@@ -0,0 +1,10 @@
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

const routes = [];

export default new Router({
    routes
});

 src/store/actions.js

New file
@@ -0,0 +1,3 @@
export default {
    
}

 src/store/getters.js

New file
@@ -0,0 +1,3 @@
export default {
    
}

 src/store/index.js

New file
@@ -0,0 +1,15 @@
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations  from './mutations'
import getters from './getters'
import actions from './actions'

Vue.use(Vuex);

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
});

 src/store/mutations.js

New file
@@ -0,0 +1,3 @@
export default {
    
}

 src/store/state.js

New file
@@ -0,0 +1,3 @@
export default {
    
}