路由拦截案例：

从零开始创建一个新的项目

安装环境

安装Visual Studio Code

  • 官网地址：(https://code.visualstudio.com/)下载安装
  • Visual Studio Code(VS Code)是微软2015年推出的一个轻量但功能强大的源代码编辑器，基于 Electron 开发，支持 Windows、Linux 和 macOS 操作系统。内置了对JavaScript，TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持，功能超级强大。
  • 简单来说就是我们编写代码的必备工具

安装nodejs

  • Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。

  • 通俗点讲 Node.js是一个JavaScript编程语言的运行环境，在没有node.js之前，JavaScript代码几乎只能在浏览器中运行，通过浏览器解释执行。浏览器其实也是JavaScript的一个运行环境，JavaScript在浏览器中运行主要是面向客户端这方面的。后来node.js诞生了，JavaScript就可以在node.js中来运行了，JavaScript可以基于node.js环境做服务端开发。所以node.js也是JavaScript的服务端运行环境。

  • 官方下载地址(https://nodejs.org/en/) 或者中文网站(https://nodejs.org/zh-cn/download/)

  • 一般选LTS长期稳定版嘛 基本功能都差不多，点击下载并安装

  • 安装时，安装路径可以自由更改，最后英文路径或者默认，其它点下一步

  • 安装后，打开Win+R，输入cmd，窗口中输入：node -v 或 npm -v 查看版本号

安装vue脚手架（vue-cli）

官网地址：(https://cli.vuejs.org/zh/guide/installation.html)

  • Window + R键打开运行界面，并输入cmd，点击确定。
  • 输入命令：npm install -g @vue/cli 安装脚手架
  • 或者 yarn global add @vue/cli 安装（前提先安装yarn 使用： npm i yarn -g）
  • vue –version 或 vue -V 查看当前版本号

创建项目

配置下载地址

（如果出现Unexpected token .. in JSON at position …. 那么执行）

  • 下载慢可以切换成淘宝的国内镜像：
    npm config set registry https://registry.npm.taobao.org/
  • 查看是否切换成功
    npm config get registry
  • 强制清除npm缓存：
    npm cache clean –force
  • 再执行安装npm：
    npm install -g npm

通过命令创建

  • 任选一个文件夹位置创建，例如桌面的一个新建文件夹里
  • 将新建文件夹拖入vscode里面 将鼠标移动到该文件夹上 右键终端打开
  • 输入 vue create xxx (xxx是项目的名称为小写英文)
  • 后续就根据项目配置进行选择，上下箭头是移动，空格是确认选择，回车是执行。如果没有，直接回车

运行项目

  • 进入项目目录！！！
  • npm run serve 运行或者 yarn serve

配置路由组件

  • 配置路由组件 – login登录界面 layout-布局界面（首页-新闻-我的）
  • 简单说就是 layout组件里包含首页、新闻、我的 等界面，而在login组件里包含登录，且login和layout是平级的关系
  1. 删除HomeView.vue里的默认信息改名为Home，添加

    首页

  2. AboutView.vue组件改名About，里面 h1信息This is an about page改为 我的
  3. 添加News.vue组件，添加h1新闻界面
  4. 在views下新建Login组件，添加h1登录界面
  5. 在views下新建Layout组件
  6. 配置路由router下的index.js