总结1

Posted 2021-05-07 cherish937426

总结

安装环境

1 到官网下载node安装包，并安装

2 然后在安装换源

3 在安装脚手架

创建项目

1 先cd到你要创建项目的文件夹

2 执行命令 vue create 项目名称

3 初始化项目

1 进去过后，选着第二个，然后添加sorte，router，点回车

2 然后一直选第一个，有提示输入又或者n的，就选着大写的

3 在pycharm中添加项目，先找到项目文件夹，然后在设置npm然后就是添加run server

注意dote 和npm的环境一定要对

4 组件中，必须要导出 export default，小组件中是不需要写东西得，当视图组件中是不需要注册小组件的，而且还要先导入小组件文件，然后在export default中的components中注册

5 全局脚本文件main.js中就是跟组件

里面需要挂摘点，和路由和，还有返回函数render，然后就可以到app.vue中

6 生命周期

1 先是在main.js中启动项目

2 然后就是在router.vue中提供路由服务，在跟组件中必须要有router-view这个标签，所有的视图组件都会通过这个标签渲染，

3 如果请求的链接改变，就会重新匹配路由，然胡重新渲染页面

7 全局样式，我们先在静态文件夹中写一个css文件样式，然后在main.js中配置导入

import ‘@文件路径’

8 新增视图组件

1先在视图组件中template中写出自己的样式

2然后在路由中配置路由与视图组件的关系

3 最后将小组件的导入到视图组件中，完成注册就可以了

9 生命周期钩子函数，created 在组件创建完成过后执行，beforcreate 在组件创建之前执行

10 导航条，光标渲染

逻辑渲染，应为我们是给li绑定的事件，所以我们点击的是li，但是li是不会跳转页面的

实际上跳转页面的还是a标签router-link标签

我们通过点击事件然后通过this.$router.push(路径)就可以跳转这个页面

为什么不能给data中的变量赋值，应为当我们点击其他的标签是，就会重新渲染data中的值，使其再次为空

然后我们用了钩子函数create当组件渲染完毕过后在将该路径拿到，让钩子函数通过this.$route.path拿到当前访问的路径，在赋值给data中的变量，让它与template中的li中的：class=‘{active：i===‘/’}’去判断，如果有这个li就有光标了

这里的template中的逻辑就是我们让我们的文本通过router-link这个渲染的a标签来跳转

然后就是通过么一个li绑定点击事键，将路径传给事件函数，然胡就是同归data中的变量与class属性来比较