6.在vue中使用less

1.使用less对Login.vue进行css设置

<template>
  <div class="login_container">登录组件</div>
</template>

<script>
export default {};
</script>

// 定义单文件组件必须设置scoped
<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
}
</style>

报错，因为我们并没有下载less相关的loader

2.下载less相关的开发依赖

下载开发依赖less-loader和less，有时候会下载失败，关闭页面，重启一下vue ui，重新下载即即可。
随后，重新启动app，即可看到刷新后的页面

3.其他样式调整

但是此时样式还需要调整，在assets下创建css->global.css，并在main.js中导入

html,
body,
#app {
    height: 100%;
    margin: 0;
    padding: 0;
}