feat: 添加 vant-weapp

F-loat · Dec 9, 2018 · 255bceb · 255bceb
1 parent f2df0dc
commit 255bceb
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 ## 基本用法
 
 ``` bash
-$ npm install -g vue-cli
+$ npm install -g @vue/cli @vue/cli-init
 $ vue init F-loat/mpvue-quickstart my-project
 $ cd my-project
 $ npm install
@@ -18,6 +18,7 @@ $ npm run dev
 * 引入 mpvue-entry，移除冗余的 main.js 文件
 * 引入 mpvue-config-loader，支持在 vue 文件中书写页面配置
 * 引入 mpvue-router-patch，支持使用类 vue-router 的 api 
+* 引入 vant-weapp，全局配置原生组件库，快速搭建页面
 * 支持官方分包（mpvue-loader@^1.1.0），简化配置方式
 
 ## 详细文档请查阅
@@ -26,3 +27,4 @@ $ npm run dev
 * [mpvue-entry](https://github.com/F-loat/mpvue-entry)
 * [mpvue-config-loader](https://github.com/F-loat/mpvue-config-loader)
 * [mpvue-router-patch](https://github.com/F-loat/mpvue-router-patch)
+* [vant-weapp](https://youzan.github.io/vant-weapp)
diff --git a/meta.js b/meta.js
@@ -38,6 +38,10 @@ module.exports = {
       "type": "confirm",
       "message": "Use MPVueRouterPatch?"
     },
+    "vant": {
+      "type": "confirm",
+      "message": "Use VantWeapp Components?"
+    },
     "lint": {
       "type": "confirm",
       "message": "Use ESLint to lint your code?"

diff --git a/template/build/webpack.base.conf.js b/template/build/webpack.base.conf.js
@@ -99,6 +99,13 @@ module.exports = {
         to: path.resolve(__dirname, '../dist/static'),
         ignore: ['.*']
       }
-    ])
+    ]){{#vant}},
+    new CopyWebpackPlugin([
+      {
+        from: resolve('node_modules/vant-weapp/dist'),
+        to: resolve('dist/static/vant-weapp/dist'),
+        ignore: ['.*']
+      }
+    ]){{/vant}}
   ]
 }
diff --git a/template/package.json b/template/package.json
@@ -16,10 +16,12 @@
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
-    "mpvue-config-loader": "^0.0.3",
+    "mpvue-config-loader": "^0.1.0",
     "mpvue-entry": "next",
-    "mpvue-loader": "^1.1.2",{{#router}}
-    "mpvue-router-patch": "^0.2.0",{{/router}}
+    "mpvue-loader": "^1.1.2",
+    {{#router}}
+    "mpvue-router-patch": "^0.2.0",
+    {{/router}}
     "mpvue-template-compiler": "^1.0.0",
     "mpvue-webpack-target": "^1.0.0",
     "postcss-loader": "^2.1.0",
@@ -66,6 +68,9 @@
     "ora": "^2.0.0",
     "rimraf": "^2.6.0",
     "url-loader": "^1.0.0",
+    {{#vant}}
+    "vant-weapp": "^0.4.0",
+    {{/vant}}
     "vue-style-loader": "^4.1.0",
     "webpack": "^3.11.0",
     "webpack-merge": "^4.1.0",

diff --git a/template/project.config.json b/template/project.config.json
@@ -2,7 +2,7 @@
 	"description": "项目配置文件。",
 	"setting": {
 		"urlCheck": true,
-		"es6": false,
+    "es6": true,
 		"postcss": true,
 		"minified": true,
 		"newFeature": true

diff --git a/template/src/App.vue b/template/src/App.vue
@@ -1,5 +1,12 @@
 <script>
 export default {
+  {{#vant}}
+  globalConfig: {
+    usingComponents: {
+      'van-tag': '/static/vant-weapp/dist/tag/index'{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
+    }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
+  },
+  {{/vant}}
   created{{#unless_eq lintConfig "airbnb"}} {{/unless_eq}}() {
     // 调用API从本地缓存中获取数据
     const logs = wx.getStorageSync('logs') || []{{#if_eq lintConfig "airbnb"}};{{/if_eq}}

diff --git a/template/src/pages/index.vue b/template/src/pages/index.vue
@@ -8,6 +8,13 @@
       </div>
     </div>
 
+    {{#vant}}
+    <van-tag>标签</van-tag>
+    <van-tag type="danger">标签</van-tag>
+    <van-tag type="primary">标签</van-tag>
+    <van-tag type="success">标签</van-tag>
+    {{/vant}}
+
     <div class="usermotto">
       <div class="user-motto">
         <card :text="motto"></card>
@@ -28,6 +35,8 @@
 import card from '@/components/card'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 
 export default {
+  mpType: 'page',
+
   data{{#unless_eq lintConfig "airbnb"}} {{/unless_eq}}() {
     return {
       motto: 'Hello World',
@@ -92,9 +101,11 @@ export default {
   color: #aaa;
 }
 
+{{#if_eq vant false}}
 .usermotto {
   margin-top: 150px;
 }
+{{/if_eq}}
 
 .form-control {
   display: block;