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

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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpjwjx.html