vue项目目录结构和启动过程

 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>

src/main.js入口文件引入index.html页面Id为APP的DIV。

 

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里面的模板
posted @ 2023-07-25 14:51  佳宁  阅读(104)  评论(0)  编辑  收藏  举报