# vue-cesium-template

**Repository Path**: satng/vue-cesium-template

## Basic Information

- **Project Name**: vue-cesium-template
- **Description**: vue+cesium 项目模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 10
- **Created**: 2021-03-27
- **Last Updated**: 2021-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-cesium-template

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

---

### 代码规范及风格指南

**代码风格**

本项目使用 eslint+prettier 来统一代码风格，并设置为保存文件时自动根据规则格式化，eslint 规则采用字节跳动前端代码规范，所有规则均已添加注释

> 在 vscode 中先安装插件 eslint 和 prettier

本项目的风格指南主要是参照`vue`官方的 [风格指南](https://cn.vuejs.org/v2/style-guide/index.html)

**文件命名规则**

#### Component

所有的 Component 文件都是以大写开头 (PascalCase)，这也是官方所[推荐的](https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)。但除了 index.vue

例子：

- `@/src/components/BaseimagePicker.vue`

#### js 文件

所有的`.js`文件都遵循横线连接 (kebab-case)

#### views

在`views`文件下，代表路由的`.vue`文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则

例子:

- `@/src/views/earth-home/index.vue`

使用横线连接 (kebab-case)来命名`views`主要是出于以下几个考虑。

- 横线连接 (kebab-case) 也是官方推荐的命名规范之一[文档](https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)
- `views`下的`.vue`文件代表的是一个路由，所以它需要和`component`进行区分(component 都是大写开头)
- 页面的 url 也都是横线连接的，比如http://localhost:8181/#/earth-home，所以路由对应的view应该要保持统一
- 没有大小写敏感问题

---

### Cesium 初始化

在 utils/earth.js 中声明 Earth 类，在 main.js 中创建对象 earth，在 GeovisContainer.vue 中调用 init() 进行初始化。

> 这样写的主要目的是尽量将 cesium 的方法从组件中剥离出来，有些情况会需要使用 vuex 来完成参数传递

---

### Scss

本项目使用 Scss， styles/varibles.scss 中是全局样式的声明，在组件中，推荐全部使用 scoped，避免样式污染，需要修改 element 样式部分可使用 /deep/ 或者 >>> 深度作用选择器，或者在组件中新增没有 scoped 的 style 代码块，外层使用类名包裹

---

### 请求封装

本项目在 utils/request.js 中对 axios 进行简单封装，在 api 文件夹下对各个模块的接口进行单独声明，在组件中使用时先引入

```
import {dbfslInfo, dbfslEntity} from '@/api/fsjc.js'
```

后使用

```
dbfslInfo().then(res => {
   console.log(res)
})
```

如项目中有登录，需要在请求时在请求头添加 token 的，可参考如下封装

```
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
 baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
 // withCredentials: true, // send cookies when cross-domain requests
 timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
 config => {
   // do something before request is sent

   if (store.getters.token) {
     // let each request carry token
     // ['X-Token'] is a custom headers key
     // please modify it according to the actual situation
     config.headers['X-Token'] = getToken()
   }
   return config
 },
 error => {
   // do something with request error
   console.log(error) // for debug
   return Promise.reject(error)
 }
)

// response interceptor
service.interceptors.response.use(
 /**
  * If you want to get http information such as headers or status
  * Please return  response => response
 */

 /**
  * Determine the request status by custom code
  * Here is just an example
  * You can also judge the status by HTTP Status Code
  */
 response => {
   const res = response.data

   // if the custom code is not 20000, it is judged as an error.
   if (res.code !== 20000) {
     Message({
       message: res.message || 'Error',
       type: 'error',
       duration: 5 * 1000
     })

     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
       // to re-login
       MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
         confirmButtonText: 'Re-Login',
         cancelButtonText: 'Cancel',
         type: 'warning'
       }).then(() => {
         store.dispatch('user/resetToken').then(() => {
           location.reload()
         })
       })
     }
     return Promise.reject(new Error(res.message || 'Error'))
   } else {
     return res
   }
 },
 error => {
   console.log('err' + error) // for debug
   Message({
     message: error.message,
     type: 'error',
     duration: 5 * 1000
   })
   return Promise.reject(error)
 }
)

export default service

```

> 建议： view 中组件的结构可自行组织，建议将可共用的组件放在 components，类似像 BaseimagePicker.vue （底图选择组件）