mpvue两小时，产出一个《点钞辅助工具》小程序

CoffeeScript，Pug，Sass使用

以下内容门槛较高，如看不懂或觉得需要继续了解，结尾处放置了原视频流程与GitHub地址，欢迎琢磨与Star，谢谢。

文章不做技术语法解读，如不清楚，请前往对应官网了解细节。

启动项目

由于使用了CS，Pug，Sass等非主流方式，所以便多出了一些流程：

1. 根据官方拉取快速启动项目，并命名为“MergeMoney”，不要vuex与eslint

   vue init mpvue/mpvue-quickstart MergeMoney

   npm i

   或 cnpm

2. 添加CS，Pug，以及Sass的依赖

   npm i -D coffeescript coffee-loader pug pug-loader sass node-sass sass-loader

   或 cnpm

3. 修改webpack配置

   {
     test: /\.coffee$/,
     loader: 'coffee-loader'
    },

   build -> webpack.bash.conf.js下，module -> rules添加上述内容用来处理.coffee文件

   这里注意下，vue是支持直接

   pages/index/main.js 不动

   pages/index/main.coffee新增，空着即可

4. 启动

   npm run dev

   即可看到如下页面：

   

开发

1. 在src/下新建assets文件夹，导入所需要的资源，如图：

   

2. pages/index/main.coffee导入需要的资源，并放到data留着用

   import img1 from '@/assets/1.png'
   import img1j from '@/assets/1j.png'
   import img1m from '@/assets/1m.png'
   import img1y from '@/assets/1y.png'
   import img5 from '@/assets/5.png'
   import img5j from '@/assets/5j.png'
   import img5m from '@/assets/5m.png'
   import img10 from '@/assets/10.png'
   import img20 from '@/assets/20.png'
   import img50 from '@/assets/50.png'
   import img100 from '@/assets/100.png'
   import imgBg from '@/assets/bg.png'
   
   export default
    data: {
     # 人民币金额种类，价值单位“分”
     coins: [
      {img: img100
      count: ''
      priceF: 10000}
      {img: img50
      count: ''
      priceF: 5000}
      {img: img20
      count: ''
      priceF: 2000}
      {img: img10
      count: ''
      priceF: 1000}
      {img: img5
      count: ''
      priceF: 500}
      {img: img1
      count: ''
      priceF: 100}
      {img: img1y
      count: ''
      priceF: 100}
      {img: img5j
      count: ''
      priceF: 50}
      {img: img5m
      count: ''
      priceF: 50}
      {img: img1j
      count: ''
      priceF: 10}
      {img: img1m
      count: ''
      priceF: 10}
     ]
     imgBg # 背景图片
    }

3. 此时花费一点时间将页面样式铺出来，即pages/index/index.vue如下：

4. 此时保存页面会报错，因为result这个变量没有，于是在pages/index/main.coffee中添加computed：

   computed:
       # 最终多少钱
       result: ->
           result = this.coins.reduce ((pre, cur) ->
               pre + cur.priceF * (cur.count || 0))
           , 0
           result / 100

5. 恩，还少了重置的函数

   methods:
       clickReset: ->
           wx.showModal
               title: '提示'
               content: '即将重置所有数量，确定吗？'
               success: (res) =>
                   coin.count = '' for coin in this.coins if res.confirm

6. 大功告成，可以试试效果了：

如需进一步了解

• 全流程视频

感谢你的耐心阅读，如有一丝的帮助，倍感欣慰。