vue-cli创建项目

单页面应用程序(SPA)：指一个web网站中只有一个html页面，所有的功能与交互都是在这一个页面内完成的。

像这样一个页面，只有一个index.html。

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

vue-cli是npm上的一个全局包，使用npm install安装。
npm install -g @vue/cli

查看vue-cli的版本号
vue -V

创建vue项目
vue create 项目名称

PS：指定路径方便进入终端的方法 ：点击地址，输入cmd，回车即可。

键盘上下键选择是vue2、vue3还是手动要安装的功能。一般推荐自定义。

第一个版本，必选。
第二个为解决JavaScript兼容性的。
倒数第四个css 预处理器。推荐装。选中按空格即可。
倒数第三个是约束代码的编写风格的。

默认选择第一项。

将前面所有的选择作为一个模板。

先cd到项目目录

运行项目：
npm run serve

注意终端窗口不要关闭

开发那个项目就用vs code打开那个项目。在vs code里打开终端。在终端输入 npm run serve即可。

src目录的构成

assets一些静态资源，像图片、样式表放入到其中。
程序员封装的、可复用的组件放入到components里面。
main.js是项目的入口文件，整个项目的运行，需要先执行入口文件。
App.vue是根组件。

vue项目的运行流程

通过main.js把App.vue渲染到index.html的指定区域中。

main.js里面的内容

第一行是导入vue这个包，得到Vue构造函数。
第二行是导入App.vue这个根组件，将来渲染到index.html中。

下面是创建vue实例对象，把render函数指定的组件，渲染到html页面中。

后面的$mount是指定index.html文件里的div区域，其中id = app。和el挂载作用是一样的。

运行vue项目，首先在终端 npm install 安装依赖包。然后 npm run serve启动项目。