uniapp创建项目——vue3+vite

86 篇文章 0 订阅
22 篇文章 0 订阅

创建项目命令

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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip ## 简介 vue-element-perfect 是一个后台前端解决方案,它使用了最新的前端技术栈、动态路由,权限验证,并且有着丰富的组件,企业级中后台解决方案,可免费商用,同时支持PC、平板、手机 ## 项目功能 - 使用Vue3.0开发,单文件组件采用<script setup> - 采用 Vite3 作为项目开发、打包工具(配置了 Gzip 打包、TSX 语法、跨域代理) - 整个项目集成了 TypeScript - 登录逻辑,使用vue-router进行路由权限拦截,判断,路由懒加载 - 使用 keep-alive 对整个页面进行缓存,支持多级嵌套页面 - 侧边栏导航菜单栏动态的显示 - 各种可视化地图组件 - 使用 Pinia替代 Vuex,轻量、简单、易用 - 导出excel,自定义样式导出excel、多表头导出 - 表单、表格、水印、多标签显示、打印功能,图片打印、表格打印、普通打印、二维码、拖拽、markdown、头像裁剪、图片上传... - 使用 Prettier 统一格式化代码,集成 Eslint、代码校验规范 ## 安装 ``` ## 分支管理 - master 技术采用 vite + vue3.0 + Typescript + pinia - vue-admin-simple 简易版本 - vite-vuex vite + vue3.0 + Typescript + vuex - vue-i18n 语言切换版本 - webpack 技术采用 webpack + vue3.0 + Typescript + vuex - uniapp uniapp版本 uniapp +vuex +element scss ``` # 本地开发 启动项目 借助hbuilder工具运行浏览器启动 ``` ## 下载依赖 ``` npm install cnpm install yarn # npm install 安装失败,请升级 nodejs 到 16 以上,或尝试使用以下命令: npm install --registry=https://registry.npm.taobao.org ``` ## 运行打包 ``` npm run dev npm run build ``` ## eslint+prettier ``` # eslint 检测代码 npm run lint #prettier 格式化代码 npm run lint:prettier ``` ## 文件目录结构 ``` vue-admin-perfect ├─ public # 静态资源文件(忽略打包) ├─ src │ ├─ api # API 接口管理 │ ├─ assets # 静态资源文件 │ ├─ components # 全局组件 │ ├─ config # 全局配置项 │ ├─ hooks # 常用 Hooks │ ├─ language # 语言国际化 │ ├─ layout # 框架布局 │ ├─ routers # 路由管理 │ ├─ store # pinia store │ ├─ styles # 全局样式 │ ├─ utils # 工具库 │ ├─ views # 项目所有页面 │ ├─ App.vue # 入口页面 │ └─ main.ts # 入口文件 ├─ .env # vite 常用配置 ├─ .env.development # 开发环境配置 ├─ .env.production # 生产环境配置 ├─ .env.test # 测试环境配置 ......

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值