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>