一、新建项目

与之前的不同之处在于，本次选择自动创建Router，如下：

注：发现在src目录下新增views文件夹。views文件夹和components文件夹都是存放vue页面文件的。区别在于凡是通过router/index.js路由文件引入的.vue文件放入view文件夹，其余放入components文件夹。

二、开发

2.1 安装Vant组件库

组件库地址：vant-contrib.gitee.io/vant/#/zh-CN/theme

执行npm i vant -S

2.2 组件引入

推荐采用方式一引入组件，但是方式一过于麻烦，一般采用方式三。一次性引入vant的所有组件，导致打包的体积大，后期解决该问题。

 将上述代码添加至main.js中

2.3 测试组件库

 将下面代码复制至App.vue中，页面效果实现如上，说明组件引入成功。

主要按钮
信息按钮
默认按钮
警告按钮
危险按钮

 2.4 Tabbar和导航栏的创建

2.4.1创建主页Home和用户页User

分别在views文件夹下新建Home和User文件夹，并建立对应的vue文件。

 2.4.2 tabbar标签栏的创建

 如上，App.vue中添加占位符和Tabbar。

并在index.js中添加路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home/Home.vue'
import User from '@/views/User/User.vue'Vue.use(VueRouter)const routes = [{ path: '/', component: Home },{ path: '/user', component: User }
]const router = new VueRouter({routes
})export default router

2.4.3 导航栏的创建

主要存在问题如下：

（1）导航栏固定，这里是通过fixed参数设置

（2）底下的h1字体会被顶部的导航栏和底部的Tabbar标签栏挡住，这里需要设置padding。padding的设置为顺时针，上，右，下，左

（3）样式设置采用审查元素查看，若不生效，可加/deep/

2.5 axios请求数据

npm i axios -S安装

src目录下新建utils文件夹，并在utils文件夹下新建request.js文件，代码如下：

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

Home.vue中引入request.js文件，并定义方法发起axios请求，并在created方法中调用axios请求的方法。

如上，若在我的页面也想调用axios请求'/articles'获取相关数据，则又需要在User.vue重新写一次axios.get....。为了提高可用性，创建API接口：

（1）在src下新建api文件夹，并在api文件夹下新建articleAPI.js文件。articleAPI.js代码如下：

// 文章相关的接口，都封装到这个模块中
import request from '@/utils/request.js'// 向外导出一个API函数
export const getArticleListAPI = function(_page, _limit) {return request.get('/articles', {params: {_page,_limit}})
}

（2）在Home.vue中引入articleAPI.js中的getArticleListAPI方法，并调用，代码如下：

注：方法引入时两侧需要加大括号

 2.6 文章列表

（1）在src/components文件夹下新建Article文件夹，并在其下新建ArticleInfo.vue组件。

（2）Home.vue中引入并使用ArticleInfo.vue组件

 注：主要涉及的是props值的传递。

tips:（1）props值类型可设置为数组，定义为多个可能的类型

 （2）父组件在设置属性值时，若原变量名为小驼峰式，最好修改为全部小写，中间加-。如下：

 2.7 上拉加载更多

借助vant中展示组件中的List列表实现上拉加载更多的功能

（1）使用van-list包裹

（2）data中声明：loading（默认true）、finished(默认false)两个属性

（3）onLoad方法定义(page++、请求数据)

（4）修改initArticleList方法（数据拼接、loading属性设置、finished属性设置）

修改后的Home.vue代码如下：

2.8 下拉刷新

借助vant中展示组件中的List列表实现下拉刷新更多的功能.

（1）使用van-pull-refresh包裹van-list。并将其disabled属性设置为finished。也就是说当加载完成时，设置下拉刷新不可用

（2）data中定义refreshing属性，初始值设置为false

（3）定义onRefresh方法(page++、请求数据)

（4）修改initArticleList方法。（添加isRefresh入参、判断是下拉刷新还是上拉加载更多。前者是新数据在前，后者是新数据在后）

修改后的Home.vue如下：

至此，购物车项目首页开发完成。

项目完整链接Headline | 黑马头条 - 移动端

三、 定制主题（参考vue官网）

背景：一个组件在多个页面需要引入，如NavBar 导航栏默认背景颜色为白色，如果要修改颜色，则每个页面都需要重复修改。为了解决该问题，提出定制主题的思路。

步骤一 引入样式源文件

定制主题时，需要引入组件对应的 Less 样式文件，修改的是main.js文件。注释原引入index.css文件的行，修改引入文件为index.less文件。

// import 'vant/lib/index.css'
// 引入全部样式
import 'vant/lib/index.less'

步骤二 修改样式变量

本项目为 vue-cli 搭建的项目，在 vue.config.js 中进行配置。根目录下新建 vue.config.js文件。

// vue.config.js
module.exports = {css: {loaderOptions: {less: {// 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。lessOptions: {modifyVars: {// 直接覆盖变量'text-color': '#111','border-color': '#eee',// 或者可以通过 less 文件覆盖（文件路径为绝对路径）hack: `true; @import "your-less-file-path.less";`,},},},},},
};

less版本号查看：package.json搜索less-loader.查看发现小于6.0，移除lessOptions 这一级

// vue.config.js
module.exports = {css: {loaderOptions: {less: {modifyVars: {// 直接覆盖变量// 'text-color': '#111',// 'border-color': '#eee',// 或者可以通过 less 文件覆盖（文件路径为绝对路径）// hack: 'true; @import "your-less-file-path.less";'}}}}
}

查看vue官网，发现NavBar样式变量中控制背景颜色的变量如下：

方式一：直接覆盖变量。 修改vue.config.js的样式变量：（不采用该方式）

// vue.config.js
module.exports = {css: {loaderOptions: {less: {modifyVars: {// 直接覆盖变量'nav-bar-background-color': 'red'}}}}
}

修改后生效，以后NavBar默认颜色为红色。该方法的缺陷在于每次修改完都需要执行npm run serve重启服务器。采用方式二避免该问题。

方式二：新建theme.less文件，并在vue.config.js 中引入。（采用）

（1）在src下新建theme.less文件，并在文件中设置背景颜色和字体颜色

@blue: #007bff;@nav-bar-background-color: @blue;
@nav-bar-title-text-color: #ecf0f3;

（2）vue.config.js中引入theme.less文件，如下：

// vue.config.js
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')
module.exports = {css: {loaderOptions: {less: {modifyVars: {// 或者可以通过 less 文件覆盖（文件路径为绝对路径）hack: `true; @import "${themePath}";`}}}}
}

则通过修改theme.less文件保存后样式直接生效，不需再重启服务器。

四、vue.config.js 相关配置

（1）publicPath设置为'/'或者''。打包后（npm run build）的dist/index.html支持file协议打开，也就是双击本地文件打开。默认是仅支持http协议的。

浏览器输入：D:/vueworkspace/toutiao/dist/index.html可直接访问。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！