Vue2-todolist——搭建&配置&路由&守卫

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

大家好，我是猪痞恶霸，入门未满一年的带学生一枚，请多多关照。

从0开始搭建Vue项目——todolist，本文涉及cli搭建项目&配置&路由&守卫相关内容

搭建项目

1. vue-cli全局安装

   npm install -g @vue/cli
   //安装vue-cli 4
   

2. 搭建脚手架

   vue create todolist-vue
   

3. 到达项目目录

   cd todolist-vue
   

4. 运行

   npm run serve
   

在安装过程中会有自定义的配置，一般来说我选择配置css预处理以及默认eslint。当然其中的路由也就是vue-router可以选择安装也可以选择后续安装，以及相关配置不必要的情况下不要存在package.json中

安装elementUI库

1. 安装

   npm i element-ui -S
   

2. 引入（全局）

   //main.js
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)
   

main.js配置说明

1. import Vue from 'vue'

   导入vue包，得到Vue构造函数

2. import App from './App.vue'

   导入APP.vue根组件，把其中的模板结构渲染到页面中

3. new Vue({render:h=>h(app)}).$mount('#app')

   创建Vue的实例对象并把render函数指定的组件渲染到页面上

路由配置

1. 安装vue-router

   npm install vue-router --save-dev
   

2. 我们首先在src目录下新建文件夹views，在views中创建Login.vue和Todo.vue

3. 然后我们在src目录下新建文件夹router，在router新建index.js作为路由配置文件

   //index.js
   import Vue from 'vue'
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)
   

4. 创建路由的实例对象

   const router = new VueRouter
   

5. 向外共享路由实例对象

   export default router
   

6. 引入vue文件

   import Login from "../views/Login";
   import Todo from '../views/Todo'
   

7. 配置实例对象

   {path: "/",redirect: '/login'},
   {path: "/todo",component: Todo},
   {path: "/login",component: Login}
   

   这里的redirect 为默认，当地址为/时，会自动跳转到配置的组件中

8. 导入并挂载路由模块(mian.js)

   import router from '@/router/index.js'
   new Vue({render: h => h(APP),router:router}).$mounter
   

   注意这里的@符是指代src目录，其是在webpack中配置，但是由于由脚手架直接搭建，所以我们是没有看到webpack.config.js文件

9. 关于默认src目录的问题

   由于我们项目是由脚手架搭建的所以在我们所看的项目目录中是看不到webpack.config.js文件的，也就是我们看不到我们关于默认目录配置的地方，但是我们可以通过可视化来查看

   • 启动可视化

     vue ui
     

   • 查看任务中的webpack配置

     

   • 运行查看

     

     在这里我们就可以看到关于目录的配置，这里的alias中的第一个就是关于默认目录的配置项目

导航守卫

1. 全局前置守卫

   在我们登录之前，需要配置导航守卫，来防止用户在没有权限的时候绕过登录跳转到操作页面

   • 创建路由实例对象

     const router = new VueRouter({........})
     

   • 调用路由实例对象的beforeEach(),即可声明“全局前置守卫”

     router.beforeEach(function() { })
     

   • 每次发送路由导航跳转时，都会自动触发 fn为一个回调函数

     router.beforeEach(() => { })
     

2. 全局守卫的三个形参

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

   • to 是将要访问的路由的信息对象
   • from 是将要离开的路由的信息对象
   • next 是一个函数，调用next() 表示放行，允许这次路由导航

3. 应用场景

   • 当用户拥有访问权限时，直接放行 next()

   • 当用户没有访问权限时，强制其跳转到登录页面 next('/login')

   • 当用户没有访问权限时，不允许跳转到其他页面 next(false)