个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
27
4
最近得空学习了下uniapp结合vue3搭建跨端项目。之前也有使用uniapp开发过几款聊天/仿抖音/后台管理等项目，但都是基于vue2开发。随着vite.js破局出圈，越来越多的项目偏向于vue3开发，就想着uniapp搭配vite4.x构建项目效果会如何？经过一番尝试果然真香~ 。
HBuilderX:
3.8
.
4
Vite:
4.2
.
1
uView
-Plus:
3.1
.
31
uniapp官网提供了 HBuilderX 可视化界面 、 vue-cli命令行 两种方式快速构建项目.
这次主要讲解通过hbuilderx可视化编辑器创建项目.
点击编辑器的运行 > 运行到浏览器 > 选择浏览器 。
当然也可以运行到手机或模拟器、运行到小程序工具.
到这里一个简单的uniapp+vue3项目就搭建好了.
创建的项目，app.vue是使用vue2写法，如果习惯setup语法糖编码，则改为如下方式，生命周期是通过import引入方式.
<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>
uni-app已经内置了vuex和pinia两个状态管理，不需要安装即可使用。这次主要讲解下uniapp里面使用pinia配置.
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
}
}
import { defineStore } from 'pinia'
export const counterStore
= defineStore('counter'
, {
state: ()
=>
({
count:
0
}),
getters: {},
actions: {
increment() {
this
.count++
}
}
})
这样基本就引入和创建好了pinia配置文件了，接下来就在.vue页面使用.
<
view
>
计数：{{counter.count}}
</
view
>
<
button
@click
="handleAdd"
>
增加
</
button
>
<
script
setup
>
import { counterStore } from
'
@/store/counter
'
const counter
=
counterStore()
const handleAdd
=
()
=>
{
counter.increment()
}
</
script
>
目前支持 uniapp vue3 组件库有uni-ui(官方)，uview-plus等.
也可以下载后，直接放在根目录下.
无需引入、注册即可快速使用。在代码区键入 u ，拉出各种内置或uni-ui的组件列表.
https://uniapp.dcloud.net.cn/component/uniui/quickstart.html 。
https://uiadmin.net/uview-plus/components/install.html 。
主要讲解下hbuilderx创建项目，导入uview-plus组件库.
//
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
}
}
/*
uni.scss
*/
@import '@/uni_modules/uview-plus/theme.scss';
需要在app.vue首行引入基础样式 。
<style lang="scss">
/*
注意要写在第一行，同时给style标签加入lang="scss"属性
*/
@import "@/uni_modules/uview-plus/index.scss";
</style>
如果 不是通过uni_modules方式 导入，而是直接下载在根目录下，则需要额外再配置下easycom引入规则.
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>
//
pages.json
{
"
custom
"
: {
//
引入uview-plus组件库
"
^u-(.*)
"
:
"
@/uview-plus/components/u-$1/u-$1.vue
"
}
//
...
}
基于uniapp+vue3项目还可以自定义配置vite.config.js文件。另外还可以自定义.env环境变量.
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: {
//
...
}
}
}
})
这样在.vue页面就可以使用process.env环境变量了.
以上就是uniapp vue3搭建项目的一些分享，希望对大家有所帮助~ 后续还会分享一些uniapp+vue3实例项目.
。
最后此篇关于基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板的文章就讲到这里了,如果你想了解更多关于基于uniapp+vite4+vue3搭建跨端项目|uni-app+uview-plus模板的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
27
4
0
如果我调用一个应用程序两次或多次，但只有一个实例应该运行(这是所需的)，我就会遇到一个问题。 首先一些(可能必要的)背景信息: 使用 MAC OS X El Capitan (10.11.6) 我有一
覆盖文件。覆盖 Apps 脚本文件。 这是不是 创建一个新的 Apps 脚本文件的问题。那对我没有帮助。我需要更新 现有的 Apps 脚本文件。这个问题类似于创建一个新文件，但不是同一个问题。更新的语
我是 Apps 脚本的新手，正在尝试了解使用另一个帐户在一个帐户中运行/触发脚本的基础知识。需要注意的是:我想在访问脚本的用户而不是拥有脚本的用户的情况下运行脚本——以便将运行时间分配给访问的用户。
我是 Apps 脚本的新手，正在尝试了解使用另一个帐户在一个帐户中运行/触发脚本的基础知识。需要注意的是:我想在访问脚本的用户而不是拥有脚本的用户的情况下运行脚本——以便将运行时间分配给访问的用户。
我有一个安卓应用程序。我想为我的应用程序实现 App Indexing。 我已经点击了 Google 开发者链接 https://developers.google.com/app-indexing/
有什么区别: import App from '../components/App'; 和 var App = require('../components/App'); 两者都用于获取组件，但它没有
问题: 我有一个使用 requireJS 的简单演示应用程序。当require.min.js脚本加载时，它尝试加载入口点脚本。但是，问题是，而不是 localhost:8090/js/app.js它尝
我正在构建一个 React Native 应用程序，目前正在尝试通过 Firebase Auth 实现一个身份验证注册系统。我已经按照指南/网站上的文档来设置 Firebase 配置文件。我运行该应用
因此 app.yaml 文件的一部分如下所示(至少在 GAE 教程中): handlers: - url: /.* script: main.app 但是，我也看到它看起来像这样: handler
我是Android App开发的新手。当我尝试创建一个新项目Android Project时，弹出以下消息: Information:Gradle tasks [:app:generateDebugS
我正在编写一个应用程序脚本(用于处理电子邮件、任务和日历事件)并希望将其部署为网络应用程序。 该应用程序将在运行它的用户的上下文中运行。该应用程序将被超过 10k+ 的用户使用，甚至可能更多。 在将其
我需要实现一个用于登录网站的 Google Apps 脚本应用，然后如果该网站上的身份验证过程成功，用户应该会在 google 脚本边栏中收到一条消息。 例如:用户输入他的邮箱和密码，然后他点击登录按
我正在开发一个跨平台应用程序，它将在 Google Play 商店和 App Store 上发布。 Google Play 政策以及 App Store 政策规定，您不能使用其他支付系统购买将在应用程
我的 AppEngine 应用程序在我的台式机上的开发服务器上运行良好，但我无法在 Google 服务器上获取版本以关注我的源代码更新。 这是最有说服力的例证。我的 app.yaml 文件开始于: a
我像这样将所有内容重定向到我的 app.yaml 中的单个文件 - url: /.* script: frontcontroller.application 但我仍然必须使用 robots.txt
我想构建一个基于 App Engine 的网络应用程序，并使用 Google 帐户对用户进行身份验证。我需要来自多个域的用户可以登录。从我读到的内容看来，仅使用 Google Accounts API
我无法将我的域指向我使用 Google App Engine 托管的网站。这是背景……注意区分“google apps”(域托管、电子邮件等)和“google app engine”(网站框架)的概念
是否可以通过 App Engine 上内置的 OpenId 实现单点登录？我一直在尝试集成一个 Marketplace 应用程序，并让用户在来自 Google Apps(管理面板或通用导航)时登录。我
有没有办法从 azure-cli 为 Web 应用或函数应用创建和/或激活 App Insights？ 现在浏览文档。 最佳答案 我之前也考虑过你的问题。要创建应用程序洞察力，az resource
我在以 Angular 创建新项目时遇到问题。当我运行 ng new myapp 命令时，我得到以下命令 ng 新问候语 Error: Path "/app/app.module.ts" does n
我是一名优秀的程序员,十分优秀！