vue项目结构详解
2020-12-21 本文已影响0人
handsome5
main.js 是项目的入口文件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
1.new Vue 定义了一个vue根实例，它挂载到一个el:"#app" id等于app的元素上,app我们在index.html上可以看到 <div id="app"></div>,所以说el:"#app"指的就是挂载在index.html上<div id="app"></div>的元素
index.html
2.查看index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-travel</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
components: { App }
components: { App } 是一种es6的写法，实际是components: {App：App }的简写，在es6语法，如果key-value的键值一致的，可以简写，这段代码就是我们项目里面用了个局部组件App，然后在外层我们给这个组件的名字也取为App
template: '<App/>'
template: '<App/>' 顾名思义是模版，意思就是把这个App组件给渲染出来，这个App从哪里来的呢，就是项目下的App.vue 这个组件，通过import App from './App'导入过来的
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
App.vue 由<template>....</template>,<script></script>,<style></style>三部分组成，当一个文件以vue结尾的话，我们管它叫做组件，单文件，组件的模版放<template>....</template>中间，组件的逻辑放在<script></script>中间，组件的样式放在<style></style>标签之间
