Vue 项目目录结构分析

Vue项目目录结构分析

├── v-proj

|    ├── node_modules        // 当前项目所有依赖，一般不可以移植给其他电脑环境

|    ├── public

|    |    ├── favicon.ico    // 标签图标

|    |    └── index.html     // 当前项目唯一的页面

|    ├── src

|    |    ├── assets         // 静态资源img、css、js

|    |    ├── components     // 小组件

|    |    ├── views          // 页面(视图)组件

|    |    ├── App.vue        // 根组件

|    |    ├── main.js        // 全局脚本文件（项目的入口）

|    |    ├── router.js      // 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）

|    |    └── store.js       // 仓库脚本文件（vuex插件的配置文件，数据仓库）

|    ├── README.md

└    └── **配置文件

Vue组件(.vue文件)

// template : 有且只能有一个跟标签

// script : 必须将组件对象导出 export default { }

// style : style标签明确scoped属性,代表该样式只在组件内部起作用(即:样式组件化)

<template>

    <div class="test">

    </div>

</template>

<script>

    export default {

        name: "Test"

    }

</script>

<style scoped>

</style>

新增页面三步骤:

1) 在views文件中创建视图组件

2) 在router.js文件中配置路由

3) 设置路由跳转，在指定路由下渲染该页面组件(替换根组件中的router-view标签)

补充: 
// 1) 小组件代码书写完后将其导出

// 2) 页面组件需要哪个小组件就将该小组件导入并注册,同时将页面组件导出

// 3) 在路由组件中导入页面组件并配置注册

<template>

    <div class="text2">

        <p>text2</p>

    </div>

</template>

<script>

    // 导出该小组件

    export default {

        name: "Text2"

    }

</script>

<style scoped>

    p {

        color: blueviolet;

    }

</style>

components

<template>

    <div class="home">

        <T></T>

        <T2></T2>

    </div>

</template>

<script>

    // 将小组件导入到页面组件并注册

    import T from '@/components/Text'

    import T2 from '@/components/Text2'

    export default {

        // 将页面组件对象导出,配置到路由中

        name: 'home',

        // 小组件注册到页面组件中

        components: {

            T,

            T2

        }

    }

</script>

views

import Vue from 'vue'

import Router from 'vue-router'

// 导入页面组件

import Home from './views/Home.vue'

Vue.use(Router);

export default new Router({

    mode: 'history',

    base: process.env.BASE_URL,

    routes: [

        {

           // 配置页面组件路由,名称,并注册

            path: '/',

            name: 'home',

            component: Home

        },

        },

    ]

})    

router.js

全局脚本文件main.js(项目入口)

import Vue from 'vue'  // 为项目加载vue环境

import App from './App.vue'  // 加载根组件用于替换挂载点

import router from './router'  // 加载路由脚本文件，进入路由相关配置

import store from './store'  // 加载数据仓库环境

Vue.config.productionTip = false;

new Vue({

    router,

    store,

    render: h => h(App)

}).$mount('#app');  // 挂载index.html文件中的 div 标签

补充:

加载插件环境：路由、仓库、ajax、cookie、element-ui...
加载自定义环境：全局样式（global.css）、全局配置(settings.js)
渲染根组件

改写:

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store' 

Vue.config.productionTip = false;

new Vue({

    el: '#app',

    router,

    store,

    render: function (readFn) {

        return readFn(App)

    }

});

补充: 静态资源要在main.js中配置

// 配置全局样式

import '@/assets/css/global.css'

Vue项目启动生命周期 与 页面组件的运用(*****)

请求过程:

# 1) 加载mian.js启动项目

    i) import Vue from 'vue' 为项目加载vue环境

    ii) import App from './App.vue' 加载根组件用于渲染替换挂载点

    iii) import router from './router' 加载路由脚本文件，进入路由相关配置

# 2) 加载router.js文件，为项目提供路由服务，并加载已配置的路由(链接与页面组件的映射关系)

    注：不管当前渲染的是什么路由，页面渲染的一定是根组件，链接匹配到的页面组件只是替换根组件中的

    <router-view></router-view>

# 3) 如果请求链接改变(路由改变)，就会匹配新链接对应的页面组件，
     新页面组件会替换渲染router-view标签，替换掉之前的页面标签(就是完成了页面跳转

总结: main.js => router.js => 链接 => 页面组件 => 替换根组件中的 router-view 标签完成页面渲染 
　　　=> 通过 router-link | this.$router.push() 切换路由(链接) => 完成渲染组件的替换 => 页面的跳转

参与文件:

main.js:

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store' 

Vue.config.productionTip = false;

new Vue({

    el: '#app',

    router,

    store,

    render: function (readFn) {

        return readFn(App)

    }

});

APP.vue :

<template>

    <div id="app">

        <!--

        url路径会加载不同的页面组件

            eg：/red => RegPage  | /blue => BluePage

        来替换 router-view 标签,完成页面的切换

         -->

        <router-view></router-view>

    </div>

</template>

补充: 一般项目开发该文件内也就这五行代码

views/RedPage.vue

<template>

    <div class="red-page">

        <Nav></Nav>

    </div>

</template>

<script>

    import Nav from '@/components/Nav'

    export default {

        name: "RedPage",

        components: {

            Nav

        },

    }

</script>

<style scoped>

    .red-page {

        width: 100vw;

        height: 100vh;

        background-color: red;

    }

</style>

views/BluePage.vue

<template>

    <div class="blue-page">

        <Nav></Nav>

    </div>

</template>

<script>

    import Nav from '@/components/Nav'

    export default {

        name: "BluePage",

        components: {

            Nav

        }

    }

</script>

<style scoped>

    .blue-page {

        width: 100vw;

        height: 100vh;

        background-color: blue;

    }

</style>

router.js

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home.vue'

import RedPage from "./views/RedPage";

import BluePage from "./views/BluePage";

Vue.use(Router);

export default new Router({

    mode: 'history',

    base: process.env.BASE_URL,

    routes: [

        {

            path: '/',

            name: 'home',

            component: Home

        },

        {

            path: '/red',

            name: 'red',

            component: RedPage

        },

        {

            path: '/blue',

            name: 'blue',

            component: BluePage

        }

    ]

})

案例:

封装小组件 - Nav导航栏组件

components/Nav.vue

<template>

    <div class="nav">

        <!--采用vue-router完成页面跳转，不能采用a标签（会发生页面刷新，本质就是重新加载了一次项目界面）-->

        <ul>

            <li>

                <!--<a href="/">主页</a>-->

                <router-link to="/">主页</router-link>

            </li>

            <li>

                <router-link to="/red">红页</router-link>

            </li>

            <li>

                <router-link to="/blue">蓝页</router-link>

            </li>

        </ul>

    </div>

</template>

<script>

    export default {

        name: "Nav",

    }

</script>

<style scoped>

    .nav {

        width: 100%;

        height: 60px;

        background-color: orange;

    }

    .nav li {

        float: left;

        font: normal 20px/60px '微软雅黑';

        padding: 0 30px;

    }

    .nav li:hover {

        cursor: pointer;

        background-color: aquamarine;

    }

    .nav li.active {

        cursor: pointer;

        background-color: aquamarine;

    }

</style>

views/HomePage.vue：RedPage.vue与BluePage都是添加下方三个步骤代码

<template>

    <div class="home">

        <!-- 3）使用Nav组件 -->

        <Nav></Nav>

    </div>

</template>

<script>

    // 1）导入Nav组件

    import Nav from '@/components/Nav'

    export default {

        // 2）注册Nav组件

        components: {

            Nav,

        }

    }

</script>