企业微信截图_20200914160736.png
1.首先是index.html
index.html则是项目的首页，入口页，也是整个项目唯一的HTML页面。
一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。
2.src/main.js
相当于Java中的main方法，是整个项目的入口js。
主要是引入vue框架，根组件及路由设置，并且定义vue实例
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3.src/app.vue
整个项目的vue入口文件，相当于全局项目最外层的DIV。
一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)。
4.src/assets
目录用来存放资产文件,比如图片和样式。
5.src/components
目录用来存放组件（一些可复用，非独立的页面）
6.src/router
router下的index.js文件中的routes定义了路径为'/'的路由
7.static
静态资源目录，如图片、字体等。
项目启动过程
当在浏览器输入项目地址，回车之后。显示的就是index.html的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>testelementui</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
222.png
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
1.这里的router寻找的是src/router/index.js里面的路由
至于能跳转和显示helloWord，是因为这里的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
}
]
})
2.而components: { App },找的是src/app.vue
里面定义的组件
<script>
//也就是这里
export default {
name: 'App'
}
</script>
3.template: '<App/>'为添加app.vue里面的模板
