前言:
项目的目录结构决定项目是否易读,所以项目的结构目录也很重要
![8~DEKG6YQPA2]V7_PG{AFEY.png][1]

1.src下面是我们的项目目录
2.assets 通常放一些小的静态图片
3.components 放核心的vue组件
4.plugins 插件
5.router 路由
6.views 视图 学过python应该都知道视图和路由mvc
7.mimall项目下的public可以放一些大图片

创建项目的目录
utils 外部插件
api 用于跟后端对接
storage 前端存储值
store 用于vuex
route.js 路由
pages 用于存放页面

基本vue文件的语法:

<template>
    <div></div>
</template>
<script>
export default {
    name:'nav-header'  #组件名称或者页面名称
}
</script>

安装组件:
npm install
vue-lazyload 懒加载
element-ui 饿了吗开源的ui组件
node-sass 一件修改
sass-loader 一件修改
vue-awesome-swiper 轮播组件
vue-axios 跨域集成
vue-cookie --save-dev 前后通信

封装路由
可以是route下面的index.js也可以是route.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './pages/home'
import Index from './pages/index'

Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path:'/', #主路由url
      name:'home', #主路由的名字
      component:Home, #主路由组件
      children:[   #子路由因为是多个需要用列表
        {
          path:'/index', #子路由名字url
          name:'index', #子路由名字
          component:Index, #子路由组件
        }
      ]
    }
  ]
})

main.js文件中

import Vue from 'vue'
import './plugins/axios'
import App from './App.vue'
import Route from './route'  #需要注意Route 这个名字为router时,如果不是

Vue.config.productionTip = false

new Vue({
  Route,  #这里只需要写router,router:Route, key必须写成router
  render: h => h(App)
}).$mount('#app')

接下来导入又头部组件和尾部组件在home.vue中导入

<template>
    <div>
        home组件
        <!-- 头部组件 -->
        <nav-header></nav-header>
        <!-- 路由组件 -->
        <router-view></router-view>
        <!-- 尾部组件 -->
        <nav-foolder></nav-foolder>
    </div>
    
</template>
<script>
import NavFoolder from '../components/NavFoolder'  #导入尾部组件
import NavHeader from '../components/NavHeader'
export default {
    name:'home',
    components:{  #加载组件key为components
        NavFoolder,  #当组件名字与值相同时可以省略value
        NavHeader,
    }
}
</script>

接下来写index.vue

<template>
    <div>
        index组件
        <!-- 头部组件 -->
        <nav-header></nav-header>
        <!-- 路由组件 -->
        <router-view></router-view>
        <!-- 尾部组件 -->
        <nav-foolder></nav-foolder>
    </div>
    
</template>
<script>
export default {
    name:'index',
}
</script>

结果:
![K9]FFZ9N66W6D9I)K@16VY.png
为什么index组件可以加载home组件头部尾部组件,因为我们在写路由时home为组路由 index为子路由并且我们设置了redirect:'/index'路由重写到index也就是在访问时会先加载home,home里面加载了头部尾部,紧接着home的/路由重写到index
所以index中会包含home 头部 尾部,切记在index中不需要在引用头部尾部组件home中已经引用了

总结:
目录的结构可以有助我们更快的整理梳理项目,路由的封装很重要,只是有的时候有点绕,多写写就会好很多,路由里面包含主路由 子路由 路由重写等.

最后修改:2021 年 03 月 23 日 10 : 34 PM
感谢您的,打赏!