Vue2-黑马（一）
目录：
（1）vue2-环境准备-创建-代理
（2）vue2-项目结构
（3）vue2-基础-入门案例
（4）vue2-基础-文本插值
（1）vue2-环境准备-创建-代理
无论我们做vue2还是vue3都要安装一个脚手架vue/cli
-g 是全局安装
全局安装是它会在Nodejs目录下生成一个vue的脚本，然后帮助我们创建vue项目
这个nodejs目录已经加入环境目录下，因此你可以在任何目录下 找到vue脚本，创建项目
创建项目：可以加一个ui：是以图形界面的形式创建vue项目
他就打开了一个浏览器：
点击右下角可以切换中文：点击创建项目
先选择手动创建项目：不使用默认预设
加一些插件功能，类似Maven的依赖：他默认勾选不管，另外加两个：Router（组件之间的跳转）、Vuex（组件之间的数据共享）这两个组件基本是比用的
选择一个版本和检查错误极点：点击创建项目
选择创建项目，不创建预设
他就会在后台下载依赖的库
上面建议安装vue的开发者工具：来编写vue代码： 调试vue代码，查看vue组件
网址：其实它是浏览器的插件：选择对应的浏览器安装
我选择第三个：
点击获取：点击添加扩展
出现了小图标：添加成功了：将来打开vue的项目，他就会把小图标显示出来了，这就是开发者工具的
进入下载的这个目录：启动vue项目：启动vue服务器
服务启动成功：他就是启动了一个前端服务器：
点击就进入了vue的项目首页：
修改端口
这个端口号他用的8080端口，跟后端用的端口是一样的，所以我们需要改一下vue的端口
可以参考这个网址：
用vsCode打开项目：
添加上面的代码： 修改vue.config.js
重新启动：
启动的端口就变成7070啦
重新访问：
配置代理：
下面还可以配置一下代理：proxy中的最后那个
在vue.config.js添加代理的代码：
要让他生效重启服务器：
测试以下我们访问7070的后端端口
（2）vue2-项目结构
src：是源代码目录：
assets：存放静态资源
component：存放vue的可重用组件
router：做路由，store：做数据共享
views：vue的视图组件，比如：有的视图是管理学生的增伤改查
App.vue：是其他组件的最顶层组件，是根组件
mian.js：是vue项目的路口
我们使用向导创建的项目，是自带了gti功能的，源代码的版本控制，每个文件都是绿色的，左后一个修改了还没有提交
如果不想要git功能，可以把git提示去掉，需要在目录的文件夹中git的隐藏文件夹删掉
再次打开项目：没有有颜色提示啦
（3）vue2-基础-入门案例
App.vue：是顶层组件，页面首次运行的显示部分，先在这里写 ，全部删除
h1中要展示的数据，是写死啦，我们将来是让js代码动态获取数据，一般是从后端获取数据，提供给模板来显示，那么我们需要学习如何将JavaScript数据在页面中显示出来
需要定义一个option对象，还需要导出：在里面定义数据：
data：数据 methods：方法
这是模板从javaScript中提取数据的做法，也可以理解成javaScript一个对象的数据跟模板中的内容进行了绑定， 绑定之后就会把对应的实际数据值在模板中显示啦
（4）vue2-基础-文本插值
是谁在使用App.vue呢？是main.js
导入可以理解，把代码拿过来啦：msg还需要进一步解析需要使用h函数
h：是对模板进行解析，解析之后呢生成虚拟节点，虚拟节点可以也理解为html的元素，只是还没有跟页面结合到一起中去，还没有显示出来，需要使用mount
需要使用mount进行在页面显示#app是id选择器，有一个原始页面
index.html：有一个id为#app：就最终把h1标签最终的结果，放到#app的里面
创建新的组件页面：Example1View.vue：
更换内容
注意一个{{}}只能跟一个属性
注意模板标签内只能有一个顶层元素
{{}}里面可以做一些简单的计算的：
