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标签