Vue-Router+vue-cli自定义初始化项目的步骤详解

已于 2023-08-10 17:12:17 修改
阅读量222 收藏
点赞数
分类专栏： 项目架构 文章标签： vue.js
于 2022-06-22 20:59:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45024453/article/details/125416512
版权

Vue-Router

一、安装
(1).npm+install+vue-router@3.2.0
在这里插入图片描述

(2).浏览器查看router和route的具体信息
在这里插入图片描述

(3).子路由示例效果
在这里插入图片描述

(4).vue-cli配置路由
在这里插入图片描述

(5).懒加载
component: () => import(‘路径’)
在这里插入图片描述

(6)
二、项目运行
(1).npm run serve命令行启动项目
在这里插入图片描述

(2)、嵌套路由
在这里插入图片描述

(3).懒加载的写法：在路由的component:
component: ()=>import(‘@/views/Nba’)
(4).后台接口http://10.7.173.69:8089/swagger/#/
在这里插入图片描述

http://10.7.173.69:8089/api/login
在这里插入图片描述

(5)
三、脚手架创建新项目(详解)
(1)、vue create appdem01
在这里插入图片描述

(2).vue 2.x
在这里插入图片描述

(3).
在这里插入图片描述

(4).
在这里插入图片描述

(5).lintOnSave: false取消代码书写的严格模式
在这里插入图片描述

(6).
在这里插入图片描述

(7).项目创建完成
在这里插入图片描述

四、待开发

影子信息
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目的创建和vue-router的详解
PCthedream的博客
11-29 818
hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。，根据嵌套路径，渲染嵌套组件。
详解vue-router 初始化时做了什么
明月如霜丶
11-20 2973
vue router 的初始化使用步骤 我们首先来看 vue-router 的使用步骤，然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤： 引入 vue-router： import VueRouter from 'vue-router'; 利用 vue 的插件机制，加载 vue-router： Vue.use(VueRouter); 实例化 VueRou...
Vue创建一个路由项目(Vue Router)
黛琳ghz的博客，期待你的关注。
04-27 3050
💻什么是Router Vue Router 是Vue.js的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括： 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 CSS 类的链接 HTML5 history 模式或 hash 模式 可定制的滚动行为 URL 的正确编码 开始创建 鼠标右键这个微软logo 然后点击Wi...
vue2项目的初始化搭建流程
m0_67911008的博客
05-31 3339
文章旨在vue2项目的初始化搭建流程——包含vue-router，axios，vuex，element-ul配置。使用部分该文章vue2项目的初始化搭建流程是在node已经成功安装配置的条件下，不再展开赘述node的安装，环境配置。
Vue学习之VueRouter的基本用法(多而全)
five-five
03-16 3423
重定向是指将一个路由重定向到另一个路由，可以是一个字符串或者一个路由配置对象。在Vue Router中，我们可以在路由配置中使用。路由元信息是指在路由配置中定义的一些额外信息，例如页面标题、页面描述、页面关键字等。命名路由是指在路由配置中为路由命名，以便在代码中使用。在Vue Router中，我们可以通过配置子路由来实现路由嵌套。在Vue Router中，我们可以在路由配置中使用冒号。这个方法会在每次路由跳转后执行，可以用来做一些页面切换后的处理，例如页面滚动到顶部等。在该函数中，可以指定返回的位置。
详细vue项目初始以及路由配置和跳转
多多学习
02-09 2095
项目初始化： 要初始化一个项目，首先要安装node环境以及npm(nodejs下的包管理工具)或者yarn工具。 步骤： 1、 新建文件夹，在文件目录中输入cmd，回车就进入到了此项目 2、 使用命令vue create + 项目名称去初始化项目，我选择的是vue2，然后回车，它会从github上去拉取代码 3、 代码拉取完毕以后cd到这个项目下，使用yarn serve去运行项目，如果运行成功就没什么问题 补充：这样运行需要我们复制地址去运行，如果在package.json中加上–open会自动在默认浏
vue-router路由表初始化
weixin_43660626的博客
01-15 2203
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const createRouter = () => new Router({ mode: 'history', routes: [] }) const router = createRouter() export function re...
阴影初始化【4】
一个字
05-28 296
FSceneRenderer::InitDynamicShadows（） SetupInteractionShadows void FSceneRenderer::SetupInteractionShadows( FRHICommandListImmediate& RHICmdList, FLightPrimitiveInteraction* Interaction, FVisibleLightInfo& VisibleLightInfo, bool bStaticScen
vue-router配置介绍和使用方法（一）
草巾冒小子的博客
05-11 2万+
1. vue-router配置流程概述： 1) 准备工作：建立项目文件夹，通过cmd命令，完成新建文件夹的相关项目配置（具体操作，请参考[“如何进行 node.js的 安装与卸载 ”](https://blog.csdn.net/qq_35393869/article/details/80088193)）； vue init webpack 项目文件名 接着按要求配置Project n...
VueRouter之加载解析VueRouter文件
玉案轩窗的博客
07-18 2003
前言 vue-router是Vue项目中组件化的核心，负责路由跳转，本系列会分析路由跳转的具体实现逻辑，目标是梳理路由跳转的实现逻辑。分析的版本是VueRouter最新版本，是build之后的vue-router.js文件。 具体分析 从简单实例出发分析整个流程： html文件 <!DOCTYPE html> <html lang="en"> <head...
Vue Router中Matcher的初始化分析
千里马的专栏
11-14 1万+
Matcher createMatcher()的初始化 了解相关的几个概念 1、Location类型 对url的结构化描述。比如url = “/main?p1=1&p2=2222&p3=3333”，它的path就是“ /main” ， query 是{ p1:1, p2:222, p3:333 } declare type Location = { _normalized?...
vue-router vue路由中的问题（坑）
jiang7701037的博客
03-05 3万+
Error in render function: "TypeError: Cannot read property 'matched' of undefined"webpack4.0.1中 ，也存在以下问题（注意点）：1、VueRouter实例化时的参数，可以简写为routes，表示routes:routes。但是要注意的是，“routes:routes”表示属性名是routes，值是route...
vue-router的使用及实现原理
热门推荐
caoxinhui521的博客
08-29 6万+
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航 2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路
Vue-Router的路由实例构造配置
tian361zyc的博客
06-01 1373
vue
vue router入门
shooke笔记
09-19 757
基本使用其实vue全家桶学起来还是很简单的，只要了解了vue的思路，顺着思路学习很easy。// 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter) import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)// 定义（路由）组件。 // 可以从其他文件 im
vue-router 源码：路由的安装与初始化
weixin_34319817的博客
07-27 198
使用 日常我们使用 vue-router 时： 在 template 中我们用 <router-link> 来做路由跳转，用 <router-view> 来做路由跳转后的展示。 <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/ba
Vue 脚手架CLI 初始化项目
有勇气的牛排博客
02-07 1339
1 介绍 CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。 Vue CLI是一个官方发布vue.js项目脚手架 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置 2 Vue CLI使用前提 Webpack Vue.js官方脚手架工具就使用了webpack模板 对所有的资源会压缩等优化操作 它在开发的过程中提供了一套完整的功能，能够使得我们开发
Vue页面加载完成后自动加载自定义函数
光头强的博客
01-06 3万+
created： 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 methods: { indexs:function(){ this.$http.post('{:url("Index/fun")}') .then(function(res){ ...
详解Vue中nextTick的原理与作用
最新发布
fengjing81的专栏
07-24 680
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vite+vue3+js+vue-router+pinia+axios+element-plus
09-02
1. 安装Vite：通过npm全局安装Vite，然后使用Vite命令初始化一个新的项目。 2. 配置Vite：根据你的项目需求，在Vite的配置文件中添加Vue Router、Pinia、Axios和Element Plus的相关配置。 3. 安装和配置Vue Router：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值