Vue~脚手架

1，什么是脚手架

脚手架：是一种快捷构建的工具，是Vue技术生态链中的一部分

Vue CLI 是一个基于 Vue.js 框架，执行快捷项目构建的工具插件，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
  • 解释：开发人员可以在创建项目时，按照我们的需要进行技术选择
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 解释：使用脚手架搭建的项目，可以选择配置统一存储，实现零配置文件开发
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 解释：脚手架一直在实时更新，保障使用的技术紧跟市场需求
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
  • 解释：脚手架除了命令行构建项目(必须掌握)之外，同时提供了界面化创建项目模式

2，安装脚手架

官方目前提供了两种脚手架模块

（1），vue-cli：适用于vue1.x、vue2.x项目构建

（2），@vue/cli 4.x：适用于vue2.x、vue3.x项目构建

（3），@vue/cli 5.x：更加侧重于vue3.x项目构建

检查脚手架版本

$ npm view @vue/cli versions

安装指定版本的脚手架：

$ npm install @vue/cli@4 -g

3，创建项目

通过图形化界面创建项目

打开命令行窗口，执行命令启动vue图形化界面

$ vue ui

通过命令行，创建基于webpack低版本的项目

打开命令行，执行命令创建项目，主要用于创建vue2.x版本的项目

$ vue init webpack 项目名称

通过命令创建vue2/3版本项目

打开命令行，执行命令创建项目

$ vue create 项目名称

sfc 单文件组件

Vue项目中，创建的组件（全局组件、局部组件）默认形式下通过template选项指定的一堆字符串，实际开发中并不友好，没有开发人员会在一个字符串里面编写一个完善的网页

Vue项目提供了一种特殊的组件声明方式：SFC(Singleton File Component)单页面组件，描述了一种以.vue结尾的文件，每个文件就是一个独立的组件的形式

spa单页面应用

SPA(Singleton Page Application)：单页面应用程序

是前端应用框架开发的一种特殊的项目，整个项目只包含唯一的一个html网页作为视图；项目运行过程中页面的切换都是在该网页内部进行切换，最大程序的保障了页面数据的复用性，提高了页面加载的效率

4，启动和访问

启动项目

$ npm run serve

访问项目：

http://localhost:8080