黑马头条案例

binzhenliziyuan

已于 2022-06-15 04:47:05 修改

阅读量2.4k

点赞数 1

分类专栏：前端框架Vue 文章标签： vue.js npm javascript

于 2022-06-15 04:07:17 首次发布

本文链接：https://blog.csdn.net/qq_41555350/article/details/125270634

版权

前端框架Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.手动配置创建带eslintd的vue路由的项目

在这里插入图片描述

2.初始化：创建并梳理项目结构

在这里插入图片描述

<template>
  <div>App根组件</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less" scoped>
</style>

3.安装和配置Vant组件库

写在前面：一些血泪总结，不要动eslint配置特别是写驼峰命名时候，你就写驼峰命名，文件改删除的删除一个也不要留也不要重命名，index.js路由配置一定要改！！！写之前把原来的删除掉！！！！

🔗 vant组件库

🔗适用于vue2

npm错误——npm ERR! code ERESOLVE 解决方法

在安装组件的时候出现以下问题，npm版本问题报错

在这里插入图片描述

解决方法：在命令后面加上

 npm i vant@latest-v2 -S --legacy-peer-deps

在这里插入图片描述
方法一、自动按需引入组件但是相当麻烦所以用方案三

方式三. 导入所有组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。发布时候会有优化。


import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

4.使用Tabbar组件并开启路由模式

注意：给组件起名称时首字母要大写
在这里插入图片描述

5.通过路由展示对应的Tabbar页面

注意：写的时候会报错
在这里插入图片描述

原因：语法提示的锅

根据官方风格指南，除了根组件（App.vue）外，自定义组件名称应该由多单词组成，防止和html标签冲突。
而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件，在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则，所以在编译的时候判定此次错误。

解决：在 vue.config.js 中关闭语法提示【无效】

具体做法：

    // 关闭驼峰命名规则
    'vue/multi-word-component-names': 'off'

🔗 一个好的博客解决办法

最后使用了第二种方法！！/(ㄒoㄒ)/~~弄得麻烦死了建议直接使用驼峰命名，听话

ESLint 中的“ space-before-function-paren ”相关报错及其解决方案

'space-before-function-paren': ['error', 'never'],

🔗详情链接

userview.vue文件

<template>
  <div class="user-container">
    <!-- 用户基本信息面板 -->
    <div class="user-card">
      <!-- 用户头像、姓名 -->
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #icon>
          <img src="../../assets/logo.png" alt="" class="avatar" />
        </template>
        <template #title>
          <span class="username">用户名</span>
        </template>
        <template #label>
          <van-tag color="#fff" text-color="#007bff">申请认证</van-tag>
        </template>
      </van-cell>
      <!-- 动态、关注、粉丝 -->
      <div class="user-data">
        <div class="user-data-item">
          <span>0</span>
          <span>动态</span>
        </div>
        <div class="user-data-item">
          <span>0</span>
          <span>关注</span>
        </div>
        <div class="user-data-item">
          <span>0</span>
          <span>粉丝</span>
        </div>
      </div>
    </div>

    <!-- 操作面板 -->
    <van-cell-group class="action-card">
      <van-cell icon="edit" title="编辑资料" is-link />
      <van-cell icon="chat-o" title="小思同学" is-link />
      <van-cell icon="warning-o" title="退出登录" is-link />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'UserView'
}
</script>

<style lang="less" scoped>
.user-container {
  .user-card {
    background-color: #007bff;
    color: white;
    padding-top: 20px;
    .van-cell {
      background: #007bff;
      color: white;
      &::after {
        display: none;
      }
      .avatar {
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-radius: 50%;
        margin-right: 10px;
      }
      .username {
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
  .user-data {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    padding: 30px 0;
    .user-data-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.33%;
    }
  }
}
</style>

逗号问题

{
            "trailingComma": "none",
            "semi": false,
            "singleQuote": true,
            "arrowParens": "avoid",
            "printWidth": 300
}

在项目根目录新建.prettierrc 文件，添加对象
{
  "semi": false, // 去掉结尾的分号
  "singleQuote": true // 单引号替代双引号
  "trailingComma": "none"// 末尾禁止添加逗号
}
解决 eslint要求函数括号前必须有空格的警告
在.eslintrc.js的rules中添加下面这一行代码
'space-before-function-paren': 0  //解决 eslint要求函数括号前必须有空格的警告
解决eslint提示只能缩进2空格，
在.eslintrc.js的rules中添加下面这一行代码
"editor.detectIndentation": false //  解决eslint提示只能缩进2空格的警告

解决pritter插件自动添加逗号的问题  
在setting.json 中通过ctrl+f全局搜索“editor.formatOnSave” 
// #每次保存的时候自动格式化
    "editor.formatOnSave": true,
 将这一行注释之后就能解决

感天动地！！终于出来了，一定要按照老师的步骤来
在这里插入图片描述

6.初始化-使用NavBar组件

在这里插入图片描述

新方法：

7.覆盖NavBar的默认样式

在这里插入图片描述

8.了解获取列表数据的API接口

在这里插入图片描述

9.封装utils目录下的request模块

npm i axios -S

–legacy-peer-deps
–legacy-peer-deps标志是在v7中引入的，目的是绕过peerDependency自动安装；它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。

在这里插入图片描述

import axios from 'axios'

// 调用 axios.create() 函数，创建一个 axios 的实例对象，用 request 来接收
const request = axios.create({
  baseURL: 'https://www.escook.cn'
})

export default request

10.在Home组件中封装initArticleList方法

vue课程接口：
https://applet-base-api-t.itheima.net/articles
同志们 文章最新接口

在这里插入图片描述

<script>
import request from '@/utils/request.js'

export default {
  name: 'HomeView',
  data() {
    return {
      page: 1,
      limit: 10
    }
  },
  // 在created里面调用它
  created() {
    this.initArticleList()
  },
  methods: {
    // 封装获取文章列表数据的方法
    async initArticleList() {
      const { data: res } = await request.get('/articles', {
        params: {
          _page: this.page,
          _limit: this.limit
        }
      })
      console.log(res)
    }
  }
}
</script>

在home组件中封装了获取数据的方法叫做initArticleList,init代表初始化的意思，建议大家封装前面都用init开头。里面通过requestGet方法请求接口地址，并且把需要的GEt参数通过params对象发送给服务器，这样得到了一个promise实例加await 和async、解构、打印

11.封装articleAPI模块

在这里插入图片描述

总结：首先新建用户API模块，要发请求，导入request，定义方法，export const getUserAPI=function(){ return request get(‘/url’,params{})} 一定要加return 否则就是undefined。

12.封装AriticleInfo组件

注意：如果某个数据要在页面上使用，要存到data中去！

<template>
  <div>ArtcleInfo组件</div>
</template>

<script>
export default {
  name: 'AriticleInfo'
}
</script>

<style lang="less" scoped></style>

在这里插入图片描述

 // 封装获取文章列表数据的方法
    async initArticleList() {
      const { data: res } = await getArtAPI(this.page, this.limit)
      console.log(res)
      this.artlist = res
    }

在这里插入图片描述

13.AriticleInfo组件封装props属性

样式如下：

.label-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.thumb {
  // 矩形黄金比例：0.618
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}

.title-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.thumb-box {
  display: flex;
  justify-content: space-between;
}

在 ArtIINfo.vue 组件中，声明如下的模板结构：

<template>
  <div>
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>文章的标题噢</span>
          <!-- 单张图片 -->
          <img src="https://www.escook.cn/vuebase/pics/1.png" alt="" class="thumb">
        </div>
        <!-- 三张图片 -->
        <div class="thumb-box">
          <img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
          <img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
          <img src="https://www.escook.cn/vuebase/pics/2.png" alt="" class="thumb">
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span>作者 &nbsp;&nbsp; 0评论 &nbsp;&nbsp; 发布日期</span>
          <!-- 关闭按钮 -->
          <van-icon name="cross" />
        </div>
      </template>
    </van-cell>
  </div>
</template>

在这里插入图片描述
小驼峰官方建议修改 cmtCount 为 cmt-count
在使用组件的时候，如果某个属性名是“小驼峰”形式，则绑定属性的时候，建议改写成“连字符”格式。例如： cmtCount 为 cmt-count

14.为AriticleInfo组件封装cover属性

对象类型的属性要给定默认值，需要指定一个函数，在函数里return一个对象
return 的对象就是 cover 属性的默认值

// 封面的信息对象
    cover: {
      type: Object,
      // 通过 default 函数，返回 cover 属性的默认值
      default: function() {
        // 这个 return 的对象就是 cover 属性的默认值
        return { type: 0 }
      }
    }

在这里插入图片描述

 <!-- 单张图片 -->
          <img :src="cover.images[0]" alt="" class="thumb" v-if="cover.type === 1" />
        </div>
        <!-- 三张图片 -->
        <div class="thumb-box" v-if="cover.type === 3">
          <img :src="item" alt="" class="thumb" v-for="(item, i) in cover.images" :key="i" />
        </div>

在这里插入图片描述

15.上拉加载更多-了解list组件的基本用法

在这里插入图片描述
List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>

当第一页看完会自动触发load事件，发起下一页数据请求，同时load的值变为true
在这期间，如果用户反复上拉，此时不会多次调用load事件。
因为loading为true时候，不会反复触发load事件

16.上拉加载更多-初步使用list组件

 // 是否正在加载下一页数据，如果 loading 为 true，则不会反复触发 load 事件
 // 每当下一页数据请求回来之后，千万要记得，把 loading 从 true 改为 false
      loading: true,
 // 所有数据是否加载完毕了，如果没有更多数据了，一定要把 finished 改成 true
      finished: false

在这里插入图片描述

17.上拉加载更多-实现上拉加载更多的效果

在这里插入图片描述

第一个数据不能被覆盖，而是数据应该拼接！！！！

写错了！！！！

如果数据跑完了，应该把finish改为true

 // 封装获取文章列表数据的方法
    async initArticleList() {
      const { data: res } = await getArtAPI(this.page, this.limit)
      // console.log(res)
     
     
      // this.artlist = [旧数据在前, 新数据在后]
      this.artlist = [...this.artlist, ...res]
       this.loading = false
      if (res.length === 0) {
        // 证明没有下一页数据了，直接把 finished 改为 true，表示数据加载完了！
        this.finished = true
      }
    },

在这里插入图片描述

18.下拉刷新-实现下拉刷新的功能

🔗 https://vant-contrib.gitee.io/vant/v2/#/zh-CN/pull-refresh
在这里插入图片描述

前面refreshing改为isloading!!!

 if (isRefresh) {
        this.artlist = [...res, ...this.artlist]
        this.isLoading = false
      } else {
        this.artlist = [...this.artlist, ...res]
        this.loading = false
      }

在这里插入图片描述

封装了参数！通过这个此参数进行数据的拼接，拼接完记得改为false

19.定制主题-说明Vant定制主题的核心原理

在这里插入图片描述

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;
  .van-nav-bar {
    background-color: #007bff;
  }
  /deep/.van-nav-bar__title {
    color: white;
  }
}
</style>

缺点：换一个页面还是会变成白色的标题

main.js

main.js
// 切记：为了能够覆盖默认的 less 变量，这里一定要把后缀名改为 .less
import 'vant/lib/index.less'

20.定制主题-直接覆盖主题变量

步骤一引入样式源文件
步骤二修改样式变量
如果 vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。

点击空白区域就可以本目录下新建文件 vue.config.js
vue.config.js
这个文件是 vue-cli 创建出来的项目的配置文件
在 vue.config.js 这个配置文件中，可以对整个项目的打包、构建进行全局性的配置

webpack 在进行打包的时候，底层用到了 node.js
因此,在 vue.config.js 配置文件中，可以导入并使用 node.js 中的核心模块

// 这个文件是 vue-cli 创建出来的项目的配置文件
// 在 vue.config.js 这个配置文件中，可以对整个项目的打包、构建进行全局性的配置

// webpack 在进行打包的时候，底层用到了 node.js
// 因此,在 vue.config.js 配置文件中，可以导入并使用 node.js 中的核心模块
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')

module.exports = {
  publicPath: './',
  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          // 直接覆盖变量
          // 'nav-bar-background-color': 'orange'
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          //  ../    ./    theme.less
          // 从盘符开始的路径，叫做绝对路径   C:\\Users\liulongbin\\theme.less
          hack: `true; @import "${themePath}";`
        }
      }
    }
  }
}

只要修改了配置文件，都得重启服务器！！！！
缺点：这种方案【直接覆盖变量】—需要重启服务器，太麻烦了！！！！！

less是可编程的样式语言！！！！

21.定制主题-通过theme.less定制主题-推荐形式

 // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
 hack: `true; @import "your-less-file-path.less";`,

// 在 src/theme.less 文件中，覆盖 Vant 官方的 less 变量值
@blue: #007bff;

// 覆盖 Navbar 的 less 样式
@nav-bar-background-color: @blue;
@nav-bar-title-text-color: #fff;

// vue.config.js
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')
module.exports = {
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "${themePath}";`
          }
        }
      }
    }
  }
}

22END

默认打包生成的dist文件只能发布到服务器上通过http协议才能被打开，双击是file协议。
发布的配置： publicPath: ‘’,

🔗配置

import引入js报错：Access to script at ‘file:///E:/…‘ from origin ‘null‘ has been blocked by CORS policy

在VSCode中安装live server插件：

在index.html文件中右键：“Open with Live Server”，正常输出结果：
在这里插入图片描述

binzhenliziyuan

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
黑马头条案例

3.安装和配置Vant组件库写在前面：一些血泪总结，不要动eslint配置特别是写驼峰命名时候，你就写驼峰命名，文件改删除的删除一个也不要留也不要重命名，index.js路由配置一定要改！！！写之前把原来的删除掉！！！！🔗 vant组件库🔗适用于vue2在安装组件的时候出现以下问题，npm版本问题报错解决方法：在命令后面加上方法一、自动按需引入组件但是相当麻烦所以用方案三Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。发布时候会有优化。4.使用Tabbar..
复制链接

扫一扫