vue-cli构建vue项目的步骤详解

DOM

副本，然后插到文档当中。无论何时进行任何更改，都将对

JavaScript

数据结构进行更改，并将后者与原始数据结构进行比较（

diff

算法），然后将最终更改更新为真实

DOM

。我们都知道

DOM

是非常重的，所以虚拟

DOM

是非常省性能的。

2、App.vue

通过入口文件中做的事情，我们其实已经知道

App.vue

的作用了：单页面应用的主组件。所有页面都是在

App.vue

下通过路由进行切换的。所以，我们可以理解为所有的路由（

route

）也是

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>

这里需要提一下：

node

之所以可以识别出

*·vue

格式的文件，是因为

webpack

在编译时将

*.vue

文件中的

html

、

js

、

css

都抽出来形成新的单独文件。可通过

npm run build

命令编译源代码，查看

dist

文件下的文件来验证。

App.vue

的内容分为三个部分：

<template>...</template>

、

<script>...</script>

、

<style>...</style>

，分别在这三类标签里面写入结构、脚本、样式。

我们先从

<template>

看起：里面一个

div

包裹着

img

标签和

router-view								 
 4/6   首页 上一页 2 3 4 5 6 下一页 尾页