VUE项目中文件介绍
程序员文章站
2022-03-07 21:50:19
VUE项目中文件介绍VUE项目结构：index.html：主页，项目入口App.vue：根组件main.js：入口文件router文件夹下的index.js：路由配置文件当点开浏览器访问项目，最先访问的是index.html， 上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上。 main.js作为项目的入口文件，在main.js中...
VUE项目中文件介绍
VUE项目结构：
index.html：主页，项目入口
App.vue：根组件
main.js：入口文件
router文件夹下的index.js：路由配置文件
当点开浏览器访问项目，最先访问的是index.html， 上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上。
<body>
<div id="app"></div>
</body>
main.js作为项目的入口文件，在main.js中，新建了一个Vue实例，并且告知实例挂在位置。
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
接着注册一个局部组件App，即components，指向当前目录下的App.vue，而其实模板就是template中的内容。
router文件夹下的index.js，主要是实现页面路由跳转
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中列表，实现页面跳转
path: 页面跳转路由
name: 页面实例名称
component: 页面文件所在位置
后期实际开发主要是集中于路由配置和项目vue的渲染。
本文地址：https://blog.csdn.net/qq_26666947/article/details/112005228