项目前导 八

Vue 基本使用

1 Vue介绍

VSCode 插件安装

后面开发 Vue 项目，使用 .Vue 的单文件开发，就需要一些插件来帮我们识别 .Vue 文件。插件安装在 Extension 中，点开即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。

这里我们开发 Vue 推荐的几个插件：
1.jshint：js 代码规范检查。
2.Beautify：一键美化代码的插件。
3.Vetur：.vue 文件识别插件。
4.Javascript(ES6) code snippets：ES6 语法提示。
5.Auto Rename Tag：自动重命令便签。标签都是成对出现的，开始签修改了，结束标签也会跟着修改。
6.Auto Close Tag：自动闭合标签。针对一些非标准的标签，这个插件还是很有用的。
7.vue helper：一些 Vue 代码的快捷代码。
8.vscode-icons：可选。提供了很多类型的文件夹 icon，不同类型的文件夹使用不同的 icon，会让文件查找更直观。
9.open in browser：可选。右键可以选择在默认游览器中打开当前网页。

Vue 介绍

Vue (读音/ vju：/,类似于 view）是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目的是全球 “最” 流行的前端框架。使用 vue 开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！

Vue 安装和使用

vue 的安装大体上分成三种方式，第一种是通过 script 标签引用的，第二种是通过 npm(node package manager) 来安装，第三种是通过 vue_cli 命令来安装。作为初学者，建议直接通过第一种方式来安装，把心思集中在 vue 的学习上，而不是安装上。

# 开发环境
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# 或者是指定版本号
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
# 或者是下载代码保存到本地
<script src="lib/vue.js"></script>


# 生产环境，使用压缩后的文件
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

VSCode下快速开始编写html的方法

1.新建文件（Ctrl+N）
2.新建的文件Untitled-1 是纯文本格式的，需要改为 HTML 格式。

更改后可以看到，语法模式和文件标头均改变。

3.快速生成标准的 html 代码
（1）在第一行输入 ！
（2）按tab键或者选择代码提示中的 ！

在浏览器中查看HTML页面

Visual Studio Code默认是在VScode的控制台下查看html页面，这对于我们调试和查看效果十分不方便。所以这里我们需要安装一下扩展插件，在浏览器中查看html页面。

安装完成后，选择你要在游览器打开的HTML 页面，按快捷键 Alt+B 就可以在默认游览器下打开你写的页面了。

使用快捷键 Shift+Alt+b 可以选择其他游览器打开。