Vue 中文社区

1126

1. vue 相关的高级的 TypeScript
2. 提到了一个是设计产品的网站 蓝湖
3. 然后登陆了 vue 中文社区和 github 关联了。已经解决了
4. 复习 git 的使用命令 cd vue create xxx 还要选是否暴露在外面的一个配置，不选暴露就行，如果用 PowerShell 的话可以在其他地方按住 Shift + 右键打开。
5. box-sizing:border-box 变成怪异模型，不加就是标准模型：border padding 都不在盒子内容里面，但是怪异模型的就包括了
6. 组件样式私有化 scoped,给当前组件的所有标签加一条属性，但是有一点就是给组件下的那个标签写就有用，但是给组件标签里面写的样式就没有用，因为里面的标签没有加上，属性选择只给最外层的那个加了，里面的没有加
7. 感觉应用事件最多的就是监听器 watch

stylus 配置

1. 文件>首选项>设置 —> 搜索 stylus 找到 vetur 点击配置，选择 none。
2. 或者 右键 使用格式化文档 选择 默认 Vetur(默认)

code 安装了 Git bash

1. 文件>首选项>设置 —> 搜索 “terminal.integrated.shell.windows”:
2. 打开 setting.json 输入 “terminal.integrated.shell.windows”: “C:\Program Files\Git\bin\bash.exe”
3. 以上的是通常地址 我的地址"E:\第嘉\安装软件\Git\bin\bash.exe"

code 中自定义 vue 默认模板

文件>首选项>用户判断>搜索 vue.json 修改
"prefix": "vue", 是快捷键 $TM_FILENAME_BASE 获取文件的名称。

{
	"Print to my comstom vue console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div>",
			"    $0",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"name:'$TM_FILENAME_BASE',"
			"};",
			"</script>",
			"",
			"<style",
			"",
			"</style>",
			""
		],
		"description": "Log output to console"
	}
}

Container 布局组件

考虑到每一个页面都要写同样的宽高大小，所以我们就引出了一个公共的布局组件 Container.vue
以及写好了一个公共的布局组件了，但是还会有不同的页面是只需要内容不需要头部的那面就要使用

• 做一个公共的组件 Container.vue 用命名插槽 <slot name="head"></slot> 接收就行。
• 插槽 <temaplate #head> <slot name="head">

<!-- 父级 -->
<template #head>
  <span>任何代码内容</span>
</template>
<!-- 子级 -->
<!-- <div class="container-header"> -->
<template>
  <!-- 布局的容器组件 -->
  <div class="container">
    <!-- <div v-if="$slots.head" class="container-header"> -->
    <div class="container-header">
      <slot name="head"></slot>
    </div>
    <div class="container-cantent">
      <slot name="ma"></slot>
    </div>
    <div class="container-footer">
      <slot name="foo"></slot>
    </div>
  </div>
</template>

<style lang="stylus">
  .container
    width 660px
    border-radius 5px
    border 1px solid #ccc
    margin 30px auto
    .container-header
      background-color #ccc
      padding:10px
    .container-cantent
      background-color #eee
      padding 20px
    .container-footer
      background-color #fff
      padding 20px
</style>

安装环境

第一先安装 node 环境，还有 git 输命令的工具 安装脚手架 vue-cli，安装了 node 的之后有 install 包，这个就是装包方案
npm install -g 全局安装脚手架工具，在我的电脑的任何地方都可以安装脚手架工具 Vue-cli 但是要安装哪一个呢 vue@/cli

1. 安装 node gitbash 脚手架工具 vue-cli
2. 卸载 uninstall
3. npm install -g @vue/cli
4. 安装镜像下载东西会很快 npm config set registry https://registry.npm.taobao.org

1126 vue-shequ

axios stylus Flex router element-ui scoped 公共布局组件 插槽 github 部署 v-if+v-for 事件修饰符.native

触发辅助函 监听事件 watch location 和 $route 和 $parent 和 $children 以及实例 property 的相关方法

• 把它看作大家的第一个 vue 项目。
  结合 vue 社区提供的一个 API 接口做一个和他一模一样的网站
  不做:注册，搜索可以登录，展示文章，展示商品，可以评论，可以点赞
  只做:登录 展示，分页，登录后评论

1. 登录流程 发布流程 浏览文档流程 点击头像到信息页 退出
2. 布局的容器组件
3. 我们根据接口应该能做的就是直接进入首页，登录就是输入一个码，如果成功了就展示你的小头像，不成功就不显示。
4. 进入文章业可以点赞和回复，但是也要分为两种，要看是否登录。
   思路：
   一上来不能随便写，要想先干什么
   是不是一上来你看到什么就要些什么呀，上来是不是看到了首页呀，不是一上来 就写个人中心页。基本不管些什么东西都是先写首页。看首页哪些东西是路由哪些不是路由
   上来没有登录，但是有登陆接口，先写页面接着就有思路了。
   如果你一进去就看见登录就开始做登录，当然这是管理系统的，不是门户类网站的。看到小功能了就安装一些小插件，还有发请求 axios , element-ui

• 步骤：
  这是第一阶段

5. 先做 axios 封装，做相关的一些配置
6. 写一个公共的样式在 main.js 中导入全局引用。
7. 然后写 首页 Header 页以及 Home 页，在 Home 页中插入公共布局组件 Container.vue 设置公共样式和 具名插槽 <template #xx> + <slot name="xx">
   第二阶段
8. 在 created 和 mounted 这两个发请求触发我们的 axios 都差不多，这两个都是同步的生命钩子，created 执行完了， mounted 就执行。axios 发请求都是异步的，请求的结果肯定在这两个人之后执行，但是通常习惯用 created 发请求。他们两者又有什么区别呢？
9. 一般 v-for 要搭配 v-if 去使用展示列表数据。
10. get 请求如何接收参数: 1. get(‘topics?page=1&limit=20’) 2. get(’/topics’,{params:{page:2,tab:‘sak’}})
11. 接下来写好地址栏信息了，就要写点击事件
12. 谁改变我要拿到谁改变的那个值，那么监听事件是最好的解决方案。watch 需要注意的地方就是 监听谁，方法叫什么 前后改变的值 是都一上来就执行当前获取到的

获取地址栏信息判断展示相对应的信息

刚进来就要判断地址栏是哪个网页的信息，怎么去获取呢，有两种方法。

1. location.search location.hash
2. this.$route.query ,但是拿到了之后要干什么呢。

axios 发请求代理服务器

1. org 的请求总超时，.com 涉及到跨域，所以了代理。本地代理是给 vue-cli 做的，编译打包了之后就没有了 vue-cli，就是死的 index.html,要放到公网服务器上，请求就没有代理了，此时就需要后台去解决了， 要么我们在我们的服务器上去做代理。
2. 遇到了一个大麻烦: axios 发请求，从 http://localhost:8080/ 到 https://vue-js.com/api/v1 拿数据被阻止了，不允许跨域请求，所以必要要做一个代理服务器请求。在服务器上实现跨域，代理就是换成别人发请求。
3. 什么叫代理发请求:将我们 http://localhost:8080/ 发的请求代理到别的地方，让别人去发请求。去 vue-cli 里面查。devServer.proxy
4. 正常 axios 发请求 api 接口 https://vue-js.org/api/v1 会请求不到显示超时，就项目根目录下创建了一个 vue.config.js 文件 地址换成 https://vue-js.com/api/v1 新建立 代理服务器请求。
5. 路径重写 axios 用 /api 发请求，然后就把 /api 设置为空， 就指到 target: “https://vue-js.com/api/v1”,
6. /api/topics 发的请求
7. 由于你的服务器做了代理 ，将 /api 代理到了 https://vue-js.com/api/v1
8. 最终的请求 https://vue-js.com/api/v1/topics

//@@@@@@@@@@@@@  一、根目录下创建 vue.config.js @@@@@@@@@@@@@
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        // 这个是代理的地方
        target: "https://vue-js.com/api/v1",
        ws: true, //缓存
        changeOrigin: true,
        // 路径重写 axios 用 /api 发请求，然后就把 /api 设置为空， 就指到 target: "https://vue-js.com/api/v1",
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};
//@@@@@@@@@@@@@ 二、封装好的 axios.js @@@@@@@@@@@@@@@@@
import axios from "axios";
// import Vue from "vue";
// https://vue-js.org/api/v1 改成 https://vue-js.com/api/v1
// 以指定将被用在各个请求的配置默认值
axios.defaults.baseURL = "/api";

axios.interceptors.response.use((res) => res.data);
// 因为每次请求回来的数据里面都会有一个 data 添加响应拦截器 对响应数据做点什么
// axios.interceptors.response.use(function (response) {
//   return response;
// }, function (error) {
//   // 对响应错误做点什么
//   return Promise.reject(error);
// });
// 为了区分自己的封装 就把 axios 变成 $axios
const $axios = axios;
// 然后导出出去，那个组建想用就导入使用
export default $axios;
// 这个是给全部组件添加的，这个更省事，因为请求的数据放在 vuex 中了，就不需要在全局中引入 axios 。
// Vue.prototype.$http = axios;

//@@@@@@@@@@@@@  三、组件内发请求的地方  @@@@@@@@@@@@@@@@@@
const Text = await $axios.get(`/topics${queryStr}`);
//   /api/topics 发的请求
// 由于你的服务器做了代理 ，将 /api 代理到了 https://vue-js.com/api/v1
// 最终的请求 https://vue-js.com/api/v1/topics

部署

1. VUE 变成 HTML npm run build，把 src 内写的代码打包成 dist 文件夹下，然后起一个服务器 serve .
2. 建立仓库，初始化文件，然后克隆，git clone 地址 然后新建分支 git checkout -b gh-pages 只有这个分支下的页面才能被正常访问， git push 新建分支和主分支是一模一样的，版本已经做好了，直接上传就可以了，但是他会提示上传到哪里。

触发 Actions 的方式有两种，以及拿取 state 的方法

// 方法一
import { mapActions, mapState } from "vuex";
this.getText(tab)  //想在触发的地方触发即可
  methods: {
    ...mapActions(["getText"]),
  },
  computed: {
    ...mapState(["arrText"]),  //然后就可以直接 arrText使用了
    this.$store.state.arrText
  },
// 方法二
this.$store.dispatch("getText", tab);

这个是最最主要的侦听器 watch (任何可以改变的东西他都可以监听)

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

• .native 是原生的意思
  总的意思就是在组件上绑定，不是在 HTML 标签绑定。像 ul li a span 这类标签绑定没有用，只有在组件身上绑定才有用。

<router-link @click.native="handle" tag="a" exact to="/?tab=all">
  全部
</router-link>
<Home @click.native></Home>
<header @click.native></header>

handle(){
  console.log(location.hash);
}

xxx

1. 思路:我们 不管干什么都是根据页面来判断的，然而拿到页面地址栏信息的方式有两种 1. location.search location.pathname 2. this.$route.query,
2. .native
3. watch
4. exact
5. 出现的错误：自己把 watch 里面的方法当成自己写的方法，还有就是把 immeidace 写到了 $route.query 的外层,监听不到就请求不了数据，就没有展示数据
6. 过滤器 filters 完全不会
7. moment.js
8. 接下来就是跳页 考虑有没有接口
9. 动态路由参数 params

过滤器 filters

• 干嘛的:用于一些常见的文本格式化
• 怎么用:过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
• 用在哪里:双花括号插值和 v-bind 表达式

赋值解构

const lo = this.$route.query;
console.log(lo);
//{tab: "job"}
console.log(lo.tab);
// job
const { tab } = this.$route.query;
console.log(tab);
// job