vue3实战总结1.0版本（继续完善）

vue3搭建路由

vue-cli脚手架可以升级到4以上的版本
构建vue3项目之后需要安装路由（不同于vue2，vue3不会自动生成
1.安装路由

npm install vue-router@4

2.mian.js会自动配置好路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
//注意use要在mount之前
createApp(App).use(router).mount('#app')

3.创建路由配置文件
新建 router目录，然后在 router目录下新建 index.js文件

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'login',
    component:()=>import('../views/Login/index.vue')
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4.使用路由
可以在 app.vue文件中添加router-view

<template>
  <router-view></router-view>
</template>

<script> 
export default {
  name: 'App',
}
</script>
 
<style>

</style>

使用element-plus组件

vue3使用element-ui跟vue2的安装方式有点不同
1.安装

npm install element-plus --save

使用方法可查看官网文档
2.图标引入方式与vue2版本不同

// 原来
<i class="el-icon-edit"></i>
 
// plus
 <el-icon :size="size" :color="color">
   <edit></edit>
 </el-icon>

2.若想要在input标签前面添加图标

  <!-- 账号输入框 -->
                <el-input
                  v-model="username"
                  type="text"
                  placeholder="请输入账户"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon"><User /></el-icon>
                  </template>
                </el-input>

这里把引入的图标当成了组件使用

<script>
import { User, Lock } from "@element-plus/icons-vue";
export default {
  data() {
    return {};
  },
  components: {
    User,
    Lock,
  },
};
</script>

display：flex

space-between：两端对齐，项目之间的间隔都相等，相当于使用div左浮动和右浮动

 display: flex;
 justify-content: space-between;

图片与文字不对齐

一般这种书写后会出现一种问题，就是图片与文字不对齐，图片下对齐了

  <div class="login-title_wrap">
        <img src="../../assets/img/login/icon.jpg" />
        xxxx
      </div>

可以对img添加一下vertical-align:middle;

  img{
          height:2rem;
          width: 2rem;
          vertical-align:middle;
          border-radius: .2rem;
      }