vue是一个javascript框架。具有声明式渲染和响应性的特点，html模版能够直接理解javascript，两者已经融为一体，大大简化前端开发成本。
在大多数启用了构建工具的 Vue 项目中，我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 (也被称为 *.vue 文件，英文 Single-File Components，缩写为 SFC)。单文件组件是 Vue 的标志性功能。如果你的用例需要进行构建，我们推荐用它来编写 Vue 组件。
vue路由
基础概念语法
1、vue create vue-test
2、npm run serve
启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。命令行参数 [entry] 将被指定为唯一入口 (默认值：src/main.js，TypeScript 项目则为 src/main.ts)
3、npm run build
热加载不生效的解决
还有一种情况就是使用了虚拟服务，此时需要用代理访问到虚拟机，使得ws通信成功即可
Vue是基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任
Vue 的两个核心功能：
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
怎么使用vue（环境安装、构建、部署）
1、直接通过cdn引入vue，使用全局构建的版本
通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。
上面的链接使用了全局构建版本的 Vue，该版本的所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上，可以这样引用组件
2、使用ES模块构建的版本
我们可以使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue
由于安全原因，ES 模块只能通过 http:// 协议工作，也即是浏览器在打开网页时使用的协议。为了使 ES 模块在我们的本地机器上工作，我们需要使用本地的 HTTP 服务器，通过 http:// 协议来提供 index.html
到目前为止示例中使用的都是 Vue 的开发构建版本——如果你打算在生产中通过 CDN 使用 Vue，请务必查看以下生产部署指南。
总体看起来有点像我们以前使用jQuery这些js库的使用方式。
3、生产部署
生产环境使用的代码库一般体积会更小，删除了一些开发调试的代码。
如果你没有使用任何构建工具，而是从 CDN 或其他源来加载 Vue，请确保在部署时使用的是生产环境版本(以 .prod.js 结尾的构建文件)。生产环境版本会被最小化，并移除了所有仅用于开发环境的代码分支。
如果需要使用全局变量版本(通过 Vue 全局变量访问)：请使用 vue.global.prod.js。
如果需要 ESM 版本(通过原生 ESM 导入访问)：请使用 vue.esm-browser.prod.js。
4、使用构建工具部署生产环境_webpack_vue cli
webpack是前端资源打包构建的一个通用工具。
vue cli: cli.vuejs.org/zh/guide/
- 安装 vue cli，安装好之后就可以在终端使用vue命令了
2）使用vue cli命令快速创建vue应用
出现这个就表示安装成功了
vue --version
@vue/cli 5.0.9
通过 vue create 创建的项目无需额外的配置就已经可以跑起来了。插件的设计也是可以相互共存的，所以绝大多数情况下，你只需要在交互式命令提示中选取需要的功能即可。
vue CLI 使用了一套基于插件的架构。 如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。
如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令。
vue add 的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然需要选用包管理器。
3）CLI服务
在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service访问这个命令
vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。
你可以使用 vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config。
cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中——如果你遇到了编译方面的问题，记得先删掉缓存目录之后再试试看。
4）html和静态资源
需要配合始终开启的 CORS 进行加载。这意味着你的服务器必须返回诸如 Access-Control-Allow-Origin: * 的有效的 CORS 头。如果你想要通过认证来获取脚本，可使将 crossorigin 选项设置为 use-credentials。
public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。
默认情况下，一个 Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示。
默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态import()按需 code splitting 的产物) 自动生成 prefetch 提示。
不是每个应用都需要是一个单页应用。Vue CLI 支持使用 vue.config.js中的pages选项构建一个多页面的应用。构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能。
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。 如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀
5）webpack相关配置&功能
因为 @vue/cli-service 对 webpack 配置进行了抽象，所以理解配置中包含的东西会比较困难，尤其是当你打算自行对其调整的时候。
vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：
development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：
当运行 vue-cli-service 命令时，所有的环境变量都从对应的 环境文件 中载入。如果文件内部不包含 NODE_ENV 环境变量， 它的值将取决于模式，例如，在 production 模式下被设置为 "production"
你可以在你的项目根目录中放置下列文件来指定环境变量：
环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。
一个环境文件只包含环境变量的“键=值”对：
请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。在构建过程中，process.env.VUE_APP_SECRET 将会被相应的值所取代。在 VUE_APP_SECRET=secret 的情况下，它会被替换为 "secret"
应用的代码中可以这样访问它们：
被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。
环境文件加载优先级
为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。
.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。
6）构建
当你运行 vue-cli-service build 时，你可以通过 --target 选项指定不同的构建目标。它允许你将相同的源代码根据不同的用例生成不同的构建。
7）部署
如果你用 Vue CLI 处理静态资源并和后端框架一起作为部署的一部分，那么你需要的仅仅是确保 Vue CLI 生成的构建文件在正确的位置，并遵循后端框架的发布方式即可。
如果你独立于后端部署前端应用——也就是说后端暴露一个前端可访问的 API，然后前端实际上是纯静态应用。那么你可以将 dist 目录里构建的内容部署到任何静态文件服务器中，但要确保正确的 publicPath。
《个人介绍》
大家还可以在以下平台关注我，查看更多作者的历史文章。
欢迎关注
