使用Vue开发项目(黑马头条项目)--第一天

MeQingJe
1,052 阅读3分钟

项目准备

需要实现的主要功能如下：

资讯列表、标签页切换，文章举报，频道管理、文章详情、阅读记忆，关注功能、点赞功能、评论功能、回复评论、搜索功能、登录功能、个人中心、编辑资料、小智同学 ...

创建项目（使用vuecli创建新的项目）

vue create hmtt-tj( 项目名称：hmtt-tj ) 这里用到的是vue2.0版本

让项目先跑起来

cd到当前创建的目录npm run serve打开本机地址 需要删除一些多余的配置项

准备一个空壳子 将src/App.vue 删除多与代码到如图 注意：这个地方不要删除router-view标签

image.png

在src/router/index.js文件中删除冗余代码 如图

image.png

删除默认生成的文件：

  • components/HelloWorld.vue
  • views/Home.vue
  • views/About.vue

此时若是正常运行的话会看到项目中一片空白

接下来去码云（gitee）创建一个空仓库 仓库名和项目同名

将本地代码推送到远端仓库

  1. git add .

2.git commit -m '创建了项目' //推送日志

3.git remote add origin git@gitee.com:MeQgJ/hmtt-tj.git 这里填入ssh仓库地址

4.git push -u origin master

如果后续有代码变化，需要提交到远程仓库，则需要两个步骤：

    1. 正常本地提交 git add, git commit
    1. 推到远程仓库 git push

随后我们在src目录中创建以下目录：

  • /api ： 存储请求函数模块
  • /styles:样式文件模块
  • /utils:工具函数模块

在接下来的项目中我们需要用到vant框架：所以需要安装并引入

npm i vant 对应安装的是vue2.0版本 我们先采用完整引入，之后再调整 ，在src/main.js 中，以vue插件的方式完整引入vant组件

    import Vant from 'vant'  // 组件库
    import 'vant/lib/index.css' // 样式
    Vue.use(Vant) // 引入

image.png

接下来测试一下vant是否引入成功 在App.vue中写入

<van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button>

若成功的话会在网页中显示

image.png

到这准备工作已经完成大半了，我们还需要完成两个工作， 即：实现rem适配 和 对后端接口地址的封装

首先，我们先完成rem适配， 我们需要用到两个插件postcss-pxtorem@5.1.1 和 amfe-flexible

postcss-pxtorem@5.1.1 可以把px单位自动转成rem单位， amfe-flexible 会根据设置屏幕的宽度去调整rem的值

接下来安装

npm i postcss-pxtorem@5.1.1 -D

npm i amfe-flexible

在根目录下创建postcss.config.js文件，内容如下：（一定是根目录且名字也不能写错）

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 能够把所有元素的px单位转成Rem
      // rootValue: 转换px的基准值。
      // 例如一个元素宽是75px，则换成rem之后就是2rem。
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

在入口文件src/main.js导入 amfe-flexible

image.png

注意：修改配置文件之后一定要重启项目 之后在调试工具中将网页调整成为移动端，在放大缩小页面时按钮内容能随之放大缩小表示已经成功了！

最后一步：封装接口地址的根目录（我们用到了axios发送请求）

安装：npm i axios

创建 src/utils/request.js ， 开始在这个文件中写如下代码（需要用到两个基地址） 先写好如下框架

import axios from 'axios'

// 创建axios的实例，配置
// 1. 基地址
const request = axios.create({
  baseURL: 'http://toutiao-app.itheima.net'
})

export const request2 = axios.create({
  baseURL: 'http://toutiao-app.itheima2.net2'
})

// 默认导出
export default request

在App.vue中写入如下代码，来测试一下我们的请求是否能成功发送

<template>
  <div id="app">
    黑马头条
    <van-button type="primary" @click="hTestAxios2">测试axios的效果-async</van-button>
    <router-view/>
  </div>
</template>
<script>
// import { request2 } from '@/utils/request.js'
import request from '@/utils/request.js'
export default {
  methods: {
    async hTestAxios2 () {
      const res = await request({
        method: 'GET',
        url: 'v1_0/user/channels'
      })
        console.log(res)
  }
}
</script>

可以在控制台中看到类似如下：

image.png

说明已经成功了！ 为了方便之后组件代码的简洁，结构分明 我们对axios进行二次封装

创建 api/channel.js 并写入

import request from '@/utils/request.js'

export const getChannels = () => {
  // 如果函数没有写return，
  //  它有一个默认的return值，就是undefined
  // return request({
  return request({
    url: 'v1_0/user/channels', // 接口地址
    method: 'GET'
  })
}

然后在具体的页面中加载调用，两个步骤：

// 1. 导入上面封装api
import { getChannels } from '@/api/channel.js'


async hTestAxios2 () {
  try {
    // 2. 调用
    const res = await getChannels()
    console.log(res)
  } catch (err) {
    console.log(err)
  }
}

好了，第一天项目准备工作就这些！！！

avatar
文章
阅读
粉丝