目录:
(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:
更换内容
注意一个{{}}只能跟一个属性
注意模板标签内只能有一个顶层元素
{{}}里面可以做一些简单的计算的: