VUE project learning (two): learning project file structure
VUE project structure:
index.html：主页，项目入口
App.vue：根组件
main.js：入口文件
router文件夹下的index.js：路由配置文件
When you click on the browser to access the project, the first one to access is index.html, which has a mount point whose id is app, and then our root instance of Vue will be mounted to the mount point.
<body>
<div id="app"></div>
</body>
Main.js is the entry file of the project. In main.js, a new Vue instance is created, and the instance is notified to hang the position.
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/>'
})
Then register a partial component App, namely components, pointing to App.vue in the current directory, but in fact the template is the content in the template.
The index.js under the router folder is mainly to implement page routing jump
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
}
]
})
Realize page jump by configuring the list in routes
path: 页面跳转路由
name: 页面实例名称
component: 页面文件所在位置
The actual later development is mainly focused on routing configuration and project vue rendering.