uni-app vite vue3 tailwindcss 模板快速入门教程

uni-app vite vue3 tailwindcss 模板快速入门教程

项目地址:https://gitcode.com/gh_mirrors/un/uni-app-vite-vue3-tailwind-vscode-template

1. 项目目录结构及介绍

该模板项目采用了标准的Vue3和Vite组织方式，下面是主要的目录结构及其功能：

.
├── public        # 静态资源目录，会被原封不动地复制到构建结果中
│   └── index.html # 应用的入口HTML文件
├── src           # 主要的源码目录
│   ├── api       # 存放API接口请求文件
│   ├── assets    # 图片和其他非CSS/JS静态资产
│   ├── components # 业务组件目录
│   ├── layouts    # 应用布局
│   ├── pages      # 页面组件
│   ├── plugins    # 自定义插件
│   ├── store      # Vuex状态管理
│   ├── styles     # 全局样式
│   ├── tests      # 测试文件
│   ├── utils      # 工具函数
│   ├── App.vue    # 应用入口组件
│   ├── main.js    # 应用主入口文件
│   └── router.js  # 路由配置
└── vite.config.js # Vite配置文件

2. 项目的启动文件介绍

src/main.js

这是应用的主入口文件，用于初始化Vue3实例并导入必要的插件。在这里，你可以设置Vue全局配置，注册自定义指令，以及挂载根组件。

public/index.html

这个是应用的HTML入口文件，Vite会在运行时将Vue的构建结果注入到此文件中。通常，你需要确保<div id="app"></div>的存在，因为它是Vue应用挂载的地方。

3. 项目的配置文件介绍

vite.config.js

Vite的配置文件，这里可以进行各种环境变量设置、路由预渲染、服务器配置、优化设定等。例如，你可以修改CSS预处理器配置、添加额外的插件或者调整构建输出路径。

部分关键配置示例：

export default {
  base: './',
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: 'src/main.js'
    }
  },
  server: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://your-api-endpoint.com', // API服务器地址
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/styles/global.scss";' // 引入全局SCSS文件
      }
    }
  },
  pluginOptions: {
    uniApp: {
      rootComponentPath: 'src/App.vue', // UniApp 根组件路径
      appStylePath: 'src/assets/app.css' // 全局样式文件路径
    }
  }
}

其他重要文件

• .eslintrc.js: ESLint配置，用于代码风格检查。
• .prettierrc.js: Prettier配置，用于代码格式化。
• postcss.config.js: PostCSS配置，例如处理px到rpx的转换。

开始开发

首先确保已全局安装pnpm（或使用yarn、npm），然后克隆项目：

git clone https://github.com/sonofmagic/uni-app-vite-vue3-tailwind-vscode-template.git
cd uni-app-vite-vue3-tailwind-vscode-template
pnpm install 或者 yarn 或者 npm install
pnpm run serve 或者 yarn serve 或者 npm run serve

完成后，访问http://localhost:8080即可看到应用的开发环境。

构建生产环境

运行以下命令打包项目:

pnpm run build 或者 yarn build 或者 npm run build

生成的构建产物位于dist目录下，适用于不同平台的部署。

在使用过程中，如果你遇到任何问题，可以查阅项目的GitHub仓库README获取更多信息。

uni-app-vite-vue3-tailwind-vscode-template uni-app-vite-vue3-tailwind-vscode-template 项目地址: https://gitcode.com/gh_mirrors/un/uni-app-vite-vue3-tailwind-vscode-template