# film

**Repository Path**: bashisan/film

## Basic Information

- **Project Name**: film
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-26
- **Last Updated**: 2021-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# film

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


## 插件/组件库

### vant 组件库

安装

```
  npm i vant -S
```

main.js 中引入

```javascript
import Vant from 'vant'
import 'vant/lib/index.css'
```

### amfe-flexible 适配插件

安装

```
npm i -S amfe-flexible
```

main.js 中引入

```javascript
import 'amfe-flexible'
```

index.html 添加 meta

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
```

### postcss-pxtorem px转rem插件

安装

```
npm install postcss-pxtorem@5.1.1[如果版本过高二报错，可安装指定版本] -D
```

项目根目录创建 postcss.config.js 并配置如下

```javascript
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  }
}
```

项目根目的 .browserslistrc 中加入

```
Android >= 4.0
iOS >= 8
```

### vue-feedback 点击反馈插件

安装

```
npm install vue-feedback --save
```

使用

```javascript
// 基本使用
<div v-fb></div>
// 自定义样式
<div v-fb="{cls: 'clickable'}"></div>
```

参考手册：https://github.com/hjc22/vue-feedback
参考页面：src/view/bonus-record

### 全局 scss 变量

1、在 styles 目录新建 scss 文件

```scss
$primary: #ee0a24;
$success: #07c160;

:export {
  primary: $primary;
  success: $success;
}
```

2、vue.config.js 中添加如下配置

```javascript
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  }
}
```

3、组件 scss 中使用

```scss
<style lang="scss" scoped>
.div {
  color: $primary
}
</style>
```

4、组件 js 中使用

```javascript
<script>
import variables from '@/styles/variables.scss'

export default {
  props: {
    color: {
      type: String,
      default: variables.primary
    }
  }
};
</script>
```

5、组件 template 中使用

```vue
<template>
  <div :style="color: variables.primary"></div>
</template>

<script>
import variables from '@/styles/variables.scss'
export default {
  computed: {
    variables() {
      return variables
    },
  },
};
</script>
```