搭建工程做项目之前要先搭建工程。如果不搭建工程，在运行环境的时候会有很多兼容性问题。搭建比较麻烦，要安装很多插件，写很

为什么要搭建工程

做项目之前要先搭建工程。如果不搭建工程，在运行环境的时候会有很多兼容性问题。

所以，如果开发阶段的东西跟运行阶段的东西有差异用什么解决？ 构建工具

为什么不用webpack？搭建比较麻烦，要安装很多插件，写很多配置。

于是，vue官方做了一个脚手架工具，用一个命令就可以非常轻松的把工程搭起来，这个脚手架工具就是Vue-cli

是一个脚手架工具，用于搭建vue工程

它内部使用了webpack，并预置了很多插件（plugin）和加载器（loader），以达到开箱即用的效果，不用自己去手写配置，根据需要进行选择。

除了基本的插件和加载器外，vue-cli还预置了：

搭建好之后会在目录下新建一个文件夹，文件夹下面生成一些工程结构，并且安装好依赖。搭建好之后直接运行，一边写代码一边看效果。由构建工具打包。

目录结构：

这个工程是典型的webpack的结构

public 里面是页面模版，生成的js会注入到模版里面去
node_modules
src
1. main.js 入口文件，只负责启动vue这一件事，启动vue是为了渲染一个组件，同时，这个组件要渲染出所有的东西
在vue-cli里，组件表现形式是一个单独的文件，也就是一个模块，后缀名为 .vue

import Vue from 'vue' 导入vue，现在是第三方库是放入node_modules里面的，最终打包的时候会生成打包结果
package.json
1. npm run build 打包命令，打包到dist目录
  
  dist下的index.html是根据public目录生成的，public里的东西会原封不动的放到dist目录；
  
  dist里的js包含vue js和自己写的js；
  
  把dist文件拿出来，运行打包文件
2. 如果每一次写代码都要打包运行太麻烦了，所以，我们在开发阶段会搭建一个开发服务器。 npm run serve 搭建开发服务器命令，默认 8080 端口

单文件组件，Single File Component，即一个文件就包含了一个组件所需的所有代码

<template>
    <!-- 组件模版代码 -->
</template>

<script>
export default {
    // 组件配置
}
</script>

<style lang="less">
    // 组件样式
}
</style>

直接运行render函数比通过template编译成render函数效率要高，减少运行时间（因为减少了编译时间），但是把模版写成render函数不好写，但是在vue-cli里就解决了这个问题

那么，是如何解决的？

我们的开发顺序：源代码->打包->运行（依托在开发服务器上）