vue项目修改

项目创建完毕后出现一下的页面：

出现这样的页面根本不中啊，怎么换成我的页面，好的，开始看看项目结构：

这都是什么鬼，我在哪里写代码，在哪里修改文件，怎么办？感觉index.html挺熟悉打开看看：

看起来稀松平常啊，就是一个html页面，里面什么都没有，只有一个div容器并且id是app，好吧换个再看看。打开src看看，

直觉告诉我，有点像，打开main.js看看，估计里面写的是一些入口函数什么的：

前几行导入了不少模块，其中router是我们在创建项目时候选择安装的，如果当时选择的是不安装，则不会出现这里的router，这是个路由模块，先不管了，看看他代码：

Vue.config.productionTip = false   这是个什么鬼，猜测一下估计是个判断生产环境用的，不用管了，目的不在这里。

紧接着出现如下代码段，好像是有点意思的：

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这里new了一个对象，对象属性里面用{}又创建了一个对象，对象里面有不少属性，这里有个el，el应该是element元素的意思。这里有个#app，跟前面看到的index.html中的id一致，猜测应该是该main.js文件与html文件关联起来了，至于怎么关联的不用管了，我们目的是怎么创建自己的页面。好的继续看App.vue文件。

文件刚开始有个template标签，表示没见过。应该是vue自定义的模板标签，紧接着是一个图片，把这个图片删除了会怎么样，试试。删除后查看一下页面效果。

发现原来存在的那张图片没了，好事情，找到可以修改的地方了。自己添加一句话试试：

--------------------------------------------------------------------------------------------------------------------------------------------------------------

看到自己添加的话已经出来了：秋名山上行人稀， 常有车手较高低。 如今车道依旧在， 不见当年老司机。 好诗句！

好的差不多了，再看看其他的文件，看看下面的超链接怎么去掉。进入到router文件夹看看：

这个目录真简单就一个index.js文件，打开看看：

直觉告诉我这是路由配置文件，应该是在这里面配置页面路由。里面竟然有HelloWorld，这是个什么东西，先不用管，我们看看其他的文件夹里有没有helloworld。打开components文件夹看看：

说曹操曹操到，这里就存在了一个HelloWorld.vue文件，挺好，打开看看，对了，components是组件的意思。

好的，发现了若干超链接，链接文本与页面上的文字一致，删除一下看看。

变干净多了，没有那么多恶心的链接和图片了，干干静静的，爽。记住了这里也可以修改了。

此时我们整理一下思路，看看哪里可以修改:

1   App.vue

2  HelloWorld.vue

暂时就知道这俩可以修改了。

 

 

 

　

　　

转载于:https://www.cnblogs.com/giserpan/p/9248992.html