uni-preset-vue 使用教程

uni-preset-vue 使用教程

uni-preset-vueuni-app preset for vue项目地址:https://gitcode.com/gh_mirrors/un/uni-preset-vue

1. 项目目录结构及介绍

1.1 基本目录

.
├── build                # 构建相关的配置
├── config               # 配置文件夹
│   └── index.js         # 配置入口
├── dist                  # 打包后的产出目录
├── mock                 # 模拟数据
├── node_modules          # 第三方依赖
├── src                   # 主要源代码目录
│   ├── assets            # 资源文件
│   ├── components        # 自定义组件
│   ├── pages             # 页面路由
│   ├── services          # 业务逻辑服务
│   ├── utils             # 工具函数
│   ├── App.vue           # 应用主组件
│   └── main.js           # 入口文件
└── ...

• build: 包含webpack等构建工具的配置。
• config: 存放项目配置，如环境变量、打包选项等。
• dist: 项目编译后的静态资源。
• mock: 用于开发阶段模拟接口的数据文件。
• src: 项目的主要源代码目录，包括各种组件、页面、服务和公用库。

1.2 核心文件介绍

• App.vue: 应用的根组件，定义应用的基础样式和布局。
• main.js: 项目入口文件，初始化Vue实例，加载全局组件和服务。

2. 项目的启动文件介绍

main.js 是 uni-app 的入口文件，它通常包含了以下核心部分：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 引入全局UI库或自定义样式
import 'your-style-library'

new Vue({
  render: h => h(App),
}).$mount('#app')

在 main.js 中，你可以导入需要的第三方库，注册全局组件，设置Vue配置，以及挂载App到DOM中。

3. 项目的配置文件介绍

3.1 index.js (位于 config 目录)

config/index.js 文件主要用于配置项目的基本属性，例如：

export default {
  // 打包模式（h5、ios、android）
  target: 'h5',
  
  // 开发环境配置
  devServer: {
    host: 'localhost',
    port: 8080,
    autoOpen: true, 
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        pathRewrite: {'^/api' : ''},
        changeOrigin: true
      }
    },
  },

  // 修改生成的app-id
  appid: '',

  // 多端配置
  mp: {
    wechat: {
      appId: '',
      miniProgram: {    
        ... // 小程序配置
      }
    }
  },

  // 其他配置
  ...
}

这个文件可以配置开发服务器参数，比如端口、代理，还可以设置打包的目标平台，多端配置等。

请根据你的项目需求，参考以上说明修改配置文件以满足不同场景的使用。更多配置细节可以在uni-app官方文档中找到。

uni-preset-vueuni-app preset for vue项目地址:https://gitcode.com/gh_mirrors/un/uni-preset-vue