vue-cli创建uniapp项目

为什么使用vue-cli 搭建uniapp ?

想对于Hbuilder开发uniapp，VSCODE 是主要的生产软件。
考虑发布多套小程序以及app版本，vue-cli具有更好的版本迭代编译能力。

全局安装vue-cli/g npm install -g @vue/cli //安装命令 vue create -p dcloudio/uni-preset-vue 项目名称

例如：vue create -p dcloudio/uni-preset-vue uniapp-vue-cli 初始化完成以后会构建模版，首次体验选择hello uniapp的模板

若首次运行报错：Error: PostCSS plugin autoprefixer requires PostCSS 8. 如果未安装postCss则安装postCss： 若首次运行报错：Error: PostCSS plugin autoprefixer requires PostCSS 8.`

如果未安装postCss则安装postCss： npm install --save-dev postcss@8

启动项目 npm run serve 使用cli创建项目默认不带css预编译，需要手动安装一下，这里已sass为例

npm i sass --save-dev npm i sass-loader --save-dev

vue-cli创建的项目为例，整体架构配置如下：

arduino 复制代码

    ├──dist 编译后的文件路径
    ├──package.json 配置项
	├──src 核心内容
        ├──api 项目接口
        ├──components 全局公共组件
        ├──config 项目配置文件
        ├──pages 主包
        ├──static 全局静态资源
        ├──store vuex
        ├──mixins 全局混入
        ├──utils 公共方法
        ├──App.vue 应用配置，配置App全局样式以及监听
        ├──main.js Vue初始化入口文件
        ├──manifest.json 配置应用名称、appid等打包信息
        ├──pages.json 配置页面路由、导航条、选项卡等页面类信息
        └──uni.scss 全局样式

封装常用方法

常用的方法根据功能分为不同的js文件缓存操作（设置/获取/删除/清空）

js 复制代码

/**
 * 缓存操作
 * @param {String} val
 */
export function setStorageSync(key, data) {
    uni.setStorageSync(key, data)
}

export function getStorageSync(key) {
    return uni.getStorageSync(key)
}

export function removeStorageSync(key) {
    return uni.removeStorageSync(key)
}

export function clearStorageSync() {
    return uni.clearStorageSync()
}

页面路由跳转

js 复制代码

/**
 * 页面跳转
 * @param {'navigateTo' | 'redirectTo' | 'reLaunch' | 'switchTab' | 'navigateBack' | number } url  转跳路径
 * @param {String} params 跳转时携带的参数
 * @param {String} type 方式
 **/
export function useRouter(url, params = {}, type = 'navigateTo') {
    try {
        if (Object.keys(params).length) url = `${url}?data=${encodeURIComponent(JSON.stringify(params))}`
        if (type === 'navigateBack') {
            uni[type]({ delta: url })
        } else {
            uni[type]({ url })
        }
    } catch (error) {
        console.error(error)
    }
}

图片本地下载

js 复制代码

/**
 * 保存图片到本地
 * @param {String} filePath 图片临时路径
 **/
export function saveImage(filePath) {
    if (!filePath) return false
    uni.saveImageToPhotosAlbum({
        filePath,
        success: (res) => {
            toast('图片保存成功', 'success')
        },
        fail: (err) => {
            if (err.errMsg === 'saveImageToPhotosAlbum:fail:auth denied' || err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
                uni.showModal({
                    title: '提示',
                    content: '需要您授权保存相册',
                    showCancel: false,
                    success: (modalSuccess) => {
                        uni.openSetting({
                            success(settingdata) {
                                if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                    uni.showModal({
                                        title: '提示',
                                        content: '获取权限成功,再次点击图片即可保存',
                                        showCancel: false
                                    })
                                } else {
                                    uni.showModal({
                                        title: '提示',
                                        content: '获取权限失败，将无法保存到相册哦~',
                                        showCancel: false
                                    })
                                }
                            },
                            fail(failData) {
                                console.log('failData', failData)
                            }
                        })
                    }
                })
            }
        }
    })
}

request请求封装

对请求方式进行二次封装，建立request.js

js 复制代码

import {toast, clearStorageSync, getStorageSync, useRouter} from './utils'
import {BASE_URL} from '@/config/index'

const baseRequest = async (url, method, data, loading = true) =>{
	header.token = getStorageSync('token') || ''
	return new Promise((reslove, reject) => {
	loading && uni.showLoading({title: 'loading'})
        uni.request({
                url: BASE_URL + url,
                method: method || 'GET',
                header: header,
                timeout: 10000,
                data: data || {},
                success: (successData) => {
                    const res = successData.data
                    uni.hideLoading()
                    if(successData.statusCode == 200){
                            if(res.resultCode == 'PA-G998'){
                                    clearStorageSync()
                                    useRouter('/pages/login/index', 'reLaunch')
                            }else{
                                    reslove(res.data)
                            }
                    }else{
                            toast('网络连接失败，请稍后重试')
                            reject(res)
                    }
                },
                fail: (msg) => {
                    uni.hideLoading()
                    toast('网络连接失败，请稍后重试')
                    reject(msg)
                }
        })
    })
}

const request = {};

['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
	request[method] = (api, data, loading) => baseRequest(api, method, data, loading)
})

export default request

请求封装好以后，我们在/src/api文件夹下按业务模块建立对应的api文件，拿获取用户信息接口举例子：在/src/api文件夹下建立user.js，然后引入request.js

js 复制代码

import request from '@/utils/request' //个人信息 export const info = data => request.post('/v1/api/info', data)

到这里就基本结束了vue-cli搭建uniapp的全过程。