Vue-CLI单文件系统

SPA：单一页面应用程序，只有一个完整的页面；加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容（组件）。
SPA的核心之一：更新视图而不重新请求页面。

一、介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
通过 @vue/cli搭建交互式的项目脚手架。

好处：

• 完整语法高亮显示
• CommonJS 模块（本质上一个文件就是一个module，当我们require一个文件的时候，真正对应去找的是module.export）
• 组件作用域的 CSS（可以在模块中写css样式）
  生成格式：

<template>
<!-- 组件模板-->
 
</template>

<script>
export default {
//暴露对象
}
</script>

<style>
<!--css样式-->
</style>

二、安装

npm install -g @vue/cli 全局安装使用
OR/或者
yarn global add @vue/cli局部安装使用

三、创建

1、命令行创建

• vue create --help查看帮助信息

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

语法：vue create 项目名
例如：vue create hello-world
会出现一些选项选择，选择完成后就创建成功
2、可视化界面创建
语法：vue ui

根据选项创建即可
选择创建的时候不选中 - Linter，如果选中的话格式化代码会改变（出错）

3、效果

4、运行
路径切换到执行的文件
语句：npm run serve