vue项目节构分析

2018-04-12 本文已影响0人 Mr无愧于心

1.index.html主页面

引入初始化的meta标签，初始化css和打包后的js文件等。。。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title></title>
    <link type="text/css" href="./src/css/common.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

2.入口文件 main.js

此文件是打包的入口，需要引入vue文件、路由的文件等一些插件和静态资源，文件中初始化vue，在vue中配置好路由和引入App.vue组件。

import Vue from 'vue'
import App from './App.vue'
import router from './router/home'
var vm=new Vue({
  el: '#app',
  router,//配置路由的文件
  render: h => h(App)//引入App.vue组件（vue2.0的写法）
});
router.beforeEach((to, from, next) => {//钩子函数
    window.scrollTo(0,0);
    next();
});

3.根组件App.vue

盛放所有的页面元素，路由跳转后的显示位置

<template>
  <div id="app">
    <!--<keep-alive>-->
        <router-view></router-view>//显示路由跳转结果的标签router-view
    <!--</keep-alive>-->
  </div>
</template>
<script>
</script>
<style scoped>//scoped表示里边的css代码不会影响子组件的样式
    @import '../public/stylesheets/common.css';//引入公共css
</style>

4.router配置文件

在此文件中先引入vue-router插件，再引入所有页面的符组件，然后进行路由配置，有多少中链接就引入多少个父组件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/home/home.vue'
import Help from '../components/home/help.vue'
Vue.use(Router);//使用Router 路由插件
export default new Router({
    mode: 'history',
    routes:[
    {
        path:'/',
        redirect:'/home'//重定向
    },
    {   //首页
        path:'/home',
        component:Home，
        children：[//子路由
          path:'/home/help',
          component:Help
        ]
    }
    ]
})

5.一般.vue组件文件

编写自己的解构template script css，引入本路由要使用的插件例如axios、banner、子组件、静态函数等，进行逻辑编写。

<template>
    <div class="">
        <div class="home-container">//主区域
            <Banner></Banner>//轮播图区域等。。。。
                  .....
                  .....
                  .....
                  .....
        </div>
       <m-footer></m-footer>//footer区域
    </div>
</template>

<script>
    import axios from 'axios'
    import MFooter from '../footer.vue'
    import Banner from './banner.vue'
    export default {
        data(){
            return{
                allAmount:[]
            }
        },
        components:{
            MFooter,
            Banner//绑定子组件
        },
        created(){
           //钩子函数
        },
        methods:{//定义一些方法
           getQueryString: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var url=decodeURIComponent(window.location.search);
                var r = url.substr(1).match(reg);
                if (r != null) return (r[2]);
                return "";
            }
        }
    }
</script>

<style>//引入当前页的css
    @import "home.css";
</style>

6. 一般项目搭建使用vue-cli脚手架

7.文件的引入引出。采用ES6的module规范

css一般可以采用sass或less编写，支持文件的引入@import common.css
在 .vue 文件中：

<style>@import common.css<style>//这里引入了common.js，注意路径问题。。。
<style lang="less">这里可以使用less编写css了<style>

vue文件引入css使用ES6规范 @import XXX.css
vue文件引入其他文件使用 import XX from 'xx/xx/xx'(引入的是js文件的可以省略后缀)

8.注意组件划分（根据项目UI结构），注意模块划分（根据模块的功能）

10763884-2785fb7979fafd0e.jpg

9.静态文件的提取

公共的css，js，img等。。。