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>