Vue的結構，路由配置

建立分支

在git bash中

git checkout -b createComponents

【成功後的回饋：Switched to a new branch ‘createComponents’】

Vue檔案結構簡介

public

放置全域性靜態資源

node_modules

放置第三方模組

src 目錄

主要的開發環境

src\assets

放置靜態資源，期內的資源會編碼成base64格式，打包到模組中。主要放一些小的圖示，圖片。

main.js 主模組

App.vue 主元件

views 頁面級別的元件

放置複用性較小的元件

components 公共元件

放置複用性較強的元件

配置路由

路由懶載入

在router/index.js 中

component: () => import(*/\* webpackChunkName: "about" \*/* '../views/About.vue')

路由的配置

在router中配置路由,採用模組化的方式，將每個route寫成單個的檔案，然後通過import引入的主檔案中

router/mine/index.js

export default {
  path:"/mine",
  component:()=>import('@/views/Mine')
}

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import movieRouter from "./movie"
import mineRouter from "./mine"
import cinemaRouter from "./cinema"
Vue.use(VueRouter)

const routes = [
  movieRouter,
  mineRouter,
  cinemaRouter
]

const router = new VueRouter({
  mode: 'history', //路由的模式
  base: process.env.BASE_URL,
  routes
})

export default router

單檔案元件

單檔案元件的基本格式

<template>
  <div>
      hello movie
  </div>
</template>

<script>
export default {
  name:"movie",
  data () {
    return {
       
    }
  },
  methods: {
       
  }
}
</script>

<style lang="scss" scoped>

其中 style中的屬性：

scoped：限制樣式只在當前檔案中有效；
lang=“scss” 表示可以使用scss格式進行樣式的編寫

router的核心

router-view

路由佔位

router-link

切換路由

屬性：

​ to="/cinema"屬性，跳轉到路由

​ tag="li"屬性，router-link轉化為對 應li標籤