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

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