关于UNIAPP使用VUE3的探索过程
情况介绍
由于公司要开发APP，而目前流行的技术是VUE3，所以就想着试试用VUE3来搭建技术框架，想试试看uView框架好不好用，可结果还是失败了！ 保存一下这个过程记录。 后面也会看是否有更好的技术方案来代替。
探索过程
手把手教你搭建一个UNIAPP的项目框架
- 新建项目
菜单 文件-- 新建 左侧选择UINAPP项目，右侧输入项目名称，我这里简单起见就随便命名叫iotdemo，你可以根据业务情况去命名。
选择要创建项目的路径 我这里是 E:/test
模板选择
例如： 可以选择uni-admin 作为后端界面开发模板 可以选择uni-starter 作为移动端界面开发模板
为了更好的进行实践学习，我们选择默认模板，即没有任何的框架辅助，完全自己开发
另外有三个选项
- uniapp-x (支持uvue,纯原生跨平台APP)
- vue版本（单选，版本2或版本3,为了确保技术先进性，选择了版本3）
- 启用uniClound(全端可用的云开发，js快速完成后台业务) 【可以选择支付宝小程序云，阿里云，腾讯云】
1和3默认是不会选的。 可以根据业务需求来进行选择。
点击创建按钮进行创建，创建后，项目目录结构如下
pages
index
index.vue
static
logo.png
App.vue
index.html
main.js
manifest.json
pages.json
uni.promisify.adaptor.js
uni.scss
那么要建设成一种常规模式的APP,显然上面这一个页面上去实现的话，不能很好发挥VUE技术的优势，后期维护起来也会很吃力。
因此我们可以去找一些常用语做UI的技术框架，比如uni-ui,uview,element-ui,vant,weui等等，类似这样的移动端UI非常多，目前适用于做uniapp框架的，大多数是选择uview
我们也使用uview来做界面展示
首先要把uview的库安装上。
在uniapp界面的最底端，窗口状态栏的位置，有一个终端图标 里面的样子是>_ 。 点击这个图标，进入终端命令界面
输入命令
npm install uview-ui
直到安装完成，出现类似如下的信息
+ uview-ui@2.0.38
added 1 package in 3.104s
我们就已经把uview-ui加入到项目中来了。
根目录下面也增加了一个文件夹，就是我们所熟悉的node_modules
在这个下面有个名叫 uview-ui 的文件夹
点开进去后，我们可以在 components文件夹内看到所有uview-ui提供的所有组件
为了更方便的使用uview，我们需要在main.js里面引入uview-ui，代码如下
import Vue from 'vue'
import App from './App'
import uView from 'uview-ui'
Vue.use(uView)
const app = new Vue({
...App
})
app.$mount()
在我生成的代码中，我们只需要补充两句
import uView from 'uview-ui'
Vue.use(uView)
在App.vue中全局引入uview的样式文件
<style>
@import "uview-ui/index.scss";
/* 自定义样式 */
</style>
在我们生成的代码中，在style节点上，只需要补充这句
@import "uview-ui/index.scss";
接下来我们看看怎么使用uview提供的组件
以按钮为例，我们看看按钮怎么出来
我们编辑 pages/index/index.vue
添加一个按钮组件
<u-button text="按钮" class="u-reset-button"></u-button>
uView样式设置的相关文档见连接
https://www.uviewui.com/components/common.html
当我们所有准备工作做完，就运行一下试试。
点击 运行 -- 运行到浏览器 -- chrome(浏览器列表中选择适合你项目的浏览器)
运行结果如下
15:21:31.365 项目 'iotdemo' 开始编译...
15:21:37.415 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。
15:21:37.499 编译器版本：3.99（vue3）
15:21:37.527 正在编译中...
15:21:46.168 编译器版本：3.99（vue3）
15:21:46.170 vite v4.2.1 dev server running at:
15:21:46.198 - Local: http://localhost:5173/
15:21:48.085 * Network: http://192.168.0.141:5173/
15:21:48.105 - Network: http://172.17.11.97:5173/
15:21:48.108 项目 'iotdemo' 编译成功。前端运行日志，请另行在浏览器的控制台查看。
15:21:48.157 点击控制台右上角debug图标（虫子），可开启断点调试（添加断点：双击编辑器行号添加断点）
15:21:48.182 H5版常见问题参考: https://ask.dcloud.net.cn/article/35232
15:21:48.188 ready in 13464ms.
15:21:54.146 Browserslist: caniuse-lite is outdated. Please run:
15:21:54.194 npx update-browserslist-db@latest
15:21:54.205 Why you should do it regularly: https://github.com/browserslist/update-db#readme
15:21:54.881 [postcss] postcss-import: E:\test\dmlapp\iotdemo\node_modules\uview-ui\index.scss:1:1: Unknown word
15:21:54.975 15:21:54 [vite] [plugin:vite:css] [postcss] postcss-import: E:\test\dmlapp\iotdemo\node_modules\uview-ui\index.scss:1:1: Unknown word
15:21:54.976 at node_modules/uview-ui/index.scss:1:1
15:21:54.980 1 |
15:21:54.981 | ^
15:21:54.998 2 | /*每个页面公共css */
15:21:55.000 3 | @import "uview-ui/index.scss";
可以看到有个报错，我猜想是因为style 没有指定lang属性导致的，于是增加了 lang="scss" 重新运行，结果如下
15:21:31.365 项目 'iotdemo' 开始编译...
15:21:37.415 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。
15:21:37.499 编译器版本：3.99（vue3）
15:21:37.527 正在编译中...
15:21:46.168 编译器版本：3.99（vue3）
15:21:46.170 vite v4.2.1 dev server running at:
15:21:46.198 - Local: http://localhost:5173/
15:21:48.085 * Network: http://192.168.0.141:5173/
15:21:48.105 - Network: http://172.17.11.97:5173/
15:21:48.108 项目 'iotdemo' 编译成功。前端运行日志，请另行在浏览器的控制台查看。
15:21:48.157 点击控制台右上角debug图标（虫子），可开启断点调试（添加断点：双击编辑器行号添加断点）
15:21:48.182 H5版常见问题参考: https://ask.dcloud.net.cn/article/35232
15:21:48.188 ready in 13464ms.
15:21:54.146 Browserslist: caniuse-lite is outdated. Please run:
15:21:54.194 npx update-browserslist-db@latest
15:21:54.205 Why you should do it regularly: https://github.com/browserslist/update-db#readme
15:21:54.881 [postcss] postcss-import: E:\test\dmlapp\iotdemo\node_modules\uview-ui\index.scss:1:1: Unknown word
15:21:54.975 15:21:54 [vite] [plugin:vite:css] [postcss] postcss-import: E:\test\dmlapp\iotdemo\node_modules\uview-ui\index.scss:1:1: Unknown word
15:21:54.976 at node_modules/uview-ui/index.scss:1:1
15:21:54.980 1 |
15:21:54.981 | ^
15:21:54.998 2 | /*每个页面公共css */
15:21:55.000 3 | @import "uview-ui/index.scss";
15:24:25.434 已停止运行...
15:24:25.682 项目 'iotdemo' 开始编译...
15:24:28.213 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。
15:24:28.214 编译器版本：3.99（vue3）
15:24:28.217 正在编译中...
15:24:30.020 已停止运行...
15:24:31.163 项目 'iotdemo' 开始编译...
15:24:33.618 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。
15:24:33.618 编译器版本：3.99（vue3）
15:24:33.621 正在编译中...
15:24:36.263 编译器版本：3.99（vue3）
15:24:36.269 vite v4.2.1 dev server running at:
15:24:36.277 - Local: http://localhost:5173/
15:24:38.042 * Network: http://192.168.0.141:5173/
15:24:38.064 - Network: http://172.17.11.97:5173/
15:24:38.077 项目 'iotdemo' 编译成功。前端运行日志，请另行在浏览器的控制台查看。
15:24:38.091 点击控制台右上角debug图标（虫子），可开启断点调试（添加断点：双击编辑器行号添加断点）
15:24:38.093 H5版常见问题参考: https://ask.dcloud.net.cn/article/35232
15:24:38.116 ready in 3928ms.
15:24:38.857 Browserslist: caniuse-lite is outdated. Please run:
15:24:38.857 npx update-browserslist-db@latest
15:24:38.863 Why you should do it regularly: https://github.com/browserslist/update-db#readme
15:24:38.863 [sass] Undefined variable.
15:24:38.880 ╷
15:24:38.902 38 │ border-color: $u-border-color!important;
15:24:38.911 │ ^^^^^^^^^^^^^^^
15:24:38.912 ╵
15:24:38.921 E:\test\dmlapp\iotdemo\node_modules\uview-ui\libs\css\common.scss 38:16 @import
15:24:38.922 E:\test\dmlapp\iotdemo\node_modules\uview-ui\index.scss 2:9 @import
15:24:38.928 E:\test\dmlapp\iotdemo\App.vue 80:10 root stylesheet
15:24:39.303 [vite] connecting...
15:24:39.309 [vite] connected.
15:24:39.562 15:24:39 [vite] [plugin:vite:css] [sass] Undefined variable.
15:24:39.562 ╷
15:24:39.566 38 │ border-color: $u-border-color!important;
15:24:39.567 │ ^^^^^^^^^^^^^^^
15:24:39.570 ╵
15:24:39.570 E:\test\dmlapp\iotdemo\node_modules\uview-ui\libs\css\common.scss 38:16 @import
15:24:39.576 E:\test\dmlapp\iotdemo\node_modules\uview-ui\index.scss 2:9 @import
15:24:39.587 E:\test\dmlapp\iotdemo\App.vue 80:10 root stylesheet
15:24:39.599 at node_modules/uview-ui/libs/css/common.scss:38:16
15:24:39.602 Error: Undefined variable.
15:24:39.605 ╷
15:24:39.607 38 │ border-color: $u-border-color!important;
15:24:39.620 │ ^^^^^^^^^^^^^^^
15:24:39.622 ╵
15:24:39.626 E:\test\dmlapp\iotdemo\node_modules\uview-ui\libs\css\common.scss 38:16 @import
15:24:39.627 E:\test\dmlapp\iotdemo\node_modules\uview-ui\index.scss 2:9 @import
15:24:39.640 E:\test\dmlapp\iotdemo\App.vue 80:10 root stylesheet
15:24:40.359 15:24:40 [vite] [plugin:vite:css] [sass] Undefined variable.
15:24:40.360 ╷
15:24:40.368 38 │ border-color: $u-border-color!important;
15:24:40.369 │ ^^^^^^^^^^^^^^^
15:24:40.373 ╵
15:24:40.374 E:\test\dmlapp\iotdemo\node_modules\uview-ui\libs\css\common.scss 38:16 @import
15:24:40.384 E:\test\dmlapp\iotdemo\node_modules\uview-ui\index.scss 2:9 @import
15:24:40.385 E:\test\dmlapp\iotdemo\App.vue 80:10 root stylesheet
15:24:40.390 at node_modules/uview-ui/libs/css/common.scss:38:16
15:24:40.391 Error: Undefined variable.
15:24:40.394 ╷
15:24:40.395 38 │ border-color: $u-border-color!important;
15:24:40.400 │ ^^^^^^^^^^^^^^^
15:24:40.401 ╵
15:24:40.404 E:\test\dmlapp\iotdemo\node_modules\uview-ui\libs\css\common.scss 38:16 @import
15:24:40.404 E:\test\dmlapp\iotdemo\node_modules\uview-ui\index.scss 2:9 @import
15:24:40.407 E:\test\dmlapp\iotdemo\App.vue 80:10 root stylesheet
从报错问题来看，是说$u-border-color这个变量未定义，于是找找看是否有解决问题的方法
参考网上的说法，在uni.css中引入uView颜色定义
在 /* 颜色变量 */ 这行注释的下面把uView的样式文件引入进来。网上的写法用的是相对根目录的路径。而我是用如下的写法：
@import "uview-ui/theme.scss";
问题解决。页面也能正常展示，由于按钮没设置宽度和高度，这样是看不到我们加的按钮样式了。
于是修改按钮的样式，给他增加一些宽度高度。
增加了一个样式 my-button
.my-button{
width:200rpx;
height: 60rpx;
}
按钮的class 里面也增加 my-button
有了宽度和高度，还是看不见，再看一下日志，发现有以下报错
15:37:55.535 [Vue warn]: Failed to resolve component: u-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <Index>
at <AsyncComponentWrapper>
at <PageBody>
at <Page>
at <Anonymous>
at <Layout>
at <App>
上网查找解决问题的方法的时候发现未注册
Uncaught TypeError: Vue.filter is not a function
at Object.install (index.js:65:9)
at Object.use (vue.runtime.esm.js:5757:28)
at createApp (main.js:24:7)
at main.js:30:2