前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

组件开发

在脚手架中，原先的页面逻辑将会被拆分成单独的一个个后缀为.vue的组件

这些vue的组件将相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件

这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用

组件文件一般定义在src目录下的components文件夹里

---

template标签定义HTML部分

<teamplate>
    <div class="" @click="">
        <label>
        	账号
            <input type="text">
        </label>
    </div>
</teamplate>

js写成模块导出的形式

// 使用export default命令，为模块指定默认输出
export default{
    data: function(){
        return {
            name:"张三",
            age:16,
        }
    }
}

组件样式编写，如果含有scope关键字，表示这些样式是组件局部的，

<style scoped>
.beauty{
    width:100px;
    line-height:50px;
    border-bottom:1px solid #ddd;
    margin:0px auto;
}
</style>

路由配置

如果脚手架项目选择安装了vue-router组件，那么可以很方便的进行组件的路由映射

vue-router也是官方支持的路由库

默认的，vue-router的路由配置在项目的src/router/index.js中

在路由映射文件中导入组件时，可以使用@符号，@代表从src目录起；比如

import index from '@/components/index'

定义相关组件的路由，可以通过初始化vue-router对象

import index from '@/components/index'
import Router from 'vue-router'

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/', // 访问路径
      component: index,
    },
    ...
  ]	
})

构建好的路由对象，需要通过Vue.use加载

import Vue from 'vue'

Vue.use(Router)

路由渲染

在App.vue中，会通过<router-view></router-view>标签进行路由加载

这也可以简写为: <router-view/>，该标签会自动将此时的路由对应的映射组件，渲染到页面上

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

比如路由中输入/index，那么router-view会根据在路由映射处的规则，渲染/index对应的页面