vue项目yarn启动 vue项目启动过程

转载

boyboy 2023-10-12 21:07:22

文章标签 vue项目yarn启动 App Vue html 文章分类 Yarn 大数据

vue启动流程

vue项目开发实战系列

主要内容：

vue目录结构介绍
vue的主要文件
vue的启动流程

1 vue项目目录结构

下面是在VS Code中显示的vue项目目录结构：

vue项目yarn启动 vue项目启动过程_Vue

我们已经在上面标注出比较重要的文件，分析这些比较重要的文件，我们可以掌握vue项目开发的大致流程或者方向，下面将逐一进行介绍。

2 Vue重要文件或目录介绍

2.1 index.html

下面是初始情况下的index.html的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>gdtrain</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but gdtrain doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

整个项目只有这一个html文件，这也说明我们的项目是一个单页面应用程序（single page web application，SPA），你所看到的很多个页面，都被它嵌套到了div中。

代码说明：

line14：整个项目，所有页面（组件）都会被自动注入到这个id为app的div中
line7：public下的favicon.ico是网站的图标
line8：定义标题

2.2 App.vue

App.vue是根组件，用于包含其他组件。一个vue文件就是一个vue组件。

下面是App.vue中的初始代码：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

一个vue组件标准结构类似下面这样：

<template>
  <div id="app">
...
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
...
}
</style>

包括模板（template）、脚本（script）和样式（style）构成。

vue实例根据template生成页面结构，注意：一个template只能有一个根标签

style部分用于控制template部分的样式，因此，line2处的id=app是和line14行的#app样式是发生关联的，它根index.html中<div id="app"></div>没有关联。

程序逻辑会出现在脚本中，此处App.vue没有使用脚本。

App.vue原始代码line4~6行，在页面上显示2个路由链接Home和About

<div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>

如下图所示：

vue项目yarn启动 vue项目启动过程_html_02

原始App.vue代码第7行：

<router-view/>

这里是一个容器标签，用于展示路由视图，它表示页面中的路由链接（home和about）指向的内容在此处展示，比如点击home链接此容器会展示Home.vue的内容，点击about链接会展示About.vue的内容。

2.3 main.js

main.js是vue工程的入口，而App.vue是组件的入口。

下面是main.js中的初始代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

代码说明：

这里首先导入了3个模块（line1~3），首先是vue模块，位于node_modules中，然后是根组件App.vue，最后是路由模块，位于router文件夹下面。
接下来（line5），阻止vue在启动时输出生产提示。所谓的生产提示就是下面的内容

vue项目yarn启动 vue项目启动过程_Vue_03

后面的代码建立一个Vue对象（实例），然后挂载到index.html的app节点（.$mount('#app')），这里就和index.html中的<div id="app"></div>关联起来。
router:引用路由是router:router的简写，会执行index.js中的内容。
line 9:render: h => h(App)使用es6箭头函数对下面的代码进行了简写：

render: function (createElement) {
    return createElement(App);
}

createElement用于创建dom元素，本行代码的作用是App组件创建起来并渲染到页面。

注意：es6语法在代码结尾不要使用分号，eslint会给你报错。

2.4 index.js

路由定义文件，默认使用hash模式，路径中含有“#”，当页面url发生改变时，页面不会重新加载。

index.js中的原始内容：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

代码说明：

首先导入Vue、VueRouter、Home
line5：Vue.use(VueRouter)，Vue.use(plugin)，用于安装Vue.js插件，该方法需要在调用 new Vue() 之前被调用，而且插件将只会被安装一次。此处调用用于安装VueRouter插件。
参考：https://cn.vuejs.org/v2/api/#Vue-use
line 7~21：const，定义常量，这里定义一个路由对象数组
line 23~25：使用路由对象数组创建路由实例，供main.js引用（main.js的第8行代码）
line 17：导出router模块