1.环境搭建

1.1.脚手架搭建

1.1.1什么是脚手架

百度搜索一下脚手架长什么样子,它们是这样的:

从百度百科抄过来一段话: 脚手架是为了保证各施工过程顺利进行而搭设的工作平台。如果明白了脚手架在现实生活中的作用,那么,再来理解编程中的脚手架就容易了,有时我们听说前端脚手架工具,其实,这里的脚手架和现实中的脚手架类似,用人话讲就是一种工具,工地上的脚手架帮助工人施工,前端中的脚手架帮助编程人员完成各种工作,例如:代码编译、打包、压缩等,各种工具组合成一套编码环境,这种自己一步一步搭建环境的重复性劳动可以交给给脚手架工具来完成,你只需要在这种脚手架工具上完成自己的业务代码就行,下面我们会介绍到等vue-cli就是集成了vue的一种脚手架工具,同理,react、angular等都有相应的脚手架工具,例如:create-react-app、angular-cli等

1.1.2.vue-cli介绍

在没有vue-cli之前,搭建一个开发环境你可能需要花几天的时间,如果你并不熟悉webpack的话,你还得再去把webpack的各种配置学习一遍,这样几天时间很快就过去了,而你还没有真正动手开始写自己的应用逻辑,为了让开发者从配置中解放出来,vue官方提供了一套vue-cli脚手架,它不仅确保了各种构建工具能够基于智能的默认配置即可平稳衔接,还提供了配置调整的灵活性。有了vue-cli之后,你就可以专注于自己项目的业务逻辑的编写了。

从官方网站这样介绍:

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:

通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service),该依赖:
    可升级;
    基于 webpack 构建,并带有合理的默认配置;
    可以通过项目内的配置文件进行配置;
    可以通过插件进行扩展。
一个丰富的官方插件集合,集成了前端生态中最好的工具。
一套完全图形化的创建和管理 Vue.js 项目的用户界面。

1.1.3.使用 vue-cli 创建项目

1.2.项目目录介绍以及相关配置

0