记录 mpvue+pug+stylus+iview weapp

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖

$ cd my-project

$ npm install

配置pug       //       build/webpack.base.config

npminstallpug pug-loader pug-filters --save

rules    {

                test:/\.pug$/,

                loader:'vue-html!pug-html'

            },

配置stylus        //       build/webpack.base.config

npminstallstyle-loader stylus stylus-loader --save

npminstallextract-text-webpack-plugin --save

rules   {

                test:/\.styl/,

                loader: ExtractTextPlugin.extract("css-loader!stylus-loader")

          }

plugins  

            newExtractTextPlugin('css/style.css'),

vscode 配置快速模板

1、文件 ==> 首选项 ==> 用户代码片段 ==> 输入  vue然后回车

{

"Print to console": {

"prefix":"vv",//自己随便定义快捷键

"body": [

"<template lang=\"pug\">",

" div.wrapper",

"</template>\n",

"<script>",

"import Vue from 'vue'",

"export default Vue.extend({",

" components: {\n",

" },",

" data () {",

" return {\n",

" }",

" }",

"})",

"</script>\n",

"<style scoped lang=\"stylus\">",

"</style>",

"",

],

"description":"Log output to console"

}

}

下载   https://github.com/TalkingData/iview-weapp 解压 dist目录导入  页面内使用

npm run dev

ok!