vue项目hello程序的成功显示例子1(一看就懂)

2021/7/18 14:06:46

本文主要是介绍vue项目hello程序的成功显示例子1(一看就懂),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

 

 

安装代码提示插件。 用这个插件。 

 

 

 

 写代码

 

 2 写好代码,要加路由的啊!

 

复习看过去的代码。 

 

   换一个,能写的进行测试的了。

    过去文件,测试3

 不仅仅路由加了,app.vue里面同样要写入的!  只是这个不太会写。 。。。

  

 

 

 终于显示出来,并全面没有报错

 

  修改加入代码了。

 

1 //1 加路由
2   {
3     path:'/hello',
4     name:'hello',
5     component:()=>import('../components/hello.vue')
6   },

  默认生成的代码中,加入的代码块。根组件app.vue代码

  

1  <!-- 加入代码 -->
2 
3 
4 <div id="nav">
5      
6       <router-link to="/hello">hello</router-link>
7     </div>
8     <router-view />
9  <!-- 加入代码 -->

 加入这些, 写入的组件hello,就可以显示的了。如上图所示。 

    

  

 



这篇关于vue项目hello程序的成功显示例子1(一看就懂)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程