vue脚手架vue-cli

1. 单页面应用程序SPA

单页面应用程序Single Page Application(SPA)是指一个web网站中只有唯一的一个HTML页面，所有的功能和交互都在这个页面中。

Vue官方提供了Vue-Cli为单页面应用SPA快速搭建繁杂的脚手架。

2. Vue-cli简介

Vue-cli是vue.js开发的标准工具，简化了基于webpack创建工程化的Vue项目。

3. Vue-cli的安装与使用

3.1 安装

Vue-cli是npm的一个全局包，使用npm install直接安装即可。

输入命令行vue -V，若出现版本号，则检验为安装成功。

3.2 使用vue-cli创建项目

• vue create 项目名
• 可以选择默认的vue2.x或者3.x设置的preset，也可以选择手动选择特性Manually select features
• 我选择了Babel可以向下兼容更低的版本和css预处理
• in dedicated config files可以将Babel的插件配置项放到独立的配置文件中

---

• assets文件夹: 存放项目中用到的静态源文件，如css样式表、图片等
• components文件夹： 程序员封装的，存放可复用的组件
• App.vue: 项目的根组件
• main.js: 项目的入口文件，整个项目的运行都会先执行main.js

3.3 项目的运行流程

在工程化的项目中，vue要做的事情很单纯：

通过main.js把App.vue渲染到index.html

所以，App.vue就是用来编写带渲染的模板结构

index.html需要预留一个el区域

main.js将App.vue渲染到index.html中预留的区域中