Vue基础（一）：开发环境搭建（window）

1. 什么是Vue?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. 环境搭建

官方采用了两种种种方式引入Vue，如下：

2.1 <script>标签引入方式

进入Vue官网安装步骤，如下：

<script src="YourPath/vue.js"></script>

2.2 使用Vue-CLI脚手架安装

第一种方式的引入通常并不能满足我们更多的开发需求，我们可能还需要其他插件，就要去重新下载然后引入，为了开发简单快速，官方提供了另一种方式：命令行工具 (CLI)

2.2.1 介绍

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

2.2.2 安装

1. 通过CLI方式安装首先要安装Node.js环境：
   NodeJS官网下载nodejs安装包

2. 安装完成后打开cmd命令行工具，依次输入：

   node -v
   

   npm -v
   

   显示如下结果则安装成功
   

3. 使用npm命令安装vue

   # 最新稳定版本
   $ npm install vue
   

4. 安装vue-cli脚手架
   版本问题：

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

   使用npm命令安装最新vue-cli

   npm install -g @vue/cli
   

   安装完成后在命令行工具中查看vue版本，出现版本号安装成功

   vue --version
   

2.3 创建项目

1. 在任意磁盘路径，通过shift+鼠标右键组合键，打开右键菜单，选择在此处打开命令窗口
   
2. 在命令行窗口中输入如下命令开始创建文件：

   vue create hello-world   //vue create表示创建项目，hello-world表示项目名称
   

   
   如果选择默认安装，则一路yes回车即可，若采用自定义安装，如下
   
   剩下的步骤根据自己的选择配置，这里不过多演示，最后安装可能需要一些时间，可稍作等待。
   
   cd到项目文件路径：

   cd hello-world
   

   使用如下命令运行项目

   npm run serve
   

   运行成功：
   
   在浏览器中输入：http://localhost:8080打开项目：