一、什么是 Vue

Vue 是一个用于构建用户界面的渐进式框架「注意读音类似于 View，作者的初衷也是让其起 View 的功能」，Vue 只注重视图层，这点和 React 的是一模一样的，Vue的特点：

  • 简单、易用
  • 灵活
  • 高效

二、Vue 环境搭建

安装 node，使用 npm 和 yarn 首先要安装 node，可以去官网下载：https://nodejs.org/en/download/current/

下载对应版本，然后安装即可。

在Mac电脑上也可以通过 Homebrew 安装

brew install node

安装完 node 会自带 npm「node 的包管理器」,安装完成以后在命令行中输入

node -v

看到以下 node 的版本信息则表示安装成功了

:node -v
v12.13.0
使用 npm 安装 Vue

在命令行输入以下命令即完成安装

// 全局安装
npm install -g vue

如果出现报错请输入sudo或者在root身份下进行安装

sudo install -g vue

使用 vue-V 查看是否安装成功，如果显示出版本号则表示安装成功

:vue -V      // 一定要注意是大写的-V
2.9.6
使用 yarn「替代 npm 的包管理器」 安装

要使用 yarn 必须先安装 yarn , 在这里我们使用 npm 安装 yarn

// 全局安装
npm install yarn -g

配置yarn环境变量，例如我的环境变量存放于 ~/.bash_profile ，通过vim指令编辑：

vim ~/.bash_profile

进行如下配置：

# yarn
export PATH="$PATH:`yarn global bin`"
使用 cli 「命令行工具」

我们除了上面的引用或安装 vue 外，还可以使用 vue-cli「脚手架工具」
vue-cli 是一个脚手架工具「就是一个工具集合，可以快速的创建一个 vue 项目」
同样使用 npm or yarn 来安装 vue-cli，我们全局安装

npm install -g vue-cli 
// 或者使用
yarn add -g vue-cli

安装完以后，我们输入 vue -V 查看是否安装成功，或使用 vue-list 查看
看到上面内容则证明我们的 vue-cli 脚手架工具安装成功了

三、使用 vue-cli 来创建一个项目

1、新建一个目录，我这里放在git目录下
cd git
 mkdir vue-demo
 cd vue-demo
2、使用 vue-cli 创建项目
vue init webpack firstvuedemo

这里的 vue 项目是基于 webpack 的，使用上述命令我就可以创建一个名为 firstvuedemo 的 vue 项目
当我们输入上述命令以后就会开始下载模版，然后会提示输入项目名「自己写一个即可」，完了一路回车，出现 yes就直接回车「 目前先这样搞，别管为什么，但是如果看过辉哥的 react - antd pro教程就会了解，最后提示使用 npm 还是 yarn 来管理包，我选择的是 yarn 」

踩坑指南：在 Use Eslint Loader (y/n)？步骤时输入 n 再回车，否则选择了useEslint规范，从而导致不能随意Formmat排版，如果不小心选择了yes解决方案如下：

1.打开/config/index.js文件，找到：

// Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    
    // 将 true更改为false即可
    useEslint: false,

2.打开根目录的/.eslintrc.js

// add your custom rules here
    rules: {
    // allow async-await
    
    // 配置如下
    'generator-star-spacing': 'off',
    'indent': ['off', 0],
     "space-before-function-paren": 0,

    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }

当我们成功创建出了项目，如果大家使用 npm 或是 yarn 出现安装不了的情况，那么切换一下源即可「tabao 的源就非常不错」，我们根据上面的提示，进入到项目中，然后运行一下项目看看结果

3、运行项目
cd firstvuedemo
//然后运行
yarn run dev

我们就会看到使用 webpack 启动服务，然后编译，完成以后提示项目运行的地址默认是：http://localhost:8080
我们在浏览器中输入 http://localhost:8080 回车查看结果
怎么样，我们使用 vue-cli 就成功创建出一个 vue 项目，只不过他默认的主页是 Vue 的一些介绍，要搞成自己项目修改即可「后面说到 vue-cli 创建项目会说到的」，怎么样？脚手架创建项目简单吧。

四、VS Code插件配置

Vetur （ 排版.vue的格式，Mac默认快捷键 shift + command + F ）
当然可以通过 Code -> Preferences -> KeyBoard Shortcuts ，进行修改绑定快捷键。