VUE项目学习（四）：编写个人页面和配置路由

1、准备工作，下载vue项目

先配置好node.js开发环境，并使用VUE-Cli下载好VUE项目，具体流程可以参考博客https://blog.csdn.net/qq_26666947/article/details/111929871
本文使用HBuilderX作为VUE项目开发工具，也可以使用VSCode工具。

2、删除初始VUE项目的显示Logo

在App.vue中，存在一个默认logo图片显示引用，如下图所示：

删除代码之后，logo就是消失，显示效果为：

3、定义个人页面和路由

（1）编写个人页面，在components文件夹中新建vue文件，如下图所示：

（2）写入测试内容

<template><div><h2>个人编辑的第一个页面</h2></div>
</template><script>
export default {name: 'demo'
}
</script><style>
</style>

（3）配置页面路由
在router文件夹：index.js中增加路由，如下图所示：

增加的路由代码：

 {path: '/demo',name: 'demo',component: () => import("@/components/demo")}

增加位置为：（注意英文逗号一定不能少）

4、运行vue项目

启动项目，在编译工具的终端输入命令：

npm run dev

在浏览器中输入地址：http://localhost:8080/#/demo，即可显示个人页面：

VUE项目学习（四）：编写个人页面和配置路由相关推荐

VUE项目学习系列博文
VUE项目学习系列博文 1.VUE2.0项目学习 (1)VUE项目学习(一):搭建VUE前端项目 (2)VUE项目学习(二):学习项目文件结构 (3)VUE项目学习(三):win10版nginx部署v ...
vue 加载页面时触发时间_解析Vue项目的四个方面优化
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 运行时优化 1.使用v-if代替v ...
VUE项目学习（二）：学习项目文件结构
VUE项目学习(二):学习项目文件结构 VUE项目结构: index.html:主页,项目入口 App.vue:根组件 main.js:入口文件 router文件夹下的index.js:路由配置文件 ...
vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？
[vue-cli]在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗? 自动刷新页面并不是vue-cli的功能,而是webpack的hot-module-replacement-plug ...
VUE项目学习（三）：win10版nginx部署vue项目
VUE项目学习(三):win10版nginx部署vue项目 niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details/1 ...
VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
Vue项目学习（2）
Vue项目实战(2) 6.侧边栏完善 1.二级菜单完善 <el-submenu v-for="item in hasChildren" :index="item.l ...

VUE项目学习（四）：编写个人页面和配置路由

VUE项目学习（四）：编写个人页面和配置路由

1、准备工作，下载vue项目

2、删除初始VUE项目的显示Logo

3、定义个人页面和路由

4、运行vue项目

VUE项目学习（四）：编写个人页面和配置路由相关推荐

最新文章

热门文章