zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    autocomplete自动完成搜索提示仿google提示效果
    实现子元素相对于父元素左右居中
    javascript 事件知识集锦
    让 IE9 以下的浏览器支持 Media Queries
    「2013124」Cadence ic5141 installation on CentOS 5.5 x86_64 (limited to personal use)
    「2013420」SciPy, Numerical Python, matplotlib, Enthought Canopy Express
    「2013324」ClipSync, Youdao Note, GNote
    「2013124」XDMCP Configuration for Remote Access to Linux Desktop
    「2013115」Pomodoro, Convert Multiple CD ISO to One DVD ISO HowTo.
    「2013123」CentOS 5.5 x86_64 Installation and Configuration (for Univ. Labs)
  • 原文地址:https://www.cnblogs.com/waller/p/11650305.html
Copyright © 2011-2022 走看看