VUE项目学习（二）：学习项目文件结构

分手后的思念是犯贱 2023-01-01 03:51 223阅读 0赞

## VUE项目学习（二）：学习项目文件结构 ##

VUE项目结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]

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

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

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的渲染。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjY2OTQ3_size_16_color_FFFFFF_t_70]: /images/20221120/90ae927a816e4c6c8616e1ce1bda02d8.png