脚手架

vue复习笔记

## 90 Vuecli脚手架的介绍和安装

脚手架最重要生成的东西还是webpack配置


脚手架依赖2个东西 一个是node 一个是webpack

91 Vuecli2初始化项目过程

92 Vuecli CLI2目录结构解析

92 安装CLI错误和ESLint的规范

安装脚手架遇到的问题 如下
以管理员身份安装如下那个文件就可以重新安装

创建了ESLint不使用的情况下 关掉它的办法
改为false就可以了

95 runtimecompiler和runtimeonly的区别

他们的区别只在main.js里面

96 掌握VUECLi创建项目和目录结构

现在发布的3是脚手架三 只是工具的三

把testcli3创建起来后npm run serve


启动一个本地服务器 在哪个文件夹下启动都可以

97 VueCli配置文件的查看和修改

gui即用户界面

可以手动改路径
管理下面这个项目

因为没有配置 所以通过用户图形化界面来管理这个东西

一旦写箭头就意味着是模糊的版本不是真实的版本
下面那个id才是真实的版本
要想知道真实的版本 要么看

要么看它打包出来的东西 不要看源码 源码最终也是要打包的
69+9
dev那个里面的版本是没有参考价值的

98 箭头函数的使用和this指向

有一个参数的时候小括号可以省略掉

上面的这个this打印出来是window

99 什么是路由和其中的映射关系

100 前端渲染 后端渲染 前端路由 后端路由

一个路由对应一个组件 这就是前端路由

101 url的hash和html的History

url没有改 后面多了个aaa


push和back相当于入栈和出战

102 vue-router安装和配置方式

删掉 重新创建以方便看懂
把ROUTER文件夹也删掉 重新创建

103 路由映射配置和呈现出来

1创建路由组件

有了这两个东西 要和路径进行映射
一个路径出现时显示Home组件 另一个路径出现时显示about组件
映射关系在如下配置 一个对象就是一个映射关系
一个映射关系对应一个对象

2配置映射关系

3 使用路由 通过rouyer-link和router-view 绝对哪一个路径在什么时候显示的

这2个vouter-link是vue-router里面已经注册过的全局组件 所以这两个组件可以在任意位置用
vouter-link最终会被渲染成a标签

因为下面这个APP里面的 东西 必然会被render出来
render会替换它

render就是下面这个东西 所以就相当于把下面那坨东西替换到el
那坨东西里面有2个按钮所以那2个按钮显示出来了

至于渲染到标签上边还是下边 渲染到左边还是右边
还需要一个router-view决定之后渲染出来的home组件或者about组件在哪个位置
就相当于一个占位 把某个组件渲染出来之后它就会替代vouter-view

注意要点一下首页或者关于它才出来

104 路由的默认值和修改为history模式

ba


的上下左右都可以有其它东西

进去的时候还得用户点击一下才能显示首页不太好 应该是默认首页 用户想切换的时候就直接切换

如下 把新建的路径写在第一个 进去就是首页
但是问题在于路径并不是显示的首页 所以给它重定向

在又觉得上面这个hash值不好看 用html的history

105 oruter-link的其它属性补充

希望vouter渲染出来的不仅仅是a标签还有其它标签

可以来回返回 说明源码里面用的pushState

replace就不可以返回

不希望它来回
必须点首页才能返回到首页则用replace
直接加一个replace就可以了

把样式复制过去给按钮设置样式 然后点击时就会变红

如果决定名字太长希望直接active{
}
假如有很多个vouter 想统一修改的话 就在路由里面修改
路由相关的配置都在index.js里面

 linkActiveClass:'active'

106 通过代码跳转路由

如果不想用vouter-link

监听东西的时候上面这个路径并没有反应
希望点击按钮的时候上面的路径也改变的话 不要用history.pushState之类的这样子会绕过vue-router 最终一定是通过vue-router里面的东西来修改
$router这个属性来自于vue-router源码里面 它给所有组件里面都加了一个router属性

如上，这样子点击的时候 路径就不会跳转了

107 vue-router动态路由的使用

之前做的这种比较特殊的东西还是放在最前面比较好

先导入user文件

然后得设置在什么时候显示那个东西 router-link

还未达到需求 登录用户是张三 希望路径后面跟一个张三之类的
在vouter-link跳转的时候给它拼接上一些东西就可以了


上面这个东西它应该是动态获取d


改下面这个list list是啥 路径的后缀就是啥

有希望获取到路径后面的id
并且在如下区域做一个展示
直接用mustache 并且里面有一个属性$route

一共有三个路由

const routes = [

  {
    //协议头：//host/query
    path:'/home',
    component:Home

  },
{
  path:'/about',
  component:About
},

  {
    path: '/user/:userID',
    component:User
  }

下面这个 return this.$route指的是上面这三个 谁处于活跃状态那么拿到的就是谁 当然那个默认路由一般情况下是不去拿它的

下面这个userId

和下面的这个userId对应
如果下面 那里变成abc

那么这里也变成abc就可以拿到


注意：computed要小写 不然还是弄不出来



而router是
这个整个大的路由对象

108 vue-router打包文件的解析

npm run build重新打包之后

先关掉丑化

重新打包 npm run build

109路由懒加载的使用

通过路由懒加载的方式导入路由

重新打包之前只有这三个文件

重新打开之后 多了三个文件 因为三个组件用了懒加载

一个懒加载会对应一个js文件

109路由懒加载的使用

110 vue-router路由的嵌套使用

为了有对应的子组件 先创建子组件

希望这俩都在首页里面展示

之前是在上面配置映射关系 但是现在不能 不然就是属于并集关系
但它们是包含在里面的 并不是同一层级关系

子组件的话 在path中不需要加/ 它到时候会自动添加 直接写就ok

没有组件 那么也对它进行懒加载
如下配置映射关系

然后要告诉子路由到时候显示在啥位置
子路由最终肯定是显示在首页上面的 所以要在首页里面设置router-view

111 vue-router参数传递1

给它传递些 年龄 名字之类的参数
那么to后面对应的不能是字符串 只能是一个大括号 要想大括号生效 必须前面加上v-bind

  
<router-link v-bind:to="{ }">档案</router-link>

语法写成对象的方式 依然有效果

想传递更多数据就是在query里面传入

这样子写 路径就有变化
url后面这个东西其实名字就叫做query

路径里面有了query还不行 还要把它取出来

如果想取单独信息的话

112 vue-router参数传递2

如果传数据的时候不是通过vouter-link bind to
而是通过button 点击哪个就传递哪个 同时 传递过去一些数据


先不传递数据 只是通过代码跳转的写法

如上点击用户那里就传过来了

效果如下 我的失败了

问题在于
有大量数据要传的时候一般用query方式

113 vue-router和route的y由来