vue 的安装简单说明

vue 的安装非常简单，分为两种：脚手架和本地引用。

本地引用

就是从官网下载 vue.js 文件，使用 script 标签引入，一般来说，除了自己学习，做 demo 的时候快速的呈现效果，会这样用，实际工作开发中，没人这么做。
但是，我们还是要说一下本地引用，因为在咱们学习官网教程的时候，举例子：在初始 vue 实例的时候，data 有时候是一个对象，有时候是一个函数。这就是两种使用方式。

// 本地引用方式
new Vue({
  data: {},
});
// 脚手架方式
export default {
  data() {
    return {};
  },
};

所以你自学的时候，需要认真看清楚是哪一个使用方式里的，如果报错，就换一下写法。

脚手架

说明

什么是脚手架，它是基于 nodejs 运行，使用 webpack 打包工具开发的一个集成化开发环境。 简单来说，脚手架是官方出的一个帮助程序员快速开发的工具，它的功能有：
热更新，即我们写好代码，页面自动呈现效果；
编译 es6 转成浏览器可执行的 es5 代码；
给 css 加兼容前缀；
代码校验，强制养成我们写规范代码的习惯等等
vue2 代和 vue3 代脚手架，这里指的是脚手架不是 vue 版本，目前 vue【2020 年 3 月 29 日】还是 2.9 版本，但是 vue-cli 脚手架已经 3.0 了，那么区别直观的就是启动命令有所变化
这里就记录一下最新版的脚手架命令：
npm run serve // 启动开发环境
npm run build // 执行打包动作
那么这命令在哪儿看？找到你 vue 项目目录中的 package.json 文件，里面有一个 scripts 对象，这里就是它所有的命令了。

准备工作

1. 需要安装 nodejs,版本为最新稳定版即可
2. 这里咱们用脚手架 3，安装命令：npm i -g @vue/cli

脚手架的使用

脚手架 3.0 创建项目有 2 种方式：
第一种是用 ui 的方式创建：vue ui 【它会自动打开浏览器，让我们在可视化界面里创建】
第二种是 cmd 中用命令：vue create 项目名称
注意：如果你电脑上已经安装了 vue-cli2 版本需要先卸载
vue-cli2 的命令创建：vue init webpack my-project

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

一般安装的时候会有一些让你选择的配置项，根据自己的需求选择就好了。 目前 3.0 脚手架给出了中文的提示还是非常友好的，前两个选项都是官网设定好的，第三个是手动选择，如果选了手动选择，会出现很多个选项，这里记录一下，如何多选和取消选择：
空格是选中和取消，a 键是全选，i 键是反选。回车进入下一步
附上两张图：

扩展-快速原型使用

在整理的时候发现官网上有这个，简单记录一下： 我们可以直接写一个 app.vue 文件，然后使用 vue serve app.vue 去启动它，前提是我们需要全局安装一下依赖： npm i -g @vue/cli-service-global
这样我们就可以用 vue serve app.vue 去启动我们的单文件了，省去了用脚手架搭建。

官网地址open in new window