Vue组件的学习（一）

组件的建立与引用 

第一步：新建一个组件文件

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

<script>
export default {

}
</script>

<style lang="less" scoped> //lang="less"：使用less语法；scoped：只在该文件中生效

</style>

第二步：通过 Router 的方式引用组件

在路由文件夹下的 index.js 的配置如下 

在根组件下的配置如下

第三步：可能会报错

Failed to compile.

./src/components/Login.vue
Module not found: Error: Can't resolve 'less-loader' in 'D:\vue\vue_education'

 

错误的原因是你少安装了 开发依赖 ，less和less-loader

可能还是会报错

TypeError: this.getOptions is not a function

错误的原因是  less-loader安装的版本过高，降版本即可

首先，先卸载高版本的

然后，在命令行安装低版本的

npm install --only=dev less-loader@7.3.0

第四步：成功