Vue-cli

1.什么是单页面应用程序（英文名：Single Page Application）简称SPA.顾名思义，指的是一个web网站中只有唯一的一个HTML页面所有的功能与交互都在这唯一的页面内完成。

2.什么是vue-cli

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

让程序员可以专注在撰写应用上，而不必花好几天去纠结webpack配置的问题

中文官网:https://cli.vue.js.org/zh/

3.安装和使用

vue-cli是npm上的一个全局包，使用npm install命令，即可方便的把他安装到自己的电脑上：

npm install vue/cli -g

在这里留下一个问题大家知道-g和-d的区别嘛？知道的可以在评论区回答

使用npm vue/cli -v命令查看安装的vue/cli版本

4.基于vue-cli快速生成工程化的Vue项目：

vue create 项目名称

运行后你会看见如下界面 

让你使用方向箭头选择一个预设，前两个选择只要你选中后敲回车就会立即开始创建项目，

最后一项则是需要手动选择要安装那个功能，建议大家都使用最后一项，他的可自主定制性更高。

选择最后一项后会弹出以下界面

让你自己选择需要安装的功能 

 第一项是选择安装Vue的版本

第二项是选择安装babel解决js的兼容性。

第三项是安装ts

第四项是选择渐进式web框架

第五项安装路由

第六项安装vuex

第七项安装CSS预处理比如less

第八项选择安装约束团队代码风格（统一团队代码风格，比如规定字符串使用单引号如果团队中有一个人使用了双引号那么他的代码就会跑不起来）

第九，十项单元测试主要用于测试功能。以上按需自己安装

我在安装时报出这样一个错误

我折腾了半天才发现这不是个错误而是一些警告，之后我遇见了这样一个问题

因为权限不够所以我开了管理员权限发现安装成功

 这里我先选择版本2，用同样的方法选择less

 

询问你是否把这些第三方插件放在一个独立的文件还是把这些文件和package.json放在一起 

 

是否保存这个预设

 

设置预设名字回车开始下包注意在这期间鼠标不要乱划否则会暂停（冻结窗口）如需解冻窗口则只需要选中窗口即可 

 出现以上界面代表项目创建成功

然后cd first-demo

npm run serve

如果需要停止vue项目则只需要Ctr+c即可

assets 文件夹 存放项目中的静态资源，例如CSS样式表，图片资源

compoents 文件夹 程序员封装的可复用的组件，都要放到components目录下

main.js项目的入口文件，整个项目的运行，要先执行main.js

App用于定义用户所能看见的ui结构项目的跟组件

Vue项目的运行流程

在工程化的项目中vue要做的事情很单纯，通过vue.js把App.vue渲染到index.html的指定区域中