1.介绍
本篇只讲述,创建基本的登录组件,并且如何挂载到主页面中,如何创建路由
2.登录组件基本样式
src/components/Login.vue
<template>
<div class="login_cintainer">
<h1>登录组件</h1>
</div>
</template>
<script>
// 默认导出
export default{
name:'Login'
}
</script>
<style lang="less" scoped>
/*
scpoed:只针对当前组件的样式
less:语法格式
*/
.login_container{
color: #FF8C00;// 百度搜索颜色值
}
</style>
2.1. Module not found: Error: Can’t resolve ‘less-loader’ in ‘D:\vue_code\vue_shop’
- 安装项目依赖
2.2.Module not found: Error: Can’t resolve ‘less-loader’ in ‘D:\vue_code\vue_shop’
安装依赖
2.3Component name “Login” should always be multi-word
在vue.config.js下添加lintOnSave: false
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
记得一定要重启服务!!!!一定要
3.创建路由
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/HomeView.vue'
import Login from "../components/Login.vue"
Vue.use(VueRouter)
const routes = [
// 为login组件创建路由
{
path:'/login',
name:'Login',
compoent: Login
}
]
const router = new VueRouter({
routes
})
export default router
4.挂到App.vue
<template>
<div id="app">
<h1>My Project</h1>
<!-- <router-view></router-view>-->
<Login></Login>
</div>
</template>
<script>
import Login from './components/Login.vue'
export default {
name: 'App',
components:{
Login
}
}
</script>
<style>
</style>
4.1挂在组件在App.vue组件中但是无法显示,并不报错解决方法:
注意看4.中的内容,这是其中一种方法,在script中引入组件,并且导出组件,在template中引用方法就是。这样的话访问login和根目录保持一致