基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

陆伍發表於 2023-6-17 09:01:00

基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板

最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目，但都是基于vue2开发。随着vite.js破局出圈，越来越多的项目偏向于vue3开发，就想着uniapp搭配vite4.x构建项目效果会如何？经过一番尝试果然真香~
<h3>版本信息</h3>
<div class="cnblogs_code">
<pre>HBuilderX: 3.8.4
Vite: 4.2.1
uView-Plus: 3.1.31</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617074004395-2081949633.jpg">
<h3>创建uniapp+vue3项目</h3>
uniapp官网提供了 HBuilderX 可视化界面、vue-cli命令行 两种方式快速构建项目。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617072324959-1812712686.png">
这次主要讲解通过hbuilderx可视化编辑器创建项目。
<ul>
<li>点击编辑器的文件 > 新建 > 项目（快捷键Ctrl+N）</li>
</ul>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617073210240-2100519722.png">
<ul>
<li>选择uni-app项目，输入项目名/路径，选择项目模板，勾选vue3版本，点击创建，即可成功创建。</li>
</ul>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617073125152-238579915.png">
点击编辑器的运行 > 运行到浏览器 > 选择浏览器
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617074259042-165806752.png">
当然也可以运行到手机或模拟器、运行到小程序工具。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617074421165-2020469475.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617074558064-1389273424.png">
到这里一个简单的uniapp+vue3项目就搭建好了。
<h3>App.vue setup语法</h3>
创建的项目，app.vue是使用vue2写法，如果习惯setup语法糖编码，则改为如下方式，生命周期是通过import引入方式。
<div class="cnblogs_code">
<pre><script setup>
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
onLaunch(() => {
 console.log('App Launch!')
})
onShow(() => {
 console.log('App Show!')
})
onHide(() => {
 console.log('App Hide!')
})
</script></pre>
</div>
<h3>uniapp+pinia状态管理</h3>
uni-app已经内置了vuex和pinia两个状态管理，不需要安装即可使用。这次主要讲解下uniapp里面使用pinia配置。
<ul>
<li>在main.js中引入pinia</li>
</ul>
<div class="cnblogs_code">
<pre>import App from './App'

import uView from '@/uview-plus'

import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'

export function createApp() {
const app = createSSRApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(uView)
return {
 app,
 pinia
}
}</pre>
</div>
<ul>
<li>新建一个store/counter.js文件</li>
</ul>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617075535957-1615060360.png">
<div class="cnblogs_code">
<pre>import { defineStore } from 'pinia'

export const counterStore = defineStore('counter', {
state: () => ({
 count: 0
}),
getters: {},
actions: {
 increment() {
 this.count++
 }
}
})</pre>
</div>
这样基本就引入和创建好了pinia配置文件了，接下来就在.vue页面使用。
<div class="cnblogs_code">
<pre><view>计数：{{counter.count}}</view>
<button @click="handleAdd">增加</button>

<script setup>
import { counterStore } from '@/store/counter'

const counter = counterStore()

const handleAdd = () => {
 counter.increment()
}
</script></pre>
</div>
<h3>引入uniapp+vue3组件库uview-plus 和 uni-ui</h3>
目前支持 uniapp vue3 组件库有uni-ui(官方)，uview-plus等。
<ul>
<li>使用hbuilderx导入uni-ui插件</li>
</ul>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617081400741-1441131976.png">
也可以下载后，直接放在根目录下。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617081538172-2146276696.png">
无需引入、注册即可快速使用。在代码区键入 u ，拉出各种内置或uni-ui的组件列表。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617081809365-1372927505.png">
https://uniapp.dcloud.net.cn/component/uniui/quickstart.html
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617082322887-1990146120.png">
https://uiadmin.net/uview-plus/components/install.html
主要讲解下hbuilderx创建项目，导入uview-plus组件库。
<ul>
<li>使用hbuilderx工具导入</li>
</ul>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617082545783-1998216383.png">
<ul>
<li>引入uview-plus及样式</li>
</ul>
<div class="cnblogs_code">
<pre>// main.js
import uviewPlus from '@/uni_modules/uview-plus'

import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uviewPlus)
return {
app
}
}</pre>
</div>
<div class="cnblogs_code">
<pre>/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';</pre>
</div>
需要在app.vue首行引入基础样式
<div class="cnblogs_code">
<pre><style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-plus/index.scss";
</style></pre>
</div>
如果 不是通过uni_modules方式 导入，而是直接下载在根目录下，则需要额外再配置下easycom引入规则。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617083835498-1684061384.png">
<div class="cnblogs_code">
<pre>import App from './App'

import uView from '@/uview-plus'

import { createSSRApp } from 'vue'

export function createApp() {
const app = createSSRApp(App)
app.use(uView)
return {
 app,
 pinia
}
}

// 在根目录uni.scss中引入主题样式
@import '@/uview-plus/theme.scss';

// 在app.vue中引入基础样式
<style lang="scss">
@import "@/uview-plus/index.scss";
</style></pre>
</div>
<div class="cnblogs_code">
<pre>// pages.json
{
"custom": {
 // 引入uview-plus组件库
 "^u-(.*)": "@/uview-plus/components/u-$1/u-$1.vue"
}

// ...
}</pre>
</div>
<h3>uniapp vue3配置vite.config.js</h3>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617084622020-277920034.png">
基于uniapp+vue3项目还可以自定义配置vite.config.js文件。另外还可以自定义.env环境变量。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617084742043-1782762495.png">
<div class="cnblogs_code">
<pre>import { defineConfig, loadEnv } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { resolve } from 'path'
import { parseEnv } from './utils/env'

export default defineConfig(({ command, mode }) => {
const viteEnv = loadEnv(mode, __dirname)
const env = parseEnv(viteEnv)

return {
 plugins: [
 uni()
 ],

 define: {
 // 自定义配置环境变量
 'process.env.VITE_APPNAME': JSON.stringify('uniapp-vite4-vue3'),
 'process.env.VITE_ENV': env
 },

 /*构建选项*/
 build: {
 // ...
 },
 esbuild: {
 // 打包去除 console.log 和 debugger
 // drop: env.VITE_DROP_CONSOLE && command === 'build' ? ["console", "debugger"] : []
 },

 /*开发服务器选项*/
 server: {
 // 端口
 port: env.VITE_PORT,
 // 运行时自动打开浏览器
 open: env.VITE_OPEN,
 // 代理配置
 proxy: {
 // ...
 }
 }
}
})</pre>
</div>
这样在.vue页面就可以使用process.env环境变量了。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617085053352-1133443170.png">
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617090024549-459695669.png">
以上就是uniapp vue3搭建项目的一些分享，希望对大家有所帮助~ 后续还会分享一些uniapp+vue3实例项目。
<h3>flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手</h3>
<h3>Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板</h3>
<h3>vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果</h3>
<h3>Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板</h3>
往期uniapp+vue3实战项目
<blockquote>
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp-welive仿微信/抖音直播带货|uni-app+vue3+pinia短视频直播商城
</blockquote>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230617085502114-1389365541.gif">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/17487018.html

頁: [1]

琼殿技术论坛's Archiver

基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板