vue2开发-案例

寂静流年韶华舞

已于 2022-02-22 08:45:29 修改

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue.js

于 2022-02-15 08:35:46 首次发布

本文链接：https://blog.csdn.net/flayer2006/article/details/122935668

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、登录页

1.安装和配置路由：npm i vue-router@3.5.2 -S

2.编写router/index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
});

export default router

3.配置main.js

import router from '@/router'

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

4.配置路由规则：{ path: '/login', component: Login } //登录页路由规则,App.vue添加占位符<router-view></router-view>

二、头条

1. 手动创建项目：vue create demo-toutiao,选择choose Vue version、Babel、Router、CSS Pre-processors、Linter / Formatter；2.x；选择N(不用history mode，该模式兼容性弱点，需要与后端配合)；Less；Eslint+Standard config；Lint on save；In dedicated config files。开始创建工程。

2. 梳理项目结构。views文件夹是需要通过路由展现的组件；components是可复用的组件。清空示例代码。

3.安装配置vant。参见Vant 3 - Mobile UI Components built on Vue。参考Vant 快速上手_w3cschool

安装vant：npm i vant@latest-v2 根据官方文档的命令安装。引入组件，使用导入所有组件方式（代码量变大，但开发阶段不用考虑），发布阶段再优化。在main.js添加如下：

// 导入并安装vant组件库
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

使用button组件，<van-button type="primary">主要按钮</van-button>置于App.vue，看效果vant可用。

在index.js里面配置路由规则

const routes = [
  { path: '/', redirect: '/home' },
  // 路由规则
  { path: '/home', component: Home },
  { path: '/user', component: User }
]

在app里面添加Tabbar标签组件

<!-- 路由占位符 -->
    <van-tabbar route placeholder>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>

给Home添加头部导航

<!-- 头部区域 -->
    <van-nav-bar title="标题" fixed placeholder/>
  </div>

设置Home导航栏颜色

.home-container {
  /deep/ .van-nav-bar {
    background-color: #1a73e8;
  }
  /deep/ .van-nav-bar__title {
    color: white;
  }
}

封装获取数据的服务器根路径

安装axios：npm i axios -S；创建utils/request.js,内容如下。多个服务器可配置多个request。

import axios from 'axios'

const request = axios.create({
  baseURL: 'https://www.escook.cn'
})

export default request

Home组件创建initArticleList方法

首先修改eslintrc.js：'space-before-function-paren': ['error', 'never']

data() {
    return {
      page: 1,
      limit: 10
    }
  },
  methods: {
    async initArticleList() {
      const { data: res } = await request.get('/articles', {
        params: { _page: this.page, _limit: this.limit }
      })
      console.log(res)
    }
  },
  created() {
    this.initArticleList()
  }

封装一个获取文章列表Promise结果的函数，新建一个src\api\articleAPI.js 和 userAPI.js

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

export const getArticleListAPI = (_page, _limit) => {
  return request.get('/articles', { params: { _page, _limit } })
}

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

export const getUserInfoAPI = params => {
  return request.get('/user', { ...params })
}

封装一个ArticleInfo组件，添加props属性。Home循环显示文章列表。

<ArticleInfo
      v-for="item in artlist"
      :key="item.id"
      :title="item.title"
      :author="item.aut_name"
      :cmtCount="item.comm_count"
      :time="item.pubdate"
    >
    </ArticleInfo>