CoffeeScript,Pug,Sass 使用
以下内容门槛较高, 如看不懂或觉得需要继续了解, 结尾处放置了原视频流程与 GitHub 地址, 欢迎琢磨与 Star, 谢谢.
文章不做技术语法解读, 如不清楚, 请前往对应官网了解细节.
启动项目
由于使用了 CS,Pug,Sass 等非主流方式, 所以便多出了一些流程:
根据官方拉取快速启动项目, 并命名为 "MergeMoney", 不要 vuex 与 eslint
- vue init mpvue/mpvue-quickstart MergeMoney
- npm i
或 cnpm
添加 CS,Pug, 以及 Sass 的依赖
npm i -D coffeescript coffee-loader pug pug-loader sass node-sass sass-loader
或 cnpm
修改 webpack 配置
{test: /\.coffee$/, loader: 'coffee-loader'},
build -> webpack.bash.conf.js 下, module -> rules 添加上述内容用来处理. coffee 文件
这里注意下, vue 是支持直接
<script lang='coffee'>
的, 但是 mpvue 目前不支持, 已提交 issue, 目前没结果
删除原模板中无用的代码, 并替换成 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 新增, 空着即可
启动
npm run dev
即可看到如下页面:
开发
在 src / 下新建 assets 文件夹, 导入所需要的资源, 如图:
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 # 背景图片
- }
此时花费一点时间将页面样式铺出来, 即 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>
此时保存页面会报错, 因为 result 这个变量没有, 于是在 pages/index/main.coffee 中添加 computed:
- computed:
- # 最终多少钱
- result: ->
- result = this.coins.reduce ((pre, cur) ->
- pre + cur.priceF * (cur.count || 0))
- , 0
- result / 100
恩, 还少了重置的函数
- methods:
- clickReset: ->
- wx.showModal
- title: '提示'
- content: '即将重置所有数量, 确定吗?'
- success: (res) =>
- coin.count = '' for coin in this.coins if res.confirm
大功告成, 可以试试效果了:
如需进一步了解
全流程视频 https://www.bilibili.com/video/av25527215
GitHub 源码 https://github.com/ZweiZhao/MergeMoney.git 欢迎 Star,Fork
感谢你的耐心阅读, 如有一丝的帮助, 倍感欣慰.
来源: https://www.cnblogs.com/ZweiZhao/p/9225808.html