uniapp项目使用vue3

*小天屎*

已于 2022-06-12 21:12:55 修改

阅读量2.3w

点赞数 4

分类专栏： vue uniapp 文章标签： html javascript

于 2021-08-31 10:36:57 首次发布

本文链接：https://blog.csdn.net/weixin_44575130/article/details/120011896

版权

vue 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

uniapp

7 篇文章 1 订阅

订阅专栏

uniapp项目使用vue3

1.首先创建普通uniapp项目
2.找到manifest.json文件vue版本选择 选择3

在这里插入图片描述

3.重新运行提示： 请确认您的项目模板是否支持vue3:根目录缺少 index.html
在根目录下创建index.html，模板已放在下方

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

4.再更改main.js文件

在这里插入图片描述

import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
   const app = createSSRApp(App)
   return {
      app
   }
}

5.使用composition-api

在这里插入图片描述

6. 使用uniapp内部生命周期钩子

// 官方例子
<script>
  import {
    onLoad,
    onShow,
  } from "@dcloudio/uni-app";

  export default {
    setup() {
      // onLoad 接受 A 页面传递的参数
      onLoad((option) => {
        console.log("B 页面 onLoad:", option); //B 页面 onLoad: {id: '1', name: 'uniapp'}
      });

      onShow(() => {
        console.log("B 页面 onShow");
      });
    }
  }
</script>

更多问题可以访问官网查看

*小天屎*

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
uniapp项目使用vue3

uniapp项目使用vue31.首先创建普通uniapp项目2.找到manifest.json文件vue版本选择选择33.重新运行提示：请确认您的项目模板是否支持vue3:根目录缺少 index.html在根目录下创建index.html，模板已放在下方<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
复制链接

扫一扫