## LDesign Desktop Template Next

基于vue3的系统模板。

### 项目结构

请参考下面示例图，`env`目录为项目启动和一些配置项，里面都有注释，可根据需要修改，`src`为项目目录，里面包含`assets`和`views`，分别代表项目资源目录和页面目录，一般情况只用改这两个目录即可。

- env
  .env
  .env.development
- src
  - assets
  - views
  main.js
.npmrc
index.html
licence
package.json
vite.config.js

### 关于package.json的说明！

为什么看不到任何依赖信息，为了减少不必要错误，现将项目的依赖进行了统一管理，package.json里面只包含项目启动和打包的命令！

### 关于main.js的说明！

为什么main.js中的内容和默认的vue项目不同？新版模板中将初始化vue项目封装成一个函数，在`@ldesign/desktop-public-next`包中，只需要调用`createLeapApp`即可。

``` javascript
import { createLeapApp } from '@ldesign/desktop-public-next'

import '@ldesign/desktop-next/es/style'

/** 正式环境使用下面的地址 */
// import '@ldesign/desktop-next/es/style/index.css'

// import '@ldesign/desktop-public-next/es/ldesign.css'

/** 初始化LeapApp */
createLeapApp({
  el: '#app',
  env: import.meta.env,
  files: import.meta.glob('@/**/*.vue'),
  defaultRoutes: [{
    path: '/test',
    name: 'Test',
    meta: {
      title: '测试'
    },
    component: () => import('@/views/Test/Index.vue')
  }]
})

```

完整的参数定义如下：

``` typescript
export interface LeapAppOptions {
  /** 渲染根节点 */
  el: string
  /** import.meta.env */
  env: any
  /** 传入所有.vue文件 */
  files: Record<string, () => Promise<unknown>>
  /** 图片资源文件，可选 */
  assets?: any
  /** 系统主题色配置 */
  colors?: LeapColors
  /** 首页模板 */
  layouts?: LeapLayoutItem[]
  defaultColor?: string
  defaultLayout?: string
  /** 可自定义更多路由，注意：路由一定要有name，否则无效 */
  defaultRoutes?: RouteRecordRaw[]
}
```

### 关于路由

在新版模板中，无需从`vue-router`中去引入路由模块

#### Option API
``` javascript
export default {
  methods: {
    test () {
      this.$router.router.push('/')
    }
  }
}
```
#### Composition API
``` javascript
import {getCurrentInstance, inject} from 'vue'
export default defineComponent({
  setup () {
    // 方法1：
    const instance = getCurrentInstance()
    const {$router} = instance.appContext.app.$root
    $router.router.push('/')
    // 方法2：
    const $router = inject('$router')
    $router.router.push('/')
  }
})
```

### 关于数据请求

新版的模板中可通过两种方式使用`$request`方法，等同于原有的`lrequest`方法

#### Option API

``` javascript
export default {
  methods: {
    test () {
      // 同lrequest
      this.$request('method').then(res => {})
      // 同 request
      this.$axios()
    }
  }
}
```
#### Composition API

``` javascript
export defineComponent({
  setup () {
    // 方法1：
    const instance = getCurrentInstance()
    const {$request} = instance.appContext.app.$root
    $request('method').then(res => {})
    // 方法2：
    const $request = inject('$request')
    $request('method').then(res => {})
  }
})
```

#### 如何在组件外使用数据请求

由于`request`的特殊性，需从`store`中获取存储的`$request`，或者也可以在组件内调用该方法的时候传入`this`。

``` javascript
// import {app} from '../main'
import { pinia, useConfigStore } from '@ldesign/desktop-public-next'

export function upload() {
  const app = useConfigStore(pinia)
  const { $request } = app.$root.appContext.app.config.globalProperties
  return new Promise((resolve) => {
    $request('app_getUserInfo', 'leap').then((res) => {
      resolve(res)
    })
  })
}

```

#### 为什么不能通过`import`的方式引入？

因为`LRequest`虽然是公共方法，但每个项目的配置项不尽相同，为了实现复用，需要在项目初始化的时候传入该项目的`leapConfig`变量从而实现`lrequest`的相关功能，也试过从`main.js`中引入的方式，可开发过程中会出现意料之外的错误。