代码仓库

alicepolice/Vue-05 (github.com)

构建项目

新建项目

导入bootstrap-icons-vue

bootstrap-icons-vue - npm (npmjs.com)

导入Tailwind

在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档

安装VSCODE插件

构建目录文件

PS C:Users小能喵喵喵DesktopVueHomeworkhomework2src> tree /f
C:.
│   App.vue
│   index.css
│   main.ts
│   shims-vue.d.ts
│
├───assets
│       3.png
│       4.png
│       logo.png
│
├───components
│       BottomBar.vue
│
├───router
│       index.ts
│
├───store
│       index.ts
│
└───views
        AboutView.vue
        HomeLoginView.vue
        HomeView.vue
        LoginView.vue
        RegisterView.vue

构建底部导航栏

Router

• redirect用于访问网站根目录的时候跳转至特定哈希锚点对应的页面

const routes: Array = [
  {
    path: '/',
    name: '',
    redirect: () => {
      return { name: "home" }
    }
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/login',
    name: 'login',
    component: LoginViewVue
  },
  {
    path: '/register',
    name: 'register',
    component: RegisterViewVue
  },
  {
    path: '/about',
    name: 'about',
    component: AboutViewVue
  }
]

App.vue

使用 typescript 语法明确规定了setBottomFlag接收的布尔类型，同时严格规定 vue 应用实例 data 函数返回的对象中变量的类型，即 as 语法。

v-show="bottomFlag" 用于隐藏导航栏，setBottomFlag 由各个 router-view 负责 emit 触发。

BottomBar.vue

这里使用了 windtail css 功能性类语法，具体信息可以通过官方文档查到。

在vue3.1中，router-link的tag已经被废除，需要使用插槽的方式。给 router-link 添加 custom v-slot="{ navigate }"。navigate 是触发导航的函数。 @click = "navigate" 通过对其他标签的点击间接触发router-link的导航函数。

custom -> 是否不应将其内容包装在 标记中。

icon的生成使用了动态控件,依赖外部传进去的数组 ->:is

// 来自 App.vue 的数组传递给了当前的 props -> items
bottomItems: [
{ text: "首页", icon: "b-icon-house-heart", routerName: "home" },
{ text: "理财", icon: "b-icon-coin", routerName: "about" },
{ text: "消息", icon: "b-icon-chat-dots", routerName: "about" },
{ text: "我的", icon: "b-icon-person-circle", routerName: "about" },
] as BottomItem[],

修改HomeView.vue

在Home页面下默认显示底部导航栏，在挂载的时候通知父组件事件。

    this.$emit("set-bottom-flag", true);

构建登录、注册

提取组件

对于按钮和表单元素之类的小型组件，与简单的 CSS 类相比，创建模板片断或 JavaScript 组件通常会感觉过重。

官方建议使用 @layer components { ... } 指令包装自定义组件样式，以告诉 Tailwind 这些样式属于哪一层。

在 src/index.css 中定义表单标签、按钮标签共用的 Tailwind CSS 样式集合

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .login-register-input {
    @apply inline-block bg-white focus:outline-none py-3 pl-3 appearance-none leading-normal;
  }
  .login-register-solid-button{
    @apply
    focus:outline-none
    text-white
    bg-pink-400
    font-medium
    rounded-sm
    text-lg
    px-5
    py-2.5
    mb-2
  }
  .login-register-hollow-button{
    @apply
    focus:outline-none
    text-pink-400
    border-pink-400 border
    font-medium
    rounded-sm
    text-lg
    px-5
    py-2.5
    mb-2
  } 
  .login-register-checkbox{
    @apply
    ml-2
    text-sm
    font-medium
    text-gray-500
    dark:text-gray-300
    text-left
  }
}

LoginView.vue

router-link

注意 router-link 的用法，这里分别绑定了左箭头、短信登录。主要靠如下语法。

 custom v-slot="{ navigate }
// 上: router-link标签中的属性, 下: 绑定实现像a标签那样具备跳转功能的标签
 @click="navigate"

动态绑定背景图片方式

require 从依赖项返回导出。是同步过程，不会触发对服务器的请求。编译器会确保依赖项可用。

  data() {
    return {
      banner: require("../assets/3.png"),
    };
  }

更多资料可参考

https://stackoverflow.com/questions/67193179/how-can-i-link-background-image-vue-cli

https://stackoverflow.com/questions/35242272/vue-js-data-bind-style-backgroundimage-not-working

输入密码的时候切换背景

依托两个事件，通过当前光标对表单标签的进出实现。

@focusin="changeIMG('4.png')"
@focusout="changeIMG('3.png')"

  methods: {
    changeIMG(src: string): void {
      this.banner = require(../assets/${src});
    },
  },

完整代码

RegisterView.vue

部分功能与 Login.view 类似。

表单填入更改标签颜色

当输入手机号时，获取验证码会由灰变成粉色。将字体颜色从固定的class抽取出放入动态class绑定计算属性。每当phone发生变化即可改变颜色。

      

        获取验证码
      

  computed: {
    changeGetCodeColor(): string {
      if (this.phone == "") {
        return "text-gray-400";
      } else {
        return "text-pink-400";
      }
    },
  },

完整代码

一些零散的知识补充

Module not found: Error: Can't resolve 'sass-loader'

Module not found: Error: Can't resolve 'sass-loader'

解决方法： 运行如下命令后重新启动服务

npm install sass-loader -D
npm install node-sass -D

声明式、命令式

命令式UI：构建全功能UI实体，然后在UI更改时使用方法对其进行变更。

声明式UI：描述当前的UI状态，并且不需要关心它是如何过渡到框架的。

TS、ECMA、JS 关系

配置NPM镜像

npm config set registry=http://registry.npm.taobao.org

初试TS

var hello = "hello world"
console.log(hello)

npm install -g typescript
tsc helloworld ::编译ts
node helloworld ::运行js

变量提升

当使用var声明一个变量的时候，该变量会被提升到作用域的顶端，但是赋值的部分并不会被提升。

console.log(hello)
var hello = "hello world"

而let、const不会，实际开发中建议尽量使用用 let 和 const 代替var。

好用的网站

Tailwind CSS Select / Listbox Form - Free Examples (tailwind-elements.com)

Tailwind CSS Flowbite

Bootstrap Icons · Official open source SVG icon library for Bootstrap (getbootstrap.com)