VUE项目学习(二):学习项目文件结构

VUE项目学习(二):学习项目文件结构

VUE项目结构:
在这里插入图片描述

index.html:主页,项目入口
App.vue:根组件
main.js:入口文件
router文件夹下的index.js:路由配置文件

当点开浏览器访问项目,最先访问的是index.html, 上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上。

  <body>
    <div id="app"></div>
  </body>

main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,并且告知实例挂在位置。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

接着注册一个局部组件App,即components,指向当前目录下的App.vue,而其实模板就是template中的内容。

router文件夹下的index.js,主要是实现页面路由跳转

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
    }
  ]
})

通过配置routes中列表,实现页面跳转

path: 页面跳转路由
name: 页面实例名称
component: 页面文件所在位置

后期实际开发主要是集中于路由配置和项目vue的渲染。

猜你喜欢

转载自blog.csdn.net/qq_26666947/article/details/112005228