一、目录
（1）Vue是什么
（2）Vue.js的官网部分介绍
（3）简单的实操Vue
(4)安装Vue开发版本
（5）Vue脚手架项目环境配置
（6）微点vue cli 脚手架
（1）
vue.js是用于构建用户界面的 JavaScript 框架（前端框架技术）
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
（2）
vue.js官网：https://v2.cn.vuejs.org/ 点击该连接就可以直接到VUE的官网去啦，不用再辛苦的在茫茫的信息海中筛选出正确的的官网信息。
它长这个样子的
旁边有许多选择是非常不错的参考模式（它写好了模样，所以我们在套用的时候留关键词，改自定义的词，那么你就可以实现你所选择的功能了。），当你随机点击一个是会出现相对内容的代码可以参考。
例如:列表渲染（左边是可选择的类型，右边是对应的内容代码。自定义的词如果不一致是需要改动的。）它代码前面还是会有解释，致力于每个人都能看懂了解，懂了关键词了，那么下面的就是把关键词合起来形成代码实现想要功能。
（3）
我们来稍微的实行一下吧^^
（1）引用Vue.js是用<script>标签，它是在头部文件<head>里的位置引用。
（2）如图所示：在创建根节点时的<div id="app">和el:"#app", 相对应的。id——>#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 第一步：引用vue.js -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第二步：创建根节点 -->
<div id = "app"></div>
<script>
// 第三步：初始化vue实例，绑定根节点
var app = new Vue ({
el:"#app",
data:{
msg:"第一个vue实例",
}
})
</script>
</body>
</html>
（4）
欸，我们好像还没搞vue.js文件嘞，那怎么搞嘞？
看过来，看过来——>欸，我们前面不讲有VUE的官网地址的（ https://v2.cn.vuejs.org/ ）（这个链接默认是v2的，如果要v3需要自己调转一下哈。）——>看下面
注意事项：
点击链接后——>再点击学习出现一个框框——>再点击教程就可以出现下面的页面啦。到这里我们就成功了一半，哈哈（叉腰）。
如图点击安装，便会出现以下页面：（我截的是最开始的，下面给还有许多关于安装的这件事，可以去看一看，然后根据自己想要的而安装。）
在<script>标签里引用vue.js的两种方法：
1 引用vue.js可以直接复制连接 是在网页搜素栏里面的链接，但它有一个不算弊端的弊端——>那就是它必须是联网的状态下才能使用。
2 点击安装——>找到下面的开发版本——>安装。我们学习的时候是选择开发版本的，因为它是包含完整的警告和调试模式，那么就意味着，当我们出差时它会自动的显现出来而不需要一行一行的检查究竟哪里出了问题。
生产版本时删除了警告的，那么就不那么容易找出问题，在这里所有的代码都是白色的，很不好找出问题，所以生产版本一般就是在发行时用的。所以我们应该选择开发版本来学习。
这也是下滑安装页面就有的，如果你们有想对VUE更了解一些的可以看一下——对不同构建版本的解释。如果不想了解的话可以直接不理会这个。
我们用<script>标签来引用（如我们用来简单的实操那个一样）
好啦，我们第一个简单的实操的具体内容，该怎么引用vue.js，id=" app"与el的联系（id对应的的时#号喔，不能与class……搞混了，不然就会报错误的。）就介绍到这，是不是很简单呀，快上手试试吧^^
（5）
那么接下来介绍一下Vue脚手架项目环境配置^^,这个也是比较重要的。
(1)下载安装node：官网下载地址：下 载 | Node.js 中文网 (nodejs.cn)
在这里你可以选规则适合你的node 来进行下载。
Ps(提示）:
检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。
你下的版本不同那个v16.14.2那个将会有所不同
（2）下载安装VScode代码编辑工具
官方下载地址：Visual Studio Code - Code Editing. Redefined
3、vue2项目调试插件，下载vue.js_devtools，本课程使用此插件
下载，解压，把.crx结尾的文件拖入浏览器的扩展程序中即可。
这个你们自己找一下吧（哭笑不得）vue.js_devtools它是个调试插件，很显然的是检查时更容易观察。
（6）
它其实还有个vue cli 脚手架的安装，这个时直接开启项目了，这个时重要的，但我就不弄这个安装步骤了，我可以直接给你们看结果：
1、项目创建成功之后，可以看到项目的目录结构如图所示
目录结构说明如下：
ps(提示)：
如何你不想让系统决定项目的路径的话，那么你需要建一个文件夹——>进到文件夹里面
在被绿色框住的路径的新建文件夹的右边不远处的空白的地方点一下就会变成
输入cmd回车，你就可以跳转到建立项目的界面了，如图所示
vue 和create是不可以写错的，不然项目就可能建不起来。
注意空格。
OK我的介绍完成啦^^
好啦，关于Vue的脚手架项目配置就到此结束吧。
谢谢各位们的观看^^
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
