国外创意网站设计欣赏,wordpress已计划,joomla 和 wordpress,成都网站建设939最近项目上要做一个app#xff0c;选择了用uniapp作为开发框架#xff1b;我大概看了一下uniapp的文档#xff0c;根据文档从0到1搭了一个uniapp应用供大家参考。
因为本人习惯使用了WebStorm编译器#xff0c;但是uniapp官方推荐使用HBuilder搭建#xff0c;如果和我一样…最近项目上要做一个app选择了用uniapp作为开发框架我大概看了一下uniapp的文档根据文档从0到1搭了一个uniapp应用供大家参考。
因为本人习惯使用了WebStorm编译器但是uniapp官方推荐使用HBuilder搭建如果和我一样习惯WebStorm或者是vscode其他的编译器进行开发可以选择官方提供的第二种方式利用脚手架命令进行搭建接下来我会以脚手架的方式进行搭建。 一、模板下载
npx degit dcloudio/uni-preset-vue#vite Demo-uniapp 用编辑器打开对应的文件执行pnpm i 下载对应依赖下载完成后pnpm run dev:h5即可启动
//下载依赖
pnpm i//启动
pnpm run dev:h5
运行后就可以看到一个简单的uniapp应用 二、多环境配置
和pc端开发一样我们在开发应用的时候也会分有开发环境和生产环境这里还是使用vite的脚本配置。
在根目录下创建.env.dev和.env.prod文件分别对应的是开发环境和生产环境 在package.json中对应的脚本中补充命令即可这里以h5的命令为例。 在main.js里查看打印结果环境配置是否正确。 执行npm run dev:h5打印的是开发地址npm run build:h5则走的是生产地址。 三、请求配置
基于第二步完成了多环境配置那么我们就可以根据多环境对请求进行统一的封装这里以axios为例。
pnpm install axios
创建src目录下创建utils目录创建request.js文件这是我大概做的请求具体的相应code码可以根据实际情况自行添加。
import axios from axios;const request axios.create({timeout:30000
})//拦截
request.interceptors.request.use(config {switch (config.requestBase){default:config.baseURL import.meta.env.VITE_BASE_APIbreak;}return config
},error {console.log(error)
})//响应
request.interceptors.response.use(response {const res response.dataif(response.status200 res.code){if (res.code ! 200) {uni.showToast({icon:none,title:系统繁忙稍后再试})return Promise.reject(new Error(res.msg || Error))} else {return res}}else{return response}
},error {console.log(error)return Promise.reject(error)
})
export default request
在其他页面使用请求 四、自动导入
pnpm install unplugin-auto-import -D
执行上面的命令后在vite.config.js的plugins中添加自动导入组件即可然后每个vue组件页面里就不用再导入vue和uni了。
import {defineConfig} from vite
import uni from dcloudio/vite-plugin-uni
import AutoImport from unplugin-auto-import/vite
// https://vitejs.dev/config/
export default defineConfig({plugins: [uni(),AutoImport({imports: [vue, uni-app],dts: true})],server: {https: false,host: 0.0.0.0,port:5174,open: true},
})五、状态管理
状态管理我还是选择的是pinia直接执行以下命令在main.js文件中引入
pnpm install pinia//main.js文件import { createSSRApp } from vue;
import App from ./App.vue;
import {createPinia} from pinia;
export function createApp() {const app createSSRApp(App);const store createPinia()app.use(store)console.log(import.meta.env.VITE_BASE_API,---------)return {app,};
}在src目录下创建store文件夹创建一个store进行状态管理。 按照以下方式使用。 六、UI组件
如果uniapp内置的ui库足够你使用那么就不用再额外下载如果需要额外的UI组件可参考以下步骤。
我这里以uview-plus为例按照文档步骤进行下载即可。
uview-plus文档https://uiadmin.net/uview-plus/components/install.html
按照以下命令进行安装相关库。
pnpm install sass1.63.2pnpm install sass-loader10.4.1pnpm install uview-plus在main.js中导入uview-plus组件库。 在uni.scss中导入uview-plus/theme.scss 在App.vue导入uview-plus/index.scss 在pages.json中要配置easycom 最后就可以在组件里使用uview-plus的组件了。 七、demo代码地址
https://github.com/banyan666/Demo-uniapp
