请选择 进入手机版 | 继续访问电脑版

VUE项目中文件介绍

[复制链接]
漫舞飞天 发表于 2021-1-1 17:44:17 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
VUE项目中文件先容

VUE项目布局:

  1. index.html:主页,项目入口App.vue:根组件main.js:入口文件router文件夹下的index.js:路由配置文件
复制代码
当点开欣赏器访问项目,最先访问的是index.html, 上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上。
  1.       
  2.   
复制代码
main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,而且告知实例挂在位置。
  1. import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = falsenew Vue({  el: '#app',  router,  components: { App },  template: ''})
复制代码
接着注册一个局部组件App,即components,指向当前目次下的App.vue,而实在模板就是template中的内容。
router文件夹下的index.js,主要是实现页面路由跳转
  1. import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    }  ]})
复制代码
通过配置routes中列表,实现页面跳转
  1. path: 页面跳转路由name: 页面实例名称component: 页面文件所在位置
复制代码
后期实际开发主要是会合于路由配置和项目vue的渲染。

来源:https://blog.csdn.net/qq_26666947/article/details/112005228
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )