Vue开发实例（04）之更换项目入口

Posted 2022-03-09 编程界明世隐

作者简介

作者名：编程界明世隐
简介：CSDN博客专家，从事软件开发多年，精通Java、javascript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！

引言

Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！
即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！

导航

✪  Vue开发实例目录总索引
◄ 上一篇【03】Vue项目引入element_ui
► 下一篇【05】搭建项目主页面头部、导航、主体等页面布局

概述

1. 之前创建的Vue项目都是自动的，所以我们运行项目后打开页面：

http://localhost:8080

页面效果大概如下：

2. 但是如果我们想输入地址后，页面进入的是自己定义的，应该怎么做呢，我们肯定不会要这个HelloWorld页面。

创建自己的入口

一、创建index页面

1. 在项目的src–components，创建Index.vue。
   

2. 写入代码

• 模板代码

<template>
  <div>
    <h1> msg </h1>
  </div>
</template>

• 将此页面导出的js代码

<script>
export default 
  name: 'Index',
  props: 
    msg: String
  

</script>

3. Index.vue完整代码如下：

<template>
  <div>
    <h1> msg </h1>
  </div>
</template>

<script>
export default 
  name: 'Index',
  props: 
    msg: String
  

</script>

二、分析修改代码

1. 查看main.js 我们可以看到，项目是通过App.vue来加载的
   
2. 打开App.vue，查看代码
   
3. 这里3个地方加载并使用HelloWorld页面，此时我们来改成自己的Index.vue，修改这3个地方

4. 运行项目，可以看到效果
   

5. 修改主页欢迎字
   
   主页如下：
   

6. 修改主页图片，图片自己放进去哈
   

<img alt="Vue logo" src="./assets/index.jpg">

修改后页面如下：

小结

这节总结了“更换项目入口”，希望能对大家有所帮助，请各位小伙伴帮忙 【点赞】+【收藏】+ 【评论区打卡】， 如果有兴趣跟小明哥一起学习Java的，【关注一波】不迷路哦。
请到文章下方帮忙【一键三连】谢谢哈！

导航

✪  Vue开发实例目录总索引
◄ 上一篇【03】Vue项目引入element_ui
► 下一篇【05】搭建项目主页面头部、导航、主体等页面布局

热门专栏推荐

【1】Java小游戏（俄罗斯方块、植物大战僵尸等）
【2】JavaWeb项目实战（图书管理、宿舍管理等）
【3】JavaScript精彩实例（飞机大战、验证码等）
【4】Java小白入门200例
【5】从零学Java、趣学Java
【6】IDEA从零到精通