# 项目框架搭建

# 集成scss

# 安装依赖

npm i -D sass-loader node-sass

# 注意事项

vue-cli 安装 sass-loader 最新版本会有错误提示, 解决办法是安装 sass-loader@7.3.1这个版本

# 使用

<style lang="scss" scoped>
.index {
  .msg {
    color: red;
  }
  .title {
    color: pink;
  }
}
</style>

# 集成vant-weapp组件库

官网

https://youzan.github.io/vant-weapp/

# 安装依赖

npm i vant-weapp -S --production

# 引入组件

在app.json里面写入

"usingComponents": {
	"van-button": "vant-weapp/dist/button/index"
}

# 使用组件

<van-button type="primary">按钮</van-button>

# 修改构建配置

修改webpack.base.config.js

if (/^wx$/.test(PLATFORM)) {
  baseWebpackConfig = merge(baseWebpackConfig, {
    plugins: [
      new CopyWebpackPlugin([{
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['.*']
      }])
    ]
  })
}

# 集成mpvue-router-patch插件

Github地址: https://github.com/F-loat/mpvue-router-patch

# 安装依赖

npm i -S mpvue-router-patch

# 安装插件

import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)

# 使用

this.$router.push('/pages/categoryList/main')

# 集成flyio

Github地址: https://github.com/wendux/fly

# 安装依赖

npm i -S flyio

# 使用

初始化Flyio对象

function createFly() {
  if (mpvuePlatform === 'wx') {
    const Fly = require('flyio/dist/npm/wx')
    return new Fly()
  } else {
    return null
  }
}
``

**处理get请求**

```js
export function get(url, params = {}) {
  const fly = createFly()
  if (fly) {
    return new Promise((resolve, reject) => {
      fly.get(url, params).then(response => {
        console.log(response)
        resolve(response)
      }).catch(err => {
        console.log(err)
        handleError(err)
        reject(err)
      })
    })
  }
}

处理post请求

export function post(url, params = {}) {
  const fly = createFly()
  if (fly) {
    return new Promise((resolve, reject) => {
      fly.post(url, params).then(response => {
        console.log(response)
        resolve(response)
      }).catch(err => {
        console.log(err)
        handleError(err)
        reject(err)
      })
    })
  }
}