uniapp创建项目——vue3+vite

Vue3 模板初始化与常用组件

最新推荐文章于 2025-09-30 14:01:58 发布

原创最新推荐文章于 2025-09-30 14:01:58 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

javascript 同时被 3 个专栏收录

124 篇文章

订阅专栏

Vue

87 篇文章

订阅专栏

HTML5

22 篇文章

订阅专栏

本文介绍了如何使用npx degit创建Vue3项目，并展示了基础的Vue3模板，包括引用vue、vue-router、vuex的常用方法，如ref、toRefs、onMounted等。同时，提供了模板中用于初始化的组件结构，包括<script setup>语法和<style lang=scss>样式定义。

创建项目命令

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

在创建新的页面时，会有模板选择。
在这里插入图片描述
创建常用模板：
在一下的目录下创建一个文件，将常用的模板放进去

常用的vue3初始化模板

<script setup>
import { ref, toRefs, onMounted, reactive, defineProps } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const route = useRoute()
const store = useStore()
onMounted(() => {
})
</script>
<template>
<view class='container'>
</view>
</template>
<style lang="scss" >
.container {
}
</style>