Vite-Uniapp-Template 使用教程

Vite-Uniapp-Template 使用教程

vite-uniapp-template🚀 基于 vitejs 驱动的 uniapp 最佳实践集成模板项目地址:https://gitcode.com/gh_mirrors/vi/vite-uniapp-template

1. 项目的目录结构及介绍

vite-uniapp-template/
├── github/
│   └── workflows/
├── src/
│   ├── env/
│   │   ├── development.env
│   │   └── production.env
│   ├── components/
│   ├── pages/
│   ├── App.vue
│   ├── main.ts
│   ├── manifest.json
│   ├── pages.config.js
│   └── uni.scss
├── .gitignore
├── .npmrc
├── .yarnrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── eslint.config.js
├── index.html
├── jsconfig.json
├── package.json
├── pages.config.js
├── postcss.config.js
├── unocss.config.js
└── vite.config.js

目录结构介绍

• github/workflows/: 包含GitHub Actions的工作流配置文件。
• src/: 项目的源代码目录。
  • env/: 包含开发和生产环境的配置文件。
  • components/: 存放Vue组件。
  • pages/: 存放页面组件。
  • App.vue: 主应用组件。
  • main.ts: 项目的入口文件。
  • manifest.json: UniApp的配置文件。
  • pages.config.js: 页面配置文件。
  • uni.scss: 全局样式文件。
• .gitignore: Git忽略文件配置。
• .npmrc: npm配置文件。
• .yarnrc: yarn配置文件。
• CHANGELOG.md: 更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• eslint.config.js: ESLint配置文件。
• index.html: 项目的主HTML文件。
• jsconfig.json: JavaScript配置文件。
• package.json: 项目依赖和脚本配置。
• pages.config.js: 页面配置文件。
• postcss.config.js: PostCSS配置文件。
• unocss.config.js: UnoCSS配置文件。
• vite.config.js: Vite配置文件。

2. 项目的启动文件介绍

入口文件

• main.ts: 项目的入口文件，负责初始化Vue实例和挂载到DOM中。

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

主应用组件

• App.vue: 主应用组件，包含应用的根组件和全局样式。

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
/* 全局样式 */
</style>

3. 项目的配置文件介绍

Vite配置文件

• vite.config.js: Vite的配置文件，包含项目的基本配置、插件和优化选项。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [vue(), uni()],
  // 其他配置选项
})

UnoCSS配置文件

• unocss.config.js: UnoCSS的配置文件，定义原子化CSS的规则和预设。

import { defineConfig } from 'unocss'
import { presetUno, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
  ],
  // 其他配置选项
})

ESLint配置文件

• eslint.config.js: ESLint的配置文件，定义代码风格和规则。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-

vite-uniapp-template🚀 基于 vitejs 驱动的 uniapp 最佳实践集成模板项目地址:https://gitcode.com/gh_mirrors/vi/vite-uniapp-template