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文件修改以下
   ```html
   

   
   ```

   pages/index/main.js 不動

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

5. 啓動

   npm run dev

   便可看到以下頁面：

開發

1. 在src/下新建assets文件夾，導入所須要的資源，如圖：

2. pages/index/main.coffee導入須要的資源，並放到data留着用
   ```coffee
   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以下：
   ```html
   

   
   ```

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

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