# big-screen

**Repository Path**: joetoo_admin/big-screen

## Basic Information

- **Project Name**: big-screen
- **Description**: vite+vue3+ts+vdata构建可视化
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-12-26
- **Last Updated**: 2024-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: joetoo 1570466620@qq.com
 * @Date: 2022-12-13 18:58:14
 * @LastEditors: joetoo 1570466620@qq.com
 * @LastEditTime: 2023-06-24 22:54:47
 * @FilePath: \big-screen\README.md
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

# big-screen

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install

npm i sass -D
# vue2
npm install @jiaminghi/data-view / npm uninstall @jiaminghi/data-view
# vue3+vite
npm install @kjgl77/datav-vue3

npm install echarts --save
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```

{
"name": "hmzs-big-screen",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {
"@splinetool/runtime": "^0.9.330",
"axios": "^1.4.0",
"dexie": "^3.2.3",
"echart": "^0.1.3",
"echarts": "^5.4.2",
"js-cookie": "^3.0.5",
"v-scale-screen": "^2.2.0",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.1",
"eslint": "^8.39.0",
"eslint-plugin-vue": "^9.11.0",
"sass": "^1.62.1",
"vite": "^4.3.4",
"vite-plugin-qiankun": "^1.0.15"
}
}

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

export default defineConfig({
plugins: [vue(), qiankun('hmzs-big-screen', {
useDevMode: true
})],
server: {
// 解决开发环境下的静态资源访问问题
origin: '//127.0.0.1:5173'
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
}
}
})

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

import './styles/common.scss'

// some code
renderWithQiankun({
// 挂载时
mount (props) {
console.log('mount')
render(props)
},
bootstrap () {
console.log('bootstrap')
},
unmount (props) {
console.log('unmount', props)
},
})

if (!qiankunWindow.**POWERED_BY_QIANKUN**) {
render({})
}

function render (props = {}) {
const { container } = props

const app = createApp(App)
app.use(router)
app.mount(container ? container.querySelector("#app") : "#app")
}