当前位置：首页 > news >正文

005 vue项目结构 vue请求页面执行流程（vue2）

news 来源：原创 2025/5/18 20:24:00

文章目录

- vue项目结构
- vue请求页面执行流程
- - main.js
  - router
  - HelloWorld.vue
  - App.vue
  - index.html

vue项目结构

config目录存放的是配置文件，比如index.js可以配置端口
node_modules存放的是该项目依赖的模块，这些依赖的模块在package.json中指定
src目录分析
1.assets目录存放资源，比如图片、js
2.components目录存放自定义组件
3.router目录存放的是路由文件
4.App.vue文件是项目的主体单页，这里显示路由视图
5.main.js核心文件，入口js，这里创建vue实例，并且指定el，router，component，template

index.html是项目首页
这里定义了一个div id=app

package.json指定项目依赖的模块，类似java maven项目的pom.xml

vue请求页面执行流程

HelloWorld.vue
index.js
App.vue
main.js
index.html

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

main.js解读
1.入口js
2.创建了vue实例
3.指定了el 挂载到id=app的div
4.指定router 从router目录引入
5.指定components引入组件，该组件是import App
6.指定template:<App/> 这里App是从components {App}
7.进入路由，找到路由文件 router/index.js同时得到url
http://localhost:8080/#/ 得到path /

router

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

router/index.js解读
1.创建Router对象当作的组件
2.routes:[] 路由表，可以指定多个路由（就是一个访问路径）
3.请求url http://localhost:8080/#/ 得到 path /
4.对应找到 component:HelloWorld.vue

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

components/HelloWorld.vue解读
1.自定义组件
2.可以显示页面
3.进行编译，得到视图
4.将编译后的视图/页面返回

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vue解读
1.项目的主体单页
2.引入<router-view/>
3.就可以显示路由后的页面/视图

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue_project_quickstart</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>