[JavaScript知识库]vue笔记--创建并渲染简单子组件

0.通过vue脚手架创建vue项目

1.创建子组件

在components文件夹中创建.vue文件，这个.vue文件是单文件组件，其中包含< template > < script > < style >标签，分别代表结构、行为、样式
子组件Login.vue：

<template>
  <div>登录组件</div>
</template>

<script>
export default {}
</script>

<!--lang="less"即支持less格式-->
<!--scoped是vue的指令，控制组件生效区间，加上后表示仅在当前组件生效，去掉表示全局生效-->
<style lang="less" scoped>
</style>

2.渲染子组件

在router.js中通过路由的形式将子组件渲染到App.vue根组件中
（1）在router.js中导入子组件

import Login from './components/Login.vue'

（2）在路由规则数组中新增路由规则

export default new Router({
  routes: [
    { path: '/login', component: Login }
  ]
})

（3）在App根组件 App.vue中放置路由占位符

<template>
  <div id="app">
    根组件app
    <!-- 路由占位符 -->
    <router-view></router-view>
  </div>
</template>

注意1：eslint检查对代码格式要求非常严格，如
Newline required at end of file but not found(eslint)，表示代码最后要空一行。
Expected indentation of 4 spaces but found 2.(eslint),缩进的空格数量不对

注意2：如果创建了全局样式表（css文件），需要在main.js中进行引入，其他子组件的样式则直接写在子组件.vue文件中的< style >中

import './assets/css/global.css'

3.最后

启动项目，访问http://localhost:8082/#/login即可查看效果