前端 - 使用uniapp+vue搭建前端项目（app端）
文章目录
前提概要
此次搭建的项目是在移动端使用，一款轻量级的app软件，操作简单，在公司也可以用哦，快快学起来吧~
代码编写工具：HBuilder
代码编写语言：uniapp+Vue2
代码使用的组件库：uView+uni-app
项目搭建
1、打开HBuilder工具，选择文件->新建->项目
2、下载依赖，需要先手动创建package.json文件，在自定义文件的最外层
手动编写代码，让后续有地方添加依赖( 注意：添加的依赖是需要再终端用命令下载的，手动在package文件中编写无效 )
{
"dependencies": {
}
}
打开终端 ctrl+` 下载下方中的依赖（按需添加即可）
例如: npm i axios@1.6.5 --save
axios:1.6.5 -- 用于发送请求
crypto-js:4.2.0 -- 加密解密
echarts：3.8.4 -- 图表
qs：6.11.2 -- 字符串和对象之间的转换（序列化和反序列化）
uni-ui: 1.0.0 -- 允许使用uiapp组件
uview-ui:最新 -- 允许使用uview组件
vue-router:4.3.0 -- 路由
node-sass:7.0.1
sass-loader8.0.2 --这两者需要考虑版本对应问题，用于将scss转换为css文件的
3、创建文件夹
1、utils 存放工具如加密解密文件等
2、components 存放组件
3、static 存放静态文件
4、api 发送请求的文件
4、创建忽略文件 .gitignore
在使用git管理代码时将不需要提交的忽略
.idea/
*.log
*.bak
.user.ini
.vscode/
.history
.idea
.DS_Store
.hbuilderx
node_modules/
unpackage/
5、创建vue.config.js文件 ，解决跨域问题（方便后面调用后端接口）
module.exports = {
devServer: {
port: 8080,
proxy: {
"/": {
target: "https://xxx.xxx.com", //这里放后端的域名
//也可以调用自己本地或者他人本地的代码 例如http://10.74.52.66:8080/xx
ws: true,
changeOrigin: true,
pathRewrite: {
"^/": "/"
}
},
},
},
};
6、使用uview
下载依赖后，还需要再官网下载zip地址
需要使用到的uview-ui文件夹在uni-modules文件夹里面，需要挪出来放在最外层（dcloud插件库）
将uview全局注册到main.js
import App from './App'
import uView from "uview-ui";
Vue.use(uView);
在app.vue中使用css样式
app.vue
<style lang="scss">
@import 'uview-ui/index.scss';
</style>
在根目录下创建uni.scss文件
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
@import 'uview-ui/theme.scss';
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
在pages.json中编写(跟pages同级)
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
7、配套axios发送请求(这里就能请求后端接口了)
在api下创建http.js
import axios from 'axios'
const service = axios.create({
baseURL: '',
headers: {
'Content-Type': 'application/json'
},
timeout: 10000,
});
// 请求拦截
service.interceptors.request.use(
async (config) => {
config.url = '/xxx' + config.url // 设置公共url
const staffId = await getStaffId();
if (staffId) {
config.headers.UserId = staffId; // 在headers中添加指定参数，传递给后端
}
uni.showLoading({
title: '加载中' // 发送请求时显示加载
});
return config;
},
(error) => {
Promise.reject(error);
}
);
// 返回拦截
service.interceptors.response.use((response) => {
const res = response.data;
uni.hideLoading(); //
return res;
}, () => {});
async function getStaffId() {
//请求时需要判断是否有id字段
return new Promise((resolve) => {
const staffId = localStorage.getItem('id');
if (staffId) {
resolve(staffId);
} else {
// 如果staffId不存在，则等待100毫秒后再次尝试获取
setTimeout(() => {
const staffId = localStorage.getItem('id');
resolve(staffId);
}, 100);
}
});
}
export default service;
在api文件下新建index.js
/**
* request.js
* 通过promise对axios做二次封装，针对用户端参数，做灵活配置
*/
import instance from './http.js'
import {
encrypt
} from '../utils/encryp.js'
function request(url, params, options, method) {
return new Promise((resolve, reject) => {
let data = {}
// 参数加密 有些参数传递给后端需要加密处理，有些不需要
for (var item in params) {
if (item != 'pageNo') {
params[item] = encrypt(params[item]);
}
}
if (method == 'get') data = {
params
}
// post请求使用data字段
if (method == 'post') data = {
data: params
}
instance({
url,
method,
...data
})
.then((res) => {
if (res.status == 200) {
resolve(res);
} else {
// 通过配置可关闭错误提示
reject(res);
}
})
.catch((error) => {})
.finally(() => {})
})
}
// 封装GET请求
function get(url, params, options) {
return request(url, params, options, 'get')
}
// 封装POST请求
function post(url, params, options) {
return request(url, params, options, 'post')
}
export default {
get,
post
}
在main,js中注册
import request from './api/index.js'
Vue.prototype.$http = request;
调用(这里只需要写公共路径后的路径就可以，因为发送请求时会自动带上api/http里面的头部url)
this.$http.post(
'/myStage/myTask/xxx',
{
taskId:val.taskId,
taskProgressId:val.taskProgressId,
fileUrl:val.resourceFiles[0].fileUrl
})
.then(res => {
console.log(res);
})
到这里一个简单的项目已经搭建完成了，后续需要什么东西需要自己再往里面加，如果对你有帮助的话，点个赞吧~
原文地址：https://blog.csdn.net/qq_52998673/article/details/140398623
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！