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

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

搭建项目

  1. vue-cli全局安装
npm install -g @vue/cli
//安装vue-cli 4
复制代码
  1. 搭建脚手架
vue create todolist-vue
复制代码
  1. 到达项目目录
cd todolist-vue
复制代码
  1. 运行
npm run serve
复制代码

1.webp.jpg

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

安装elementUI库

  1. 安装
npm i element-ui -S
复制代码
  1. 引入(全局)
//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
复制代码
  1. 我们首先在src目录下新建文件夹views,在views中创建Login.vue和Todo.vue
  2. 然后我们在src目录下新建文件夹router,在router新建index.js作为路由配置文件
//index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
复制代码
  1. 创建路由的实例对象
const router = new VueRouter
复制代码
  1. 向外共享路由实例对象
export default router
复制代码
  1. 引入vue文件
import Login from "../views/Login";
import Todo from '../views/Todo'
复制代码
  1. 配置实例对象
{path: "/",redirect: '/login'},
{path: "/todo",component: Todo},
{path: "/login",component: Login}
复制代码
  1. 这里的redirect 为默认,当地址为/时,会自动跳转到配置的组件中
  2. 导入并挂载路由模块(mian.js)
import router from '@/router/index.js'
new Vue({render: h => h(APP),router:router}).$mounter
复制代码
  1. 注意这里的@符是指代src目录,其是在webpack中配置,但是由于由脚手架直接搭建,所以我们是没有看到webpack.config.js文件
  2. 关于默认src目录的问题由于我们项目是由脚手架搭建的所以在我们所看的项目目录中是看不到webpack.config.js文件的,也就是我们看不到我们关于默认目录配置的地方,但是我们可以通过可视化来查看
  • 启动可视化
vue ui
复制代码
  • 查看任务中的webpack配置
    1.webp.jpg
  • 运行查看
    1.webp.jpg
    在这里我们就可以看到关于目录的配置,这里的alias中的第一个就是关于默认目录的配置项目

导航守卫

  1. 全局前置守卫在我们登录之前,需要配置导航守卫,来防止用户在没有权限的时候绕过登录跳转到操作页面
  • 创建路由实例对象
const router = new VueRouter({........})
复制代码
  • 调用路由实例对象的beforeEach(),即可声明“全局前置守卫”
router.beforeEach(function() { })
复制代码
  • 每次发送路由导航跳转时,都会自动触发 fn为一个回调函数
router.beforeEach(() => { })
复制代码
  1. 全局守卫的三个形参
router.beforeEach((to,from,next) => { })
复制代码
  • to 是将要访问的路由的信息对象
  • from 是将要离开的路由的信息对象
  • next 是一个函数,调用next() 表示放行,允许这次路由导航
  1. 应用场景
  • 当用户拥有访问权限时,直接放行 next()
  • 当用户没有访问权限时,强制其跳转到登录页面 next('/login')
  • 当用户没有访问权限时,不允许跳转到其他页面 next(false)



相关文章
|
2月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
3月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
221 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
652 4
|
3月前
|
资源调度 JavaScript 前端开发
路由管理:Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理:Vue Router的使用和配置技巧
64 3
|
3月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
|
3月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
691 0
|
3月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
1039 0
|
3月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
vue中vue-router路由懒加载(按需加载)的作用以及常见的实现方法
255 1
|
3月前
|
JavaScript 前端开发 UED
|
3月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫