Vue 项目结构介绍

项目结构

.

├── build      // 构建脚本   打包工具webpack有关的
├── config    // 全局配置   比如index.js:  端口配置
├── node_modules // 项目依赖模块
├── src         //项目源代码
├── static     // 静态资源
├── package.jspon // 项目信息和依赖配置

└── package-lock.jspon // 项目信息和依赖配置的详细信息

src
├── api // 各种接口
├── assets // 图片等资源
├── components // 各种公共组件，非公共组件在各自view下维护
├── icons //svg icon
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具，非公共工具，在各自view下维护
├── views // 各种layout
├── App.vue //***项目顶层组件***
├── main.js //***项目入口文件***
└── permission.js //认证入口

加载流程

@ 代表src目录下

1、main.js 

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

new Vue({
  el: '#app',   // 用来挂载页面的app元素
  router,       // 全写为 router:router
  template: '<App/>',  // App.vue 中的template
  components: { App }  // 全写为 App :App 
})

2、App.vue 

<template>
  <div name="app">
    <router-view></router-view>  // 路由视图
     <router-link to='/hello'>to hello </router-link>
  </div >
</template>

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

3、index.js

import Vue from 'vue'
import Router from 'vue-router'

import helloword from '@compont/helloword'

import hello from '@compont/hello.'

Vue.use(Router)

export default router({
      routes:[
                {
                 path: '/',
                 name: ''helloword,
                 componet: helloword
                },
               {
                 path: '/hello',
                 name: ''helloword,
                 componet: hello 
                }
             ]
})

4、hello.vue