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是支持直接<script lang='coffee'>的，可是mpvue目前不支持，已提交issue，目前沒結果

4. 刪除原模板中無用的代碼，並替換成CS，Pug與Sass

   conponents/card.vue

   pages/ 除了index所有刪除

   main.js 只留pages: ['^pages/index/main'],

   pages/index/index.vue文件修改以下

   <template lang='pug'>
   .container
       span normal
   </template>
   
   <script>
   import main from './main.coffee'
   
   export default {
    ...main
   }
   </script>
   
   <style scoped lang='sass'>
   </style>

   pages/index/main.js 不動

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

5. 啓動

   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以下：

   <template lang='pug'>
   .container
    img.bg(
     :src='imgBg'
    )
    .content
     .coins
      section.row(
       v-for='(coin, index) of coins' :key='index'
      )
       img.coin-img(
        :src='coin.img'
       )
       input.coin-count(
        placeholder-style='color: rgba(255, 255, 255, .5);'
        type='number'
        v-model='coin.count'
        placeholder='數量'
       )
     .result
      button.reset(
       @click='clickReset'
      ) 重置
      span 總金額:
      input.result-count(
       readonly
       type='number'
       :value='result'
      )
      span 元
   </template>
   
   <script>
   import main from './main.coffee'
   
   export default {
    ...main
   }
   </script>
   
   <style scoped lang='sass'>
   .count
    height: 84rpx
    border: 2rpx solid #FFFFFF
    border-radius: 10rpx
    text-align: center
   
   .container
    padding: 0
    font-size: 36rpx
   
   
    .bg
     position: absolute
     left: 0
     top: 0
     width: 100%
     height: 100%
     z-index: 0
   
    .content
     width: 100%
     height: 100%
     z-index: 1
     background: rgba(171,171,171,.35)
   
     .coins
      height: 90%
      overflow-y: auto
   
      .row
       position: relative
       display: flex
       justify-content: space-around
       align-items: center
       margin-top: 24rpx
   
       .coin-img
        width: 248rpx
        height: 110rpx
   
       .coin-count
        @extend .count
        width: 204rpx
        color: #fff
   
     .result
      display: flex
      justify-content: center
      align-items: center
      height: 10%
   
      .reset
       width: 60rpx
       height: 60rpx
       margin: 0 40rpx 0 0
       padding: 0
       border: 2rpx solid red
       border-radius: 30rpx
       background: transparent
       font-size: 24rpx
       color: #fff
   
       &:after
        border: 0
   
      span
       color: #fff
   
      .result-count
       @extend .count
       width: 360rpx
       margin: 0 40rpx
       background: #fff
   </style>

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. 大功告成，能夠試試效果了：

如需進一步瞭解

• 全流程視頻

感謝你的耐心閱讀，若有一絲的幫助，倍感欣慰。