6月10日笔记

1. Node.js 运行环境
2. npm下载工具
3. Vite前端构建/打包工具
4. Vue前端框架

练习代码

### src/views/Login.vue

```vue

```

### src/views/Home.vue

```vue

```

### src/router/index.js

```javascript

import { createRouter, createWebHistory } from 'vue-router'

import Login from '../views/Login.vue'

import Home from '../views/Home.vue'

const routes = [

{ path: '/', redirect: '/login' },

{ path: '/login', component: Login },

{ path: '/home', component: Home }

]

const router = createRouter({

history: createWebHistory(),

routes

})

// 简易路由守卫

router.beforeEach((to, from, next) => {

const token = localStorage.getItem('token')

if (to.path === '/home' && !token) {

next('/login')

} else {

next()

}

})

export default router

```

### src/main.js

```javascript

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

createApp(App).use(router).mount('#app')

```

### src/App.vue

```vue

```