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：

 

 更换内容

 

 注意一个{{}}只能跟一个属性

 

 注意模板标签内只能有一个顶层元素

{{}}里面可以做一些简单的计算的：