Vue项目结构及启动过程加载文件

最新推荐文章于 2024-04-29 21:35:15 发布

平安豆儿

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量259

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Li18810710298/article/details/133883309

版权

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里面的模板

平安豆儿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue项目结构及启动过程加载文件

1.首先是index.htmlindex.html则是项目的首页，入口页，也是整个项目唯一的HTML页面。一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。
复制链接

扫一扫