# vue_template

**Repository Path**: hotsuitor/vue_template

## Basic Information

- **Project Name**: vue_template
- **Description**: 基于vant的vue项目开发模板，配置好axios，封装请求，配置好微信授权插件，开箱即用
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2019-05-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# app

## Project setup
```
yarn install
```

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

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

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

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

### 目录结构说明
```
common  公共组件
view  页面组件
api  接口目录
utils  工具库目录
.env  配置文件
.editorconfig  编码格式规范插件配置文件
```
微信授权涉及到的相关文件
`.env`
`route.js`

### 注意事项
* 不需要在开发境中用到依赖包安装在运行环境
  用以下命令安装非运行环境依赖包：
  * `npm install package-name -D` or `yarn add package-name -D`


### 编码规范
本项目采用vant组件库[风格指南](https://youzan.github.io/vant/#/zh-CN/style-guide)，凡不符合规范的代码不允许PR
不规范，不允许PR

可以安装Prettier插件

eg:

**组件选项的顺序**

组件选项应该有统一的顺序。
```js
export default {
  name: '',

  mixins: [],

  components: {},

  props: {},

  data() {},

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}
};
```

### 扩展配置
配置px to rem
1. 安装 postcss `npm install postcss`
2. `package.json` 配置
```js
 "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 16,
        "propList": [
          "*"
        ]
      }
    }
  },
```
配置`git commit` 钩子
1. 安装 `npm install husky pretty-quick -D`
```bash

```
`package.json` 配置
```js
"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
```

#### css 配置
配置 vue.config.js 文件
```js
 // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // 启用 CSS modules for all css / pre-processor files.
    modules: true
  },
```

#### 配置骨架屏
安装 vue-skeleton-webpack-plugin 插件
配置 vue.config.js 文件
```js
configureWebpack: config => {
    config.plugins.push(
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: resolve('./src/entry-skeleton.js')
          }
        },
        minimize: true,
        quiet: true
      })
    )
}
// 链式操作配置
// 参考 https://github.com/neutrinojs/webpack-chain
 chainWebpack: config => {
    // 代码地址压缩优化
    config.optimization.concatenateModules(true)
    // 使用
    config.plugin('skeleton').use(SkeletonWebpackPlugin, [
      {
        webpackConfig: {
          entry: {
            app: resolve('./src/entry-skeleton.js'),
          },
        },
        minimize: true,
        quiet: true
      },
    ])
  },
```
审查项目的webpack配置
```js
vue inspect > output.js
```

#### 代理设置
配置 vue.config.js 文件
```
devServer: {
    proxy: {
      '/proxy': {
        target: 'http://jyhpay.herbsexcolor.com/index.php?s=Weixin/api/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/proxy': ''
        }
      }
    }
  },
```

#### 设置别名
配置 vue.config.js 文件
```js
chainWebpack: config => {
    config.resolve.alias
      .set('styles', resolve('src/assets/styles'))
      .set('less', resolve('src/assets/less'))
      .set('~js', resolve('src/assets/js'))
  },
```

#### 修改 loader 选项
示例
```js
css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        'import': []
      }
    }
  },
```

### TODO

- [x] 配置Prettier插件，设置代码格式化钩子
- [x] 考虑封装公共函数调用
  * `src/assets/scripts` 目录下

### bug

- [x] 底部切换需要点击两次，且发现点击与图标不对应问题
> 注意如果在 A 页面和 B 页面都渲染了一个 Tabbar 组件，这两个 Tabbar 的状态是不共享的，单页面应用可以把 Tabbar 放到 router-view 外面
- [x] 微信授权信息由 localStorage 保存改为 cookie 保存