Vuexy-Admin-Dashboard-v9.6.1 Starter-Kit运行体验Vuexy-Admin-Dash

初始化

从Vue3版本入手，使用starter-kit，在终端下运行：

yarn
yarn dev --host

http://localhost:5173

局域网手机测试移动端 http://192.168.x.x:5173

实现登录页面

在full-version查看源码，将以下文件复制到starter-kit对应的文件夹下：

src/main.js
src/router/index.js
src/pages/login.vue
src/pages/regeister.vue
src/pages/forgot-password.vue

微调前2个文件的代码即可,本地运行效果如下：

ES6知识点笔记

... 扩展运算符：把一个数组转化为用逗号分隔的参数序列，常用在不定参数个数时的函数调用、数组合并等情形

function f(x,y,z,v,w,u) {
	console.log(x,y,z,v,w,u)
}
var args = [0,1,5];
f(-1,...args,2,...[3]); // -1, 0, 1, 5, 2 ,3

=> 箭头函数：相当于匿名函数，并且简化了函数定义：

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

其它

VSCode调试，自动生成的配置文件只改端口即可
CASL插件，控制前端用户权限

接下来可以和后端API进行对接，真正实现登录跳转。