前端 - 使用uniapp+vue搭建前端项目（app端）

文章目录

前提概要

此次搭建的项目是在移动端使用，一款轻量级的app软件，操作简单，在公司也可以用哦，快快学起来吧~

代码编写工具：HBuilder

代码编写语言：uniapp+Vue2

代码使用的组件库：uView+uni-app

项目搭建

1、打开HBuilder工具，选择文件->新建->项目

2、下载依赖，需要先手动创建package.json文件，在自定义文件的最外层

手动编写代码，让后续有地方添加依赖( 注意：添加的依赖是需要再终端用命令下载的，手动在package文件中编写无效 )

{"dependencies":{}}

打开终端 ctrl+` 下载下方中的依赖（按需添加即可）

例如:  npm i [email protected]  --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
<stylelang="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 // 设置公共urlconst staffId =awaitgetStaffId();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;},()=>{});asyncfunctiongetStaffId(){//请求时需要判断是否有id字段returnnewPromise((resolve)=>{const staffId = localStorage.getItem('id');if(staffId){resolve(staffId);}else{// 如果staffId不存在，则等待100毫秒后再次尝试获取setTimeout(()=>{const staffId = localStorage.getItem('id');resolve(staffId);},100);}});}exportdefault service;

在api文件下新建index.js

/**
 * request.js
 * 通过promise对axios做二次封装，针对用户端参数，做灵活配置
 */import instance from'./http.js'import{
    encrypt
}from'../utils/encryp.js'functionrequest(url, params, options, method){returnnewPromise((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请求functionget(url, params, options){returnrequest(url, params, options,'get')}// 封装POST请求functionpost(url, params, options){returnrequest(url, params, options,'post')}exportdefault{
    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);})

到这里一个简单的项目已经搭建完成了，后续需要什么东西需要自己再往里面加，如果对你有帮助的话，点个赞吧~