vue项目访问顺序

Dear 丶 2021-10-14 06:44 413阅读 0赞

## 1.vue项目访问顺序 ##

访问index.html后，main.js会将app.vue组件显示,会再通过进入router里的index.js从而进入hello.vue组件.进而展现整个页面。

## 2.main.js(项目开始展示内容) ##

import Vue from 'vue'
    import App from './App'  //App.vue
    import router from './router'//前3个导入自带的vue
    
    import MuseUI from 'muse-ui'
    import 'common/style/muse-ui.css'
    import fastclick from 'fastclick'//导入第三方封装好的vue
    fastclick.attach(document.body)
    
    Vue.use(MuseUI)
    Vue.use(materialicons)//使用第三方封装好的vue
    
    //app这个vue的实例会接管app这个
    // dom里面的内容,会分析<div id="app"> </div>这个dom里面所有的内容,并显示出来
    new Vue({
      el: '#app',  //创建的vue实例负责处理的区域
      router, //路由处理vue页面的跳转，相当于路径导航
      render: h => h(App)
    })
    template:‘<app/>’,components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果
    前者识别<template>标签，后者直接解析template下的id为app的div(忽略template的存在)

## 3.App.vue ##

<template>
      <div id="app">   //  vue实例渲染出的内容挂载的目标
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data () {
        return {
        }
      }
    }
    </script>
    
    <style lang="less">
    </style>

## 4.index.js(项目开始展示内容) ##

import Vue from 'vue'
    import Router from 'vue-router'//导入内部vue文件
    import Auth from '@/views/Auth'
    import FuelFill from '@/views/FuelFill'//导入自定义vue文件，@代表src目录
    
    Vue.use(Router)//vue使用Router路由
    
    export default new Router({  
      routes: [
        {
          path: '/',   //打开浏览器的第一个页面的路径，根路径
          redirect: '/auth'//将根路径重定向到/auth路径下
        },
        {
          path: '/auth',
          name: 'Auth',
          component: Auth //路径/auth的页面加载Auth组件，这里路径是指浏览器地址路径
        },
        {
          path: '/fuelfill',
          name: 'FuelFill',
          component: FuelFill //路径/FuelFill的页面加载Auth组件，这里路径是指浏览器地址路径
        }
      ]
    })
    //例如：http://localhost:8080/#/auth   这个界面就是Auth组件布局的        
      http://localhost:8080/#/fuelfill    这个界面就是fuelfill组件布局

## 5.Auth.vue ##

//vue组件有3部分组成
    // 1.模板：布局页面框架（html）
    <template>
      <div>
        <mu-container>
          <mu-dialog width="85%" :open.sync="openSimple" :overlay-close="false">
    
            <span style="text-align: center">
              <img class="authImg" :src="titleImg"/>
              <p class="authTitle">授权</p>
              <p class="authSubTitle1">已为您绑定手机号：</p>
              <p class="authSubTitle2">未绑定手机号</p>
            </span>
            <mu-button slot="actions" :flat="false" color="#43b79c" l @click="fuelFilling">我知道了</mu-button>
    
          </mu-dialog>
        </mu-container>
    
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          openSimple: true,
          titleImg: require('common/image/cnpc.png')
        }
      },
      methods: {
        fuelFilling: function () {
          this.$router.push({path: '/fuelfill'})
        }
      }
    }
    </script>
    <style scoped lang="stylus" rel="stylesheet/stylus">
      @import "~common/stylus/variable"
      .authImg
        width: 5em
        height: 5em
      .authTitle
        font-size: 1.2em
        color: white
        margin-top: 2em
      .authSubTitle1
        font-size: 1.0em
        color: white
        margin-top: 2em
      .authSubTitle2
        font-size: 1.0em
        color: #878787
        margin-top: 1em
    </style>

## 6.配置文件webpack.base.conf.js ##

resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          '@': resolve('src'),//相当于替换
          'src': resolve('src'),//相当于替换
          'common': resolve('src/common'),//相当于替换
          'components': resolve('src/components')//相当于替换
        }
      },
    
    在文件中
    render:h=>h(App)是ES6中的箭头函数写法，等价于render:function(h){return h(App);}.

## 注意点： ##

#### 1.箭头函数中的this是 指向 包裹this所在函数外面的对象上。 ####

#### 2.h是creatElement的别名，vue生态系统的通用管理 ####

#### 3.template:‘’,components:\{App\}配合使用与单独使用render:h=>h(App)会达到同样的效果,前者识别标签，后者直接解析template下的id为app的div(忽略template的存在) ####