【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,设置axios,utils工具包,vue.fonfig.js配置项 (下)

news2024/10/7 18:20:34

系列文章目录

这里是创建移动端项目
【Vue】Vue2.x创建项目全程讲解,保姆级教程,手把手教,Vue2怎么创建项目(上)
【Vue】Vue2创建移动端项目实战教程,创建移动端项目保姆级教程,接上一篇创建Vue2项目(中)


提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 系列文章目录
  • 前言
  • 一、安装vant2
    • 1.引入库
    • 2.引入组件
    • 3.检查组件以及适配
  • 二、设置样式
    • 1.清除app.vue默认样式
    • 2.新建全局样式
    • 3.引入全局样式
  • 三、设置axios请求
    • 1.下载axios,设置request请求
    • 2. 引入getToken方法
    • 3. 引入errorCode变量
  • 4、设置env环境
    • 1.创建本地环境dev
    • 2.创建服务器环境prod
  • 五、vue.config.js
    • 1. 创建vue.config.js
    • 2.修改后台接口地址
  • 六、编写api请求
    • 1.创建接口
    • 2.在vue页面中引入api方法
  • 七、bin脚本文件,一键运行
    • 1、打包 -- build.bat
    • 2、下载依赖 -- package.bat
    • 3、运行 -- run-web.bat
  • 总结


前言

请先看前两篇上篇为创建项目,中篇为适配移动端,下篇为引入组件以及配置选项


一、安装vant2

传送门 Vant 轻量、可靠的移动端 Vue 组件库

1.引入库

我这里是vue2项目,如果是你的项目是vue3的话,说明你已经对vue2有了解了,这里仅供参考vue2的教程

# Vue 3 项目,安装最新版 Vant:
npm i vant -S

# Vue 2 项目,安装 Vant 2
npm i vant@latest-v2 -S

2.引入组件

按需引入手动引入请看 vant官方写法

全部引入,打开main.js文件

// 引入vantUI
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

在这里插入图片描述

运行项目 npm run serve

3.检查组件以及适配

修改views下的Home.vue页面为如下代码

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

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {

  }
}
</script>

效果如图
在这里插入图片描述
在这里插入图片描述

虽然有移动端适配,但是像h2这种标签,你不去给px大小,它好像不一定会转化,就还是pc端大小

二、设置样式

1.清除app.vue默认样式

打开src/App.vue,删除里面的默认样式
最后保留为如下代码

<template>
  <router-view />
</template>

2.新建全局样式

在src目录下新建styles文件夹,然后在文件夹下新建一个base.css,代码如下

body,ul{
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
}
h1,h2,h3,h4,h5,p,span{
	margin: 0;
	/* font-family: 'PingFang SC'; */
	font-family: PingFang SC-Heavy, PingFang SC;
}
a{
	text-decoration: none;
	color: #333;
}
img{
	vertical-align: middle;
}

这个是简单版,复杂的可参考 通用css样式模板,CSS 通用样式总结

3.引入全局样式

在styles新建index.css文件
内容如下

@import url(./base.css);

在这里插入图片描述
main.js中,引入index.css文件

// 自定义基础样式库
import './styles/index.css'

引入后效果如图
在这里插入图片描述

一般情况ui设计图是750px宽度,vant是基于375,当你在ui设计图上面的尺寸为16px时,你需要设置为32px,才能与设计图一致。


三、设置axios请求

1.下载axios,设置request请求

传送门axios中文文档|axios中文网

npm install axios -S

在src目录下创建文件夹 utils
在里面新建一个request.js文件

我这里考虑到请求需要携带token,以及生产环境和开发环境的配置,
request.js我直接贴出来,不作解释,都有注释,详细可参考若依项目,很多脚手架功能都是来自于若依后台系统

import axios from 'axios'
import errorCode from '@/utils/errorCode'
import {
	getToken
} from '@/utils/auth'

import {
	Dialog,
	Notify
} from 'vant';

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建axios实例
const service = axios.create({
	// axios中请求配置有baseURL选项,表示请求URL公共部分
	baseURL: process.env.VUE_APP_BASE_API, // 本地后台接口||服务器接口
	// 超时
	timeout: 40000
})
// request拦截器
service.interceptors.request.use(config => {
	// 是否需要设置 token
	const isToken = (config.headers || {}).isToken === false
	// config.headers['Authorization'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
	// config.headers['token'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
	config.headers['Authorization'] = 'Bearer ' + getToken()
	// get请求映射params参数
	if (config.method === 'get' && config.params) {
		let url = config.url + '?';
		for (const propName of Object.keys(config.params)) {
			const value = config.params[propName];
			var part = encodeURIComponent(propName) + "=";
			if (value !== null && typeof (value) !== "undefined") {
				if (typeof value === 'object') {
					for (const key of Object.keys(value)) {
						let params = propName + '[' + key + ']';
						var subPart = encodeURIComponent(params) + "=";
						url += subPart + encodeURIComponent(value[key]) + "&";
					}
				} else {
					url += part + encodeURIComponent(value) + "&";
				}
			}
		}
		url = url.slice(0, -1);
		config.params = {};
		config.url = url;
	}
	return config
}, error => {
	console.log(error)
	Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
	// 未设置状态码则默认成功状态
	const code = res.data.code || 200;
	// 获取错误信息
	const msg = errorCode[code] || res.data.msg || errorCode['default']
	// 二进制数据则直接返回
	if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
		return res.data
	}
	if (code === 401) {
		return Promise.reject('无效的会话,或者会话已过期,请重新登录。')
	} else if (code === 402) {
		return Promise.reject(new Error(msg))
	} else if (code === 403) {
		return Promise.reject(new Error(msg))
	} else if (code === 500) {
		Notify({
			type: 'danger',
			message: msg
		});
		return Promise.reject(new Error(msg))
	} else if (code === 601) {
		Notify({
			type: 'warning',
			message: msg
		});
		return Promise.reject('error')
	} else if (code !== 200) {
		Dialog({
			title: '错误',
			message: msg
		});
		return Promise.reject('error')
	} else {
		return res.data
	}
}, error => {
	console.log('err' + error)
	let {
		message
	} = error;
	if (message == "Network Error") {
		message = "后端接口连接异常";
	} else if (message.includes("timeout")) {
		message = "系统接口请求超时";
	} else if (message.includes("Request failed with status code")) {
		message = "系统接口" + message.substr(message.length - 3) + "异常"; // 例如502异常
		// message = "系统更新服务中,请稍后重试";
	}
	// 弹出报错信息
	Notify({
		message: message,
		type: 'danger',
		duration: 5 * 1000,
	});
	return Promise.reject(error)
}
)


// 使用a标签下载
export function fileDown(blobUrl, filename) {
	const a = document.createElement("a");
	if (!a.click) {
		throw new Error('DownloadManager: "a.click()" is not supported.');
	}
	a.href = blobUrl;
	a.target = "_parent";
	if ("download" in a) {
		a.download = filename;
	}
	(document.body || document.documentElement).append(a);
	a.click();
	a.remove();
}

export default service

  • 上述代码缺少一个getToken方法
  • 还缺少一个errorCode变量

不着急,慢慢来

2. 引入getToken方法

在utils文件夹下创建一个auth.js文件

import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  // 设置60分钟后过期
  const inFifteenMinutes = new Date(new Date().getTime() + 60 * 60 * 1000);
  return Cookies.set(TokenKey, token, { expires: inFifteenMinutes })
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

这里需要安装一个插件

npm install --save js-cookie

3. 引入errorCode变量

在utils文件夹下创建一个errorCode.js文件

export default {
  '401': '认证失败,无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误,请反馈给管理员'
}

4、设置env环境

1.创建本地环境dev

在src外面创建文件名为 .env.development

#模式
NODE_ENV = 'development'
#  // 通过"VUE_APP_MODE"变量来区分环境
VUE_APP_MODE = 'development'

# 请求路径
VUE_APP_BASE_API = '/dev-api'


# 这是开发环境,未上线

#		*******************			**   **		**
#			**		**			   ****************
#			**		**					**
#		*******************			   ************
#			**		**				  ***	    **
#			**		**				 **  **    **
#		   **		**				**	    ***
#		  **		**			   **	 **    ***

2.创建服务器环境prod

在src外面创建文件名为 .env.production

#模式
NODE_ENV = 'production'

#通过"VUE_APP_MODE"变量来区分环境
VUE_APP_MODE = 'production'

#api地址
VUE_APP_BASE_API = '/prod-api'

# 这是上线环境,已投入使用

环境配置里面的VUE_APP_BASE_API为代理请求,可更改,这个东西看后端怎么调用或者修改吧
在这里插入图片描述
例如我发起了一个列表请求,这个192.168.1.6是我的电脑ip,后端java的电脑ip例如是192.168.1.7

我就通过/dev-api请求到他的电脑上的接口

五、vue.config.js

与package.json同级

1. 创建vue.config.js

const webpack = require('webpack')
const path = require("path")

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
	lintOnSave: false,
	devServer: {
		port: 8088,
		host: '0.0.0.0',
		open: true,
		proxy: {
			[process.env.VUE_APP_BASE_API]: {
				target: `http://192.168.1.66:8080`,
				changeOrigin: true,
				pathRewrite: {
					['^' + process.env.VUE_APP_BASE_API]: ''
				}
			},
		},
		historyApiFallback: true, // 设置了当服务端收到 404 请求时,将会返回 index.html 文件
	},
	configureWebpack: {
		resolve: {
			alias: {
				'@': path.resolve(__dirname, 'src'),
				'assets': '@/assets'
			}
		},
		plugins: [
			// http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
			new CompressionPlugin({
				cache: false,                   // 不启用文件缓存
				test: /\.(js|css|html)?$/i,     // 压缩文件格式
				filename: '[path].gz[query]',   // 压缩后的文件名
				algorithm: 'gzip',              // 使用gzip压缩
				minRatio: 0.8                   // 压缩率小于1才会压缩
			}),
			// maxChunks:使用大于或等于 1 的值,来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk,这是因为 entry/main chunk 也会包含在计数之中。
			//minChunkSize: 设置 chunk 的最小大小。
			// 限制打包的个数(减少打包生成的js文件和css文件)
			new webpack.optimize.LimitChunkCountPlugin({
				maxChunks: 10,
				minChunkSize: 100
			})
		],
	},
	publicPath: "/",
	assetsDir: './',
	assetsDir: 'static', // 整合css和js到这里
	outputDir: 'app', // 打包名称,例如默认为dist
}

这一段代码用到了compression-webpack-plugin ,项目中没有,要进行安装,否则会报红

这个东西有版本问题,我直接下载了最新版10.0.0,结果项目运行不起来,然后我就找到了以前旧项目的版本

版本我已经指定好了,直接安装即可。

npm install compression-webpack-plugin@5.0.2 --save-dev

安装完了请检查package.json中的配置
在这里插入图片描述

由于vue的特性,修改env,vue.config.js,项目是需要重启的。


2.修改后台接口地址

在这里插入图片描述
这个target,这里是你的本地的后台java开发地址

六、编写api请求

1.创建接口

在src目录下创建一个文件夹【api】,在api下创建test.js用作测试,后续写其他接口都是这样
先集成在api文件夹里,然后再不同的vue页面引入

import request from '@/utils/request'
// 查询常用意见列表
export function listComment(query) {
    return request({
        url: '/flow/comment/list',
        method: 'get',
        params: query
    })
}
// 查询常用意见详细
export function getComment(id) {
    return request({
        url: '/flow/comment/' + id,
        method: 'get'
    })
}
// 新增常用意见
export function addComment(data) {
    return request({
        url: '/flow/comment',
        method: 'post',
        data: data
    })
}
// 修改常用意见
export function updateComment(data) {
    return request({
        url: '/flow/comment',
        method: 'put',
        data: data
    })
}
// 删除常用意见
export function delComment(id) {
    return request({
        url: '/flow/comment/' + id,
        method: 'delete'
    })
}

在这里插入图片描述

2.在vue页面中引入api方法

在Home.vue页面中引入

import { listComment } from "@/api/test.js"

在这里插入图片描述
然后编写methods方法,在created里面请求

<template>
  <div class="home">
    <h1>这是h1标签</h1>
    <h2>这是h2标签</h2>
    <h3>这是h3标签</h3>
    <h4>这是h4标签</h4>
    <h5>这是h5标签</h5>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

<script>
// @ is an alias to /src

import { listComment } from "@/api/test.js"
export default {
  name: 'Home',
  components: {

  },
  data() {
    return {

    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表
    getList() {
      listComment().then(res => {

      })
    }
  }
}
</script>

打开f12控制台,查看网络请求
在这里插入图片描述

在这里插入图片描述
我这里已经请求到数据了


同理,引入该js中其他方法只需要往后面加就是了

import { listComment , ***list , ***del , ...... } from "@/api/test.js"

然后有不同的js需要分成不同的js包,如下图
在这里插入图片描述

七、bin脚本文件,一键运行

每次打开项目都需要手动去写npm run serve,太麻烦了,这里集成了一个bin脚本
与src同级,建立一个文件夹,名字为bin
在这里插入图片描述

1、打包 – build.bat

@echo off
echo.
echo [信息] 打包Web工程,生成dist文件。
echo.

%~d0
cd %~dp0

cd ..
npm run build

pause

2、下载依赖 – package.bat

@echo off
echo.
echo [信息] 安装Web工程,生成node_modules文件。
echo.

%~d0
cd %~dp0

cd ..
npm install --registry=https://registry.npm.taobao.org

pause

3、运行 – run-web.bat

@echo off
echo.
echo [信息] 使用 Vue CLI 命令运行 Web 工程。
echo.

%~d0
cd %~dp0

cd ..
npm run serve

pause

在这里插入图片描述
先建一个js然后写进去再改后缀名,或者直接建这个名字然后用VSCode打开编辑。

双击即可运行,如果npm run dev是你的运行方式, 修改里面的server为dev就好了。

总结

很好的一个移动端项目脚手架,axios、环境、适配,都做好了。vuex这个可以用若依的,也可以自己写

vuex有两种,一种没有子模块,没有子模块的,直接在它的store/index.js里面写。
如果有子模块呢,就是子模块引入到这个父模块,父模块在modules里面注册一下。在vue页面中引入就会多一层modules模块。

下面这个就是我自己写的,简单版的,是有子模块的。
vuex的多模块用法简单版

由于这个项目我建的时候选择的是scss渲染器,所以不是less渲染器。重新建的时候选择scss with dart-scss就好了,或者你装了less再装一下scss也行。全篇下来没有写到关于less或scss的代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/878263.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

解压版 MySQL 数据库的安装与配置

目录 1 下载2 安装3 配置3.1 添加环境变量3.2 新建配置文件3.3 初始化MySQL3.4 注册MySQL服务3.5 启动MySQL服务3.6 修改默认账户密码 4 登录MySQL5 卸载MySQL 安装环境:Win10 64位 软件版本:MySQL 5.7.24 解压版 1 下载 点击链接 进入如下界面 ❗️注意&#xff1a; 我们一般不…

JavaEE初阶:多线程 - 编程

1.认识线程 我们在之前认识了什么是多进程&#xff0c;今天我们来了解线程。 一个线程就是一个 "执行流". 每个线程之间都可以按照顺讯执行自己的代码. 多个线程之间 "同时" 执行 着多份代码. 引入进程这个概念&#xff0c;主要是为了解决并发编程这样的…

JAVA集合-List

// 数组的缺点&#xff1a;每次使用都需要指定长度&#xff0c;掉率低&#xff0c;操作麻烦 // // 【java集合体系】&#xff1a;分类&#xff1a;6个接口&#xff0c;1个工具类 // 6个接口&#xff1a; 单列 :Collection,(父接口) // …

成功项目管理必备的五个关键因素

在任何组织中&#xff0c;良好的项目管理都是项目成功的首要标准。然而&#xff0c;一旦被淹没在无穷无尽的任务、持续的紧迫性和利益相关者相互冲突等情况中&#xff0c;管理好项目可能会让你感到力不从心。找出项目成功的关键因素并加以解决&#xff0c;就能避免一切失败。 …

浅谈学生宿舍安全用电管理存在的问题及防范措施

安科瑞 华楠 摘要&#xff1a;2009年&#xff0c;由一个小小的“热的快”引起的学院女生火灾事件&#xff0c;再一次敲响了大学生安全用电的警钟。而近年来随着教育事业的蓬勃发展和教育体制的推进&#xff0c;我国高等教育总规模在逐年增加。而目前高等学校能源使用主要是以电…

产品帮助中心的制作方法,保姆级0-1完整的实操教程!

帮助中心是一个产品的重要用户自助服务模块&#xff0c;包括各类产品相关信息&#xff0c;用以帮助用户快速理解和使用产品功能。对于我们产品开发和管理者而言&#xff0c;设计帮助中心的初衷是解决用户困惑&#xff0c;怎么设计帮助中心&#xff0c;才能让其价值尽可能的大&a…

【C语言】每日一题(寻找数组的中心下标)

寻找数组的中心下标&#xff0c;链接奉上 方法 暴力循环前缀和 暴力循环 ​​​​​​​思路&#xff1a; 依旧是我们的老朋友&#xff0c;暴力循环。 1.可以利用外层for循环&#xff0c;循环变量为数组下标&#xff0c;在循环内分别求出下标左边与右边的sum 2.在边界时讨论&…

伙伴云CEO戴志康:让数据和业务更好的互通展现,数字化与可视化同步进行

近日&#xff0c;零代码平台伙伴云产品「页面」功能正式上线&#xff0c;在【小伙开麦】直播间&#xff0c;CEO戴志康和产品经理共同为在线观众展示「页面」的功能与使用技巧&#xff0c;让小伙伴们大呼过瘾&#xff01;好玩、好用、好看的「页面」&#xff0c;到底有哪些亮点&…

动手学深度学习-pytorch版本(一):引言 预备知识

参考引用 动手学深度学习利用 Anaconda 安装 pytorch 和 paddle 深度学习环境 pycharm 安装 0. 环境安装 利用 Anaconda 安装 pytorch 和 paddle 深度学习环境 pycharm 安装 1. 引言 机器学习&#xff08;machine learning&#xff0c;ML&#xff09;是⼀类强⼤的可以从经…

苏宁API的详细介绍及应用领域分析

随着电子商务的快速发展&#xff0c;越来越多的企业开始关注并积极开发自己的API接口&#xff0c;以提供更加高效、便捷和个性化的服务。苏宁作为中国领先的零售企业之一&#xff0c;也不例外。 1. 苏宁API是什么&#xff1f; 苏宁API是苏宁开放平台提供的一组接口集合&#x…

c++ 获取输入

获取键盘输入 #include <iostream> #include <limits>bool enter_state(int &pos) {unsigned int userInput;std::cout << "[info] 请选择: 0.主驾, 1.副驾, 2.后排" << std::endl;std::cout << "[info] 请输入&#xff1a;…

网络系统架构演变

1.系统架构演变 随着互联网的发展&#xff0c;网站应用的规模不断扩大。需求的激增&#xff0c;带来的是技术上的压力。系统架构也因此不断的演进、升级、迭代。从单一应用&#xff0c;到垂直拆分&#xff0c;到分布式服务&#xff0c;到SOA&#xff0c;以及现在火热的微服务架…

BFS(广度优先搜索)和DFS(深度优先搜索)的相关介绍解析

文章目录 DFS 和 BFSBFS 的应用一&#xff1a;层序遍历BFS 的应用二&#xff1a;最短路径最短路径例题讲解 DFS简介DFS原理分类与分析1. DFS连通性模型2. DFS思路应用-穷举求解问题 DFS&#xff08;深度优先搜索&#xff09;和 BFS&#xff08;广度优先搜索&#xff09;就像孪生…

java:反射

java代码运行的三个阶段 第一阶段&#xff1a;源代码编译为了字节码&#xff08;.class文件&#xff09; 第二阶段&#xff1a;就是类加载器将字节码文件加载到内存中 第三阶段&#xff1a;程序运行时 类加载 将 class 文件读取到内存中的过程&#xff0c;称为类加载 class 文…

LabVIEW使用边缘检测技术实现彩色图像隐写术

LabVIEW使用边缘检测技术实现彩色图像隐写术 隐写术是隐藏信息的做法&#xff0c;以隐瞒通信的存在而闻名。该技术涉及在适当的载体&#xff08;如图像&#xff0c;音频或视频&#xff09;中插入秘密消息。在这些载体中&#xff0c;数字图像因其在互联网上的广泛使用而受到青睐…

软件测试用例设计方法之因果图法

基本概念 因果图是一种利用图解法分析输入的各种组合情况&#xff0c;从而设计测试用例的方法&#xff0c;它适合于检查程序输入条件的各种组合情况。 设计测试用例的步骤 分析软件规格说明描述中, 哪些是原因(即输入条件或输入条件的等价类),哪些是结果(即输出条件), 并给每…

API 接口设计版本管理控制的规范:向后兼容的3个规则

一下文章内容来自之前做API接口时整理的一些内容&#xff0c;记录分享一下。 在HTTP和HTML发展的早期&#xff0c;有着这样一条规则&#xff1a;任何浏览器在遇到无法识别的元素或元素属性时&#xff0c;都应该像该标签不存在一样行事。这使得快速更新HTML的功能成为可能&…

通过代码实现窗口界面布局的方法

在QWidget窗口中添加相关事件resizeEvent()函数并编写相关功能代码&#xff1a; void Widget::resizeEvent(QResizeEvent *event) {QSize szui->plainTextEdit->size();ui->plainTextEdit->move(5,5);ui->pabpic->move(5,sz.height()5);ui->plainTextEd…

c++游戏小技巧12:输入输出流(存读档超全版)

目录 1.前言 2.输入/输出概念 3.流的概念 4.正文 1.标准I/O流 1.get()函数 2.getline()函数 3.read()函数 4.ignore()函数 5.gcount()函数 6.peek()函数 7.putback()函数 8.istream集合栗子 9.put()函数 10.write()函数 11.ostream集合栗子 2.文件I/O流 1.流…

开机时间分析

一、 开机各个阶段分析 1、Bootloader 阶段 Bootloader 阶段 该阶段分为(preloader 和Ik 阶段&#xff09; 从按电源键振动到 kernel 开始启动&#xff0c;这部分高通平台暂无好的方法确认时间&#xff0c;可以从总时间推算大概时间。MTK 项目可以从bootprof 确认 2、kernel…