2022-08-28 vue项目创建及其初始化

用vue-cli创建vue项目，
App.vue的app盒子，里面放路由视图

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

接着创建组件，template里面先放一个div,css加个scoped

设置路由

找到router.js,里面import需要的组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login.vue'
import Home from '@/components/Home'
import Welcome from '@/components/Welcome'
import Users from '@/components/user/Users'
import Rights from '@/components/power/Rights'
import Roles from '@/components/power/Roles'
import Cate from '@/components/goods/Cate'
import List from '@/components/goods/List'
import Params from '@/components/goods/Params'
import Report from '@/components/report/Report'
import order from '@/components/orders/order'

Vue.use(VueRouter)

const routes = [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children: [
            { path: '/welcome', component: Welcome },
            { path: '/users', component: Users },
            { path: '/rights', component: Rights },
            { path: '/roles', component: Roles },
            { path: '/categories', component: Cate },
            { path: '/goods', component: List },
            { path: '/params', component: Params },
            { path: '/orders', component: order },
            { path: '/reports', component: Report }
        ]
    }

]

const router = new VueRouter({
    routes
})

//挂载路由导航守卫
//在回调函数的形参中有如下三个参数,to是将要访问的路径，
//from代表要从哪个路径跳转来
//next是一个函数，表示放行
//next()放行，next('/login') 强制跳转
router.beforeEach((to, from, next) => {
    if (to.path === '/login') return next();
    //获取token
    const tokenStr = window.sessionStorage.getItem('token');
    if (!tokenStr) return next('/login');
    next();
})

export default router

用elementui开始设置登录页面。

找到官网，配置elementui
明白elementui中的表单如何使用