vue3.0 实现todolist

一、介绍

vue3.0 node.js(koa) mongodb, 实现 jwt 登录验证,todolist增删改查的 demo

二、参考

1、使用vite+vue3.0搭建项目

2、jwt-demo

3、coding代码

三、开发

1、初始化项目

yarn global add create-vite-app@1.18.0
cva vue3-jwt-todolist
或者
create-vite-app vue3-jwt-todolist

2、vue3.0 和 vue2.0 相比90% 相同， 不同之处

• Vue3.0 的Template 支持多个根标签
• Vue3.0 有createApp() , 而vue2.0 的是new Vue()
• createApp(组件) 、 new Vue({ template,render })

3、配置路由，引入Vue Router4

查看版本号

npm info vue-router versions

安装4.0.0-beta.11

yarn add vue-router@4.0.0-beta.11

src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router';
// 构建路由配置。
const routes = [
  {
    path: '/',
    name: 'home',
    meta: { noAuth: false },
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/login',
    name: 'login',
    meta: { noAuth: true },
    component: () => import('../views/Login.vue'),
  },
];
const router = createRouter({
  // 使用 hash 模式构建路由（ url中带 # 号的那种)
  history: createWebHashHistory(),
  // 使用 history 模式构建路由 （ url 中没有 # 号，但生产环境需要特殊配置）
  // history: createWebHistory(),
  routes,
});
export default router;

4、配置入口文件

router.beforeEach 设置路由拦截

src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import './index.scss';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
router.beforeEach((to, from, next) => {
  if (!to.meta.noAuth && !localStorage.getItem('token')) {
    next('/login');
  } else next();
});
const app = createApp(App);
app.use(Antd);
app.use(router);
app.mount('#app');

src/App.vue

<template>
  <router-view />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
  name: 'App',
};
</script>
<style scoped></style>