Vue CLI

最新推荐文章于 2024-06-18 19:46:11 发布
最新推荐文章于 2024-06-18 19:46:11 发布
阅读量254 收藏 1
点赞数 4
分类专栏： 前端 文章标签： vue.js 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h1090637222/article/details/125077222
版权

1.关于Vue CLI

关于Vue

  • Vue. js（读音：/vjuː/, 类似于：view） 是一套构建用户界面的渐进式框 架
  • Vue. js的官方网址是：https://cn. vuejs. org/index. html
  • 传统的前端开发框架大多是基于DOM（Document Object Model：文档 对象模型）的，在操作时，需要关心被操作的页面元素，甚至这些页面元 素的层级结构，核心思想是：先根据DOM找到对应的页面元素，然后再 进行相关操作，例如设计其样式，或配置某个事件
  • Vue则是将必要的页面元素的相关属性（例如页面元素的样式、控件的值、 页面元素的事件等）与数据进行绑定，当实现绑定后，就不再需要关心页 面元素本身了，只需要关心各个数据即可，从而避免了大量繁琐的DOM操作，也实现了页面设计与数据处理的分离
  • Vue CLI通常称为“VUE脚手架”，它是一个专门为单页面应用快速搭建 繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue 和webpack的工程模板
  • Vue CLI相关文档的官方网址是：https://cli. vuejs. org/zh/guide/
  • Vue CLI是由VUE提供的一个官方客户端（client），专门为单页面应用 快速搭建繁杂的脚手架
  • 所谓的单页面，指的是在工程中，理论上只有1个HTML页面，只不过这 个页面的所有内容都是可以动态更新的，你随时可以使用新的页面内容替 换原有的内容，并且，你还可以使得URL一并更新，从用户体验上来说， 这种单页面应用与传统的前端应用并没有什么不同
  • 需要注意：在使用传统模式开发的前端工程中，各个页面是相对独立的， 甚至你可以在本地硬盘上找到对应的html文件并双击直接打开它，而Vue CLI工程与一个Web应用程序一样，是需要启动服务才可以访问的，一定 程度上，它的上手难度会更大一些，但是在中大型应用程序的开发中，它 在开发效率、管理和维护成本上有更大的优势
  • 单页面应用的工程中需要一定的配置，对配置文件的位置也有一定的要求， 整体工程结果并不像传统的前端应用工程那么自由，所以，手动创建这种 应用的成本较大，而Vue CLI则可以自动生成vue. js + webpack的工程模 板，是为现代前端工作流提供了Batteries-included（自含全套工具集） 的构建设置，只需要几分钟的时间甚至更短的时间就可以运行起来。
  • 由Vue CLI创建的工程， 默认即是热部 署的，当你启动了这个工程（非打包后 的工程）的服务后，在绝大部分情况下， 修改源代码后并不需要重新启动服务， 即可体验到修改后的内容。
    在这里插入图片描述

关于npm

  • npm的全称是：Node Package Manager，可译为“Node包管理器”。
  • 在早期没有npm时，如果需要在前端工程中使用某些框架（例如jQuery、 Bootstrap等），需要找到相关的官网或资源站点，要么下载这些框架的 文件，要么使用cdn在线引用这些文件，其过程相对烦琐，因为这些框架 的具体表现可能不只是一个文件，如果下载，只能下载打包后的文件并自 行解压缩，如果在线引用，则需要自行添加多条源代码进行引用，同时， 是这些框架也是在不停维护和更新的，即使开发人员在本地已经下载过这 些框架文件，当需要新版本的框架时，又需要重新下载，或者上网搜索最 新的cdn引用地址。
  • 为了解决这个问题， I s a a c Z . S c h l u e t e r 使用运行在N o d e . j s 之上的 Java Script语言开发了npm，它允许配置一个仓库，I并将大量框架的文 件放在了npm仓库中，并提供了一系列的管理命令，最终，开发人员只需 要使用npm的命令，就可以在线获取到框架文件。通常，框架的文件会自 动的存储到工程目录下，并在工程的配置文件中进行注册，开发人员只需 要在主配置中进行导入及一些简单的配置就可以开始使用这些框架。一定程度上，npm与Maven或Gradle是比较相似的。

2. 搭建开发环境

安装Node.js

  • 为了使用npm，首先需要下载Node. js安装包，下载地址可参考：
    • https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi
    • https://mirrors. nju. edu. cn/nodejs/latest- v 16 . x/node- v 16 . 14 . 2 - x 64 . msi
    • https://mirrors. tuna. tsinghua. edu. cn/nodejs- release/v 16 . 14 . 2 /node- v 16 . 14 . 2 - x 64 . msi
  • Node. js的安装过程没有特别的注意事项，整个安装过程中都可以不必修 改任何内容，直至其自动安装完成
  • 此安装包会自动配置环境变量，安装完成后，可检查npm命令是否可用， 在操作系统的命令提示符下执行以下命令即可：
    • npm -v
    • 执行以上命令后，将显示版本号，例如：
      在这里插入图片描述
  • 注意：你必须在新的命令提示符窗口（安装完Node. js后再打开的窗口） 中运行此命令。

配置npm源

  • nmp源（即npm仓库，称之为：registry）默认是境外服务器，在国内 使用时，访问速度较慢，通常，在初次使用时，应该将npm源更换为国内 的服务器地址，例如使用https://registry. npm. taobao. org作为npm源
  • 配置npm源的命令如下：
  • 当配置成功后，可通过get命令可查看npm源：
    • npm config get registry
    • 将显示当前生效的npm源，例如：
      在这里插入图片描述
  • 注意：无论你使用哪种操作系统，必须保证当前登录的用户具有最高访问 权限，例如，在Windows操作系统中，请使用管理员模式的命令提示符， 在Mac OS中，请使用sudo来执行以上命令。

安装Vue CLI

  • 安装Vue CLI的命令如下：
    • npm install -g @vue/cli
    • 以上命令中，-g表示全局安装，则当前操作系统中所有用户均可使用，且 自动配置Vue环境变量。
    • 此过程将从仓库服务器中下载Vue CLI，通常耗时30秒至5分钟左右。
  • 提示：如果安装过程中的日志提示更新npm版本，或提示某些软件版本偏 旧等，均可无视。
  • 注意：以上操作仍需要管理权限才可以成功执行。
    -安装完成后，可通过以下命令检验Vue CLI是否安装成功：
  • vue -V
  • 注意：以上命令中的-V中的V是大写的。
  • 执行以上命令后，将显示当前的Vue CLI版本号，例如：
    在这里插入图片描述

3. 创建第1个Vue CLI工程

创建工程

  • 通常使用Vue的命令来创建Vue CLI工程，并且，此命令会将工程创建在 执行命令时的位置，所以，先在命令提示符窗口中进入Vue Workspace， 例如（以下示例中的#开头是注释，不要执行）：
# 切换到D盘
d:
# 创建Vue的Workspace，文件夹名称为Vue-Workspace，是自定义名称
# 如果Vue的Workspace已经存在，则不需要执行接下来这条命令
# 如果使用IntelliJ IDEA开发VUE CLI工程，也可以直接使用IntelliJ IDEA的Workspace，  无强制要求
mkdir Vue-Workspace
# 进入D盘下的Vue-Workspace    cd Vue-Workspace
  • 当进入Vue Workspace后，就可以创建工程了
  • 使用vue create命令即可创建Vue CLI工程，命令格式是：
    • vue create 工程名称
    • 例如执行：
    • vue create vue-project-01
  • 输入以上指令后，按下Enter键将准备创建工程，创建过程可能耗时较长，
  • 注意：不可反复按Enter键，否则会视为选择各设置选项的默认项
  • 创建过程中会有一些选项，最先提示的选项是Please pick a preset，表 示“请选择一个预设项”，推荐选择Manually select features，表示 “手动选择”，通过键盘的上下箭头进行选择，选择到目标项后按下键盘 的Enter键到下一步：
    在这里插入图片描述
  • 接下来的选项是Check the features needed for your project，表示“选择你的工程中需要使用的功能”，推荐在列表中选择Babel、Router、 Vuex这3项，使用键盘的上下箭头移动，使用空格选中或取消选中，选择完成后按下键盘的Enter键到下一步：
    在这里插入图片描述
    • 关于列表中主要的几个功能：
      • Babel：ES 6 高级语法向低版本语法兼容的工具
      • Router：路由管理器（管理请求路径与页面资源的映射关系，相关于Controller中 @ RequestMapping）
      • Vuex：全局状态管理工具（管理全局共享的内存中的数据，例如各页面需要使用到 的用户信息）
      • Linter：初学者不建议勾选，是代码规范检验工具，其要求较严格
  • 接下来的选项是Choose a version of Vue. js that you want to start the project with，表示“选择你的工程中希望使用的Vue. js的版本”， 推荐选择2. x这项，选择到目标项后按下键盘的Enter键到下一步：
    在这里插入图片描述
  • 接下来的选项是Use history mode for router，表示“是否在路由中选 择历史模式”，推荐选择“是”，输入Y后按下键盘的Enter键到下一步（提示信息中，Y是大写的，表示它是默认选项，不输入Y而直接按下 Enter键是等效的）：
    在这里插入图片描述
  • 接下来的选项是Where do you prefer placing config for Babel, ESLint, etc.?，表示“你习惯把一些配置信息存放在哪里？”，推荐选择 In package. json，即存 放在package. json文件中，选择到目标项后按 下键盘的Enter键到下一步：
    在这里插入图片描述
  • 最后的选项是Save this as a preset for future projects?，表示“是否 保存以上配置信息，作为后续将创建的新工程的预设？”，推荐选择“否”，输入N后按下键盘的Enter键（提示信息中，N是大写的，表示它 是默认选项，不输入N而直接按下Enter键是等效的）：
    在这里插入图片描述
  • 至此，配置过程已经结束，接下来会自动创建工程，耗时取决于网络速度， 通常需要30秒至5分钟左右

启动服务

  • 注意：从现在开始，你可以使用IntelliJ IDEA或类似的开发工具来打开你 的项目，并使用内置的Terminal执行各个命令，使用方式与命令提示符 窗口完全相同，为保证你有足够的权限执行命令，你应该以管理员的身份运行IntelliJ IDEA，否则，后续仍可能出现某些命令无法成功执行的问题。进入工程目录，执行npm run serve命令即可启动此工程的服务（过程中 会编译打包此工程）：
    • npm run serve
  • 当提示以下信息时，表示工程已成功启动：
    在这里插入图片描述
  • 当工程成功启动后，即可根据提示的URL在浏览器中进行访问：
    在这里插入图片描述
  • 如果需要停止服务，在控制台使用Ctrl + C即可
  • 提示：当按下Ctrl + C后，会提示" 终止批处理操作吗(Y/N)?"，其实，当 按下Ctrl + C后，服务已经被停止，在此提示中无论选择Y或N结果都已经 不重要了

重启服务

  • Vue CLI工程启动的服务支持热部署（热更新，即：当保存对源代码的修 改后，会自动重新编译打包并覆盖原本已经启动的服务中的文件），并没 有重启服务的做法，如果在某些场景中需要实现“重启”的效果（例如修 改服务端口等），可以先停止服务，然后再次启动服务

指定服务端口

  • 此服务默认占用8080端口，如果端口已经被占用，将自动修改端口为 8081或继续向后递增端口号

  • 如需手动修改端口号，在工程根目录下的package. json中修改scripts属 性下serve的值：

    • vue-cli-service serve --port 端口号

  • 例如改为使用9090端口：
    在这里插入图片描述

  • 则下次启动时会使用新设定的端口号：
    在这里插入图片描述

  • 提示：即使显式的指定了端口号，如果指定的端口仍被其它服务占用，仍会自 动在指定端口号的值的基础上递增，以使用新的端口号！例如显式的指定了使 用9090端口，如果9090被占用且9091可用时，会自动改为使用9091端口。

4. 了解Vue CLI工程

工程结构

  • [.idea]：使用IntelliJ IDEA打开工程时会产生此文件夹，其中的文件都 是IntelliJ IDEA管理此工程时将使用到的，不手动管理，即使删除此文件 夹，IntelliJ IDEA也会按需自动创建此文件夹及其下必要的文件
  • [node_modules]：工程中使用到的模块，也可以理解为工程的依赖项， 例如Babel、Vue等框架的文件，不手动管理
    • 需要注意：如果是从Git或其它位置复制得到的工程，可能没有此文件夹，需要运行 npm install，否则将无此文件夹及其下的各依赖项，工程将无法正常启动
    • 本课程提供的资源中，各练习案例也不包含此文件夹，均需要在各工程目录下执行 npm install后才可以正常运行
  • [public]：工程被编译打包后仍会保留的内容（文件内容可能会在编译打 包过程中修改）
    • 你可以自行在此文件夹下创建子级文件夹，用于存放静态资源，例如图片等
  • public/index.html：默认的主页，通常不修改其内容。
  • [src]：页面源代码，除工程配置以外的所有开发都在此文件夹下
  • [src/assets]：资源文件夹，通常存放图片等
    • 注意：仅不需要被程序动态控制的图片放在此处
  • [src/components]：视图组件，通常是可以被其它各页面复用的，是各 个. vue文件
  • [src/router]：路由控制
  • src/router/index.js：路由配置文件，除非工程中页面数量较大，或路 由关系复杂，否则使用这1个文件进行路由管理即可
  • [src/store]：全局共享的内存中的数据
  • src/store/index.js：暂不关注
  • [src/views]：视图组件 ，通常，每个页面在此文件夹都应该有1个对应 的文件，可引用[src/components]下的组件
  • src/App.vue：默认的主页视图组件
  • src/main.js：工程的主js文件，通常用于导入工程中将使用的其它库
    • – 此文件中所有import语句必须在最上方位置，各import语句不区分先后顺序
  • .gitigore：用于配置使用Git提交工程时将忽略的文件和文件夹
  • bable.config.js：Babel的配置文件，在不熟悉的情况下不要手动修改 此文件的配置
  • package.json：工程的管理配置文件，相当于Maven项目的pom. xml， 在不熟悉的情况下不要手动修改此文件的配置，可能需要关注的主要有：
    • scripts：支持的2 个npm命令参数，例如npm run serve、npc run build
    • dependencies：运行时依赖项
    • dev Dependencies：开发依赖项，将不参与打包
  • package-lock.json：工程的管理配置文件，在不熟悉的情况下不要手 动修改此文件的配置
  • README.md：工程的说明文档，用于开发人员编写如何使用、注意事 项、更新日志等内容，使用IntelliJ IDEA首次打开工程时，会自动打开此 文件，此文件的默认内容中提示了工程的运行命令
  • vue.config.js：Vue的配置文件，在不熟悉的情况下不要手动修改此文 件的配置

关于视图组件

  • 所有以 . vue 为后缀的都是视图组件，根目录下的App. vue默认代码为：
    在这里插入图片描述
  • 可以看到此文件中主要有2个节点：
    • < template> 节点：用于设计页面元素，其内部代码可以是标准HTML代码，也可以 是Vue或其它库（例如Element UI）支持的代码
    • < style> 节点：用于定义样式，语法规则与传统前端技术中完全相同
  • 需要注意：在必须有且仅有1个直接子节点（通常是
    节 点），否则将无法通过编译！
    • 反例：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
<div>这是一段错误的演示</div>
</template>
  • 当尝试编译打包此工程时，会提示错误：
    在这里插入图片描述
  • 而默认的views/HomeView. vue的源代码如下：
    在这里插入图片描述
  • 另外，在以上views/HomeView. vue文件中，第4行代码为：
  • 以上代码是基于其在

关于路由

  • Vue CLI应用是单页面的，也就是说，在Vue CLI工程的设计思想中，页 面只有1个，只不过页面中的内容是可以动态调整的，所以，无论是使用 不同的URL进行访问，还是页面中触发某个事件后，虽然用户看到了不同 的页面效果，但是，用户看到的其实永远只是1个页面，只是页同中的内 容不同而已，这也就是视图组件源文件中使用节点设计页面 元素的原因（template释义为：模板）。
  • Vue CLI工程使用路由控制 单页面中显示的元素，默认 的router/index. js源代码 如图所示：
    在这里插入图片描述
  • 在此文件中，需要重点关注import语句和routes常量。
  • routes常量是一个数组，数组元素是JSON对象，此JSON对象中主要配 置的属性有：
    • path：路径，即URL路径，每个JSON对象的此属性值必须是唯一的，Vue将根据用 户访问的URL加载对应的视图组件
    • name：名称，可忽略，如果配置此属性，则每个JSON对象的此属性值必须是唯一 的
    • component：视图组件，当访问的URL匹配path时，此视图组件将被显示，在配置 此属性的值时，需分析此视图组件是否为动态导入（懒加载）的
      • 默认即导入：当客户端首次访问此服务时，就会导入此视图组件，需通过此文件顶部通 过import语句导入，且component属性的值就是import时指定的视图组件名，每个工 程中通过此方式导入的视图组件应该非常少
      • 动态导入：取值是使用ES 6 中的import() 返回的Promise对象，相比之下，import语句 是默认即导入的，而import() 函数是动态导入的，以避免客户端首次访问此服务时就加 载了大量的视图组件，每个工程中的绝大部分视图组件都应该是这种方法导入的
  • 注意：以上语法格式需要Babel支持，否则将无法正常编译打包
  • 提示：此JSON对象还有更多属性配置，将在后续的应用中补充。

运行流程概要

  • 在启动服务的过程中，会加载相关配置，例如配置的端口号等

  • 此过程通常是无感的，不需要过多关注，只要最终能提示访问此服务的 URL即可视为成功，如果启动服务失败，则会提示错误信息

    1. 默认的主页是public/index. html（单页面应用中也只有这1个页面）， 则加载此页面，注意此页面中的
      ，如下图所示：
      在这里插入图片描述
    1. 根据main. js中的代码，其导入了./App. vue，并在挂载id为app的元素 时使用./App. vue进行渲染，可简单理解为<div id=" app>" 就是 App. vue组件的全部内容
      在这里插入图片描述
    1. 在App. vue的页面设计中，有
    1. 由于以上第1个节点配置的to属性是/，匹配当前访问的 http://localhost: 8080为根路径的请求，则在/router/index. js中根据/匹 配视图组件，也就是HomeView. vue：
      在这里插入图片描述
    1. 所以，当访问http://localhost: 8080时，在App. Vue的 处实际显示的由HomeView渲染的效果，在HomeView. vue中，仅使用标签显示了Vue的logo图片，然后，就通过HelloWorld组件渲染剩 余的部分，并且，在引用HelloWorld组件时，还传入了名为msg的参数：
      在这里插入图片描述
    1. 最后，由HelloWorld. vue完成页面中剩余部分的渲染，并通过{{ msg }} 语法将HomeView. vue中传入的" Welcome to Your Vue. js App" 显示在页 面中：
      在这里插入图片描述
    1. 当在浏览器中点击About时，由于配置的节点的to属性是/about，所以，在浏览器的地址栏中可以看到URL变成了 http://localhost: 8080/about：
      在这里插入图片描述
    1. 由于在router/index. js中配置了/about路径映射的组件是动态导入…/view/AboutView. vue，则此时会由AboutView. vue完成在App. vue 中处的渲染。
      在这里插入图片描述

5. 使用Element UI

关于Element UI

  • Element UI是一套采用 Vue 2. 0 作为基础框架实现的组件库，一套为开 发者、设计师和产品经理准备的基于 Vue 2. 0 的组件库，提供了配套设计 资源，帮助网站快速成型。

  • Element UI的官方网址是：https://element. eleme. cn/

  • 简单来说，Element UI预定义了几乎所有标签的常规设计样式，在绝大部分情况下，你不需要考虑例如按钮的宽度、高度、背景颜色、文本大小、 文本颜色等样式规则，只需要直接使用即可，例如Element UI提供的按钮：
    在这里插入图片描述

  • 当然，除了按钮以外，对于表格、表单、表单中各控件、弹出框等常见的 页面元素，Element UI都设计了非常简约美观的样式，例如：
    在这里插入图片描述

  • Element UI之所以被称之为“组件库”，是因为它不再使用传统的HTML 标签，而是自行定制了一系列的标签（包括 标签属性），以按钮为例， 其源代码大概是这样的：

    • 主要按钮

  • 除了样式以外，Element UI还提 供了便利的表单控件的验证方式， 执行效果例如：
    在这里插入图片描述

  • 由于Element UI定义了大量的组件，每个组件都有许多属性，所以，学 习Element UI时需要记忆大量的组件特征，这将是一个非常漫长的过程， 通常不建议刻意的死记硬背，应该重点关注Element UI可以做到什么， 例如有哪些样式，各组件的核心属性等用法，然后结合官方文档（https://element. eleme. cn/#/zh-CN/component/）进行开发。

安装Element UI

  • 首先进入工程文件夹（如果使用IntelliJ IDEA打开了此工程，直接点击 IntelliJ IDEA下面的Terminal即可）：
    • cd d:/Vue-Workspace/vue-project-02
  • 然后使用npm命令安装Element UI，以下2条命令是等效的（注意：以下 命令区分大小写，例如最后的-S的字母是大写的）：
    • npm i element-ui -S
    • npm install --save element-ui
  • 安装完成后，在工程的main. js中导入并使用Element UI：
// main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
  • 至此，已经可以在工程中使用Element UI了。

7. 使用axios

关于axios

  • axios是一个易用、简洁且高效的http库，主要用于发起HTTP请求，并 获取响应的结果。
  • axios的官方网址是：http://www. axios-js. com/
  • axios的主要特点有：
    • 从浏览器中创建 XMLHttpRequests
    • 从 node. js 创建 http 请求
    • 支 持 Promise API
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换 JSON 数据
    • 客户端支持防御 XSRF

axios基本使用

  • 发起GET请求示例：
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {  console.log(response);
})
.catch(function (error) {  console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {  params: {
ID: 12345
}
})
.then(function (response) {  console.log(response);
})
.catch(function (error) {  console.log(error);
});
  • 发起POST请求示例：
axios.post('/user', {  firstName: 'Fred',  lastName: 'Flintstone'
})
.then(function (response) {  console.log(response);
})
.catch(function (error) {  console.log(error);
});

更多示例请参考axios官方文档：http://www. axios-js. com/zh- cn/docs/

安装axios

  • 与此前的Element UI的安装方式类似，当需要安装axios时，应该先切换 到Vue CLI工程的文件夹下，然后再运行命令以安装axios，安装命令为：

    • npm i axios -S
      或：

    • npm install --save axios

  • 安装完成后，也需要在main. js中添加配置，配置代码为：
import axios from 'axios'
  Vue.prototype.axios = axios

8. Vue CLI的嵌套路由

关于嵌套路由

  • 在实际应用开发中，页面的内容呈现可能存在巨大的差异，例如：
    在这里插入图片描述
  • 由于Vue CLI工程是单页面的，为了保证能显示各式各样的页面，则需要 将页面的整个区域都设计为，然后根据URL不同，加载 不同的视图组件（. vue文件）。
  • 但是，即使将整个页面的显示区域作为一个，多个页面 仍可能存在共用的部分，例如：
    在这里插入图片描述
  • 如果要设计为以上风格，则页面中的右侧最大的区域也必须是一个，就会形成最外部（页面所有部分）是 的同时，内部还有一个（右侧的大区域），在配置路由 时，就需要使用到嵌套路由的做法了。
  • 当然，如果以上设计风格中右侧区域中仍有各页面均显示的部分，还可以 继续在其内部进行嵌套，通常，并不建议嵌套太多层次。

嵌套路由的使用方式

  • 在router/index. js中，传统路由的配置大致是：
const routes = [
{
path: '/',  component: HomeView
},
{
path: '/about',
component: () => import('../views/AboutView.vue')
}
];
  • 而嵌套路由则需要在原路由的某对象中添加children属性，此属性仍是一 个数组，其内部的配置方式与routes常量是相同的，例如：
const routes = [
{
path: '/admin',
component: () => import('../views/AdminView.vue'),  children: [
{
path: 'user/list'
component: () => import('../views/admin/UserListView.vue')
},
{
path: 'user/add-new'
component: () => import('../views/admin/UserAddNewView.vue')
}
]
}
];
  • 提示：以上children下的配置中，各path没有使用/作为第1个字符，则 表示在父级路径的基础上增加，例如配置为user/list，由于父级配置了/admin，则完整路径为/admin/user/list。
  • 另外，如果希望访问子级嵌套的视图（例如以上/admin对应的视图）时 就打开某个其子级视图（例如以上/admin/user/list对应的视图），在配 置存在子级的视图（例如以上/admin对应的视图）时，还可以添加redirect属性，使其直接重定向到子级视图，例如：
const routes = [
// 省略前序代码
{
path: '/admin',
redirect: '/admim/user/list',
component: () => import('../views/AdminView.vue'),  children: [
// 省略子级代码
]
}
];
  • 在实际开发时，各 页面的标题栏显示的文本可能是不同的，可通过Vue CLI的路由守卫及元 数据实现，在router/index. js中，配置每个路由信息时，可以添加meta 元数据，在这里设置标题文字，路由守卫可在发生路由跳转时执行特定的 操作，例如全局前置守卫就可以在每次路由跳转之前执行，在此时设置标 题文本即可
    在这里插入图片描述
    在这里插入图片描述
  • 以上路由守卫的代码为：
router.beforeEach((to, from, next) => {  if (to.meta.title) {
document.title = to.meta.title
}
next()
})
h1090637222
关注
专栏目录
Vue Cli与BootStrap结合实现表格分页功能
08-29
Vue Cli与BootStrap结合实现表格分页功能 该资源主要介绍了如何使用Vue Cli与BootStrap结合实现表格分页功能。下面是相关知识点的详细说明： 一、Vue Cli简介 Vue Cli是基于Vue.js的命令行工具，用于快速构建Vue....
VueCLI
03-06
VueCLI，全称为Vue.js CLI（命令行接口），是Vue.js官方推出的一个强大的脚手架工具，用于快速搭建基于Vue.js的应用程序。它简化了项目初始化、配置管理和开发流程，使得开发者可以更专注于业务逻辑，而不是环境搭建...
Vue-cli
weixin_51971817的博客
07-16 252
vue-cli
vue npm 重启_针对遇到安装或卸载vue-cli失败的解决方案
weixin_29081101的博客
01-30 1619
vue-cli的安装与卸载注：原文出自B站——》FastAPI教程、js教程、vue教程：https://space.bilibili.com/396891097 此文是在我按照原文操作一遍后，遇到了一些问题，自行解决后对原文做出的修改补充。1、安装Node.js1.1官网下载安装地址https://nodejs.org/zh-cn/哪个都行。安装过程只需要改目录：D:nodejs 1.2安装完检...
Vue2动态代理无须重启项目解决方案
Kylin的博客
06-18 355
如果我们需要使用不同的环境地址的时候，就需要使用命令或者手动修改vue.config.js中配置来重新启动项目。当项目项目越来越大的时候，我们需要很长的时间来启动项目，如此反复，极大影响我们开发进度。
Vue-cli(vue脚手架)上万字总结，超详细教程
热门推荐
weixin_45647685的博客
04-02 3万+
1、创建Vue脚手架 1.1、首先系统需要全局安装Vue脚手架 npm install -g @vue/cli 1.2、创建Vue脚手架工程 进入你想创建vue脚手架的目录，然后输入命令 vue create xxx项目名 需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架 显示如图所示说明创建成功 如图命令所示 我们进入myvue工程，执行命令 npm run serve 然后浏览器访问http://localhost:8080/ 到这
vue好久以前的项目起不来了，怎么看，看这里的解决方案
若释·飞语
09-01 1274
vue项目启动失败解决方案缘起失败尝试方案一：重新安装依赖失败尝试方案二：重新clone尝试方案三：清理npm缓存 缘起 想起之前的的网站好久没维护了，今天趁着有时间打开把之前写的bug解决一下，然而，启动失败、、、 失败尝试方案一：重新安装依赖 删除之前的node_module重新install，失败。打开node_modules,发现里面并没有安装的依赖。安装失败信息显示找不到相关依赖以及报错 Error: EPERM: operation not permitted, lstat… 安装失败 失败尝试
vue.cli安装
谢谢你的关注
07-21 1088
vue.cli安装 （原因：没有将vue-cli添加到环境变量 1.找到全局安装包路径：vue.cmd所在目录 2.添加为环境变量 3.重启终端或重启电脑）
VueCli3实战项目 - 饿了m.txt
09-07
├─01 VueCli3实战项目-还原eleme订餐App1(短信验证码登录和高德定位) │ 001 VueCli3-饿了吗项目成果展示和注意事项.mp4 │ 002 VueCli3-构建项目和准备工作.mp4 │ 003 VueCli3-构建登录组件.mp4 │ 004 VueCli3-...
03-vuecli3.rar
11-06
Vue CLI 3 是一个强大的命令行工具，用于快速搭建 Vue.js 项目。它极大地简化了 Vue.js 应用程序的初始设置，提供了丰富的插件生态系统，使得开发者可以更高效地进行开发工作。以下是对 Vue CLI 3 的详细介绍，以及...
详解Vue CLI3配置解析之css.extract
12-11
Vue CLI3 是 Vue.js 开发的强大工具，它提供了一套自动化构建流程，简化了项目配置。在 Vue CLI3 中，CSS 的处理有了新的变化。在老版本中，我们使用 `extract-text-webpack-plugin` 插件将所有 CSS 提取到单独的...
解决vue.js + node.js搭接的项目每次修改内容后都要重启问题
dream317
11-20 5279
在我们前端开发中，采用vue.js + node.js等框架搭建的项目，每次修改了代码量比较多时，就会自动断开连接需要重新 npm run dev后才能查看修改效果，这样每次有小的改动，都要重新启动，比较麻烦，也影响我们的开发效率，通过查找发现，默认分配给node运行的空间比较小，当修改内容时，因运行内存过小而断开，需要我们给分配大一点空间就可以解决。 具体方法如下： 找到我们项目的根目录下...
“vue中每次修改内容都要手动重启,内容才改变“解决
Lemon_Haner的博客
01-27 3492
webstorm保存的时候会先保存到旧时文件中，要在setting->stystem settings下的“use save write”去掉
vue重新配置跨域之后一定要重启vue，要不然会报500
weixin_60715479的博客
04-24 1121
vue重新配置跨域之后一定要重启vue，要不然会报500！！！
跨域问题以及解决跨域问题的vue-cli解决方案
这个Bug怎么解啊？
12-23 474
跨域问题以及解决跨域问题的vue-cli解决方案
【转载】Vue-cli(vue脚手架)上万字总结，超详细教程
jspajax的博客
01-11 396
VUE脚手架教学。vue通过脚手架开发详细教学
vue-cli起项目步骤
weixin_30415801的博客
08-10 495
一、 安装 node.js 安装完成后，可以命令行工具中输入node -v和npm -v，如果能显示出版本号，就说明安装成功。 二、安装webpack npm install webpack -g 安装完成后使用webpack -v，如果出现相应的版本号，则说明安装成功。 三、安装 vue-cli npm install -g vue-cli 安装完成后，可以使...
vue-cli—vue-cli安装和启动
jiaojsun的博客
06-16 2170
$ npm install -g vue-cli $ vue -V 2.9.6 $vue init webpack vue-exp 可以一直走 然后进入项目根目录 大致认识一下webpack
vue cli教程
最新发布
07-20
Vue CLI（Vue CLI 简称）是 Vue.js 官方提供的命令行界面工具，用于快速初始化、构建和管理 Vue.js 项目。通过 Vue CLI，你可以轻松创建基于 Vue 的项目结构，并配置好各种优化选项，如路由、状态管理（Vuex）、热...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值