# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 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目錄導入? 頁面內(nèi)使用
npm run dev
ok!
