微信小程序搭建mpvue+vant

導語

以前有搭建過mpvue+vant，不過沒有作記錄，此次公司又有新的小程序項目啓動，因此再從頭搭建。順便記錄一下，要否則時間久了也就忘記怎麼搭建了。文章末尾含有代碼，須要學習的童鞋，拿走不謝。

第一步：查看是否已經裝了node.js

$ node -v
複製代碼

$ npm -v
複製代碼

沒有裝的話前往Node.js官網安裝

第二步：安裝cnpm

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
複製代碼

第三步：安裝 Vue Cli

$ sudo cnpm install -g @vue/cli
複製代碼

第四步：想好項目名稱，並建立它

先要進入你的代碼目錄，而後再建立，須要瞭解

我本地代碼目錄：/Users/hrz/myworkspace
項目名：lawyer-card-wxss
appid：個人微信小程序appid

所以我須要執行

$ cd /Users/hrz/myworkspace
$ vue init mpvue/mpvue-quickstart lawyer-card-wxss 
複製代碼

執行後，過一會它會再次詢問你，項目名稱，微信小程序appid，項目描述，做者，是否開啓ESLint等信息。

完成後，它就會在你執行命令的目錄建立項目，接下來進入項目，下載依賴，並啓動。

$ cd lawyer-card-wxss
$ cnpm install
$ npm run dev
複製代碼

這時，咱們用微信開發者工具導入項目目錄，運行起來看看效果

第五步：添加vant組件

回到剛纔的命令窗口，仍是依舊在項目目錄下面，添加vant組件的依賴

$ cnpm i vant-weapp -S --production
複製代碼

執行後，能夠進入package.json文件，查看dependencies是否是已經包含了vant-weapp，有的話，說明添加成功。接下來，打開項目裏的build/webpack.base.conf.js文件，在baseWebpackConfig.plugins數組裏增長多一個CopyWebpackPlugin。主要是爲了mpvue在編譯成微信小程序開發語言的時候，也順帶把vant組件複製到目錄裏，這樣的話才能被項目找到。

new CopyWebpackPlugin([
      {
        from: resolve('node_modules/vant-weapp/dist'),
        to: resolve('dist/wx/vant-weapp/dist'),
        ignore: ['.*']
      }
    ])
複製代碼

第六步：代碼裏引用vant

在src/app.json文件用全局引用某個組件，好比按鈕組件

"usingComponents": {
  "van-button": "vant-weapp/dist/button/index"
}
複製代碼

咱們去首頁的文件中加入按鈕的代碼，看看效果

運行項目，而後微信開發者工具看看

$ npm run dev
複製代碼

發現了，微信開發者工具控制檯報錯

thirdScriptError sdk uncaught third Error Unexpected token export SyntaxError: Unexpected token export

解決方法 將ES6轉ES5的複選框，鉤上

就這樣，就能夠看到首頁，已經成功顯示vant的按鈕。mpvue+vant搭建成功！！！ 下一篇文章，咱們來介紹怎麼引入flyio：微信小程序搭建mpvue+vant+flyio

這裏我上傳了一個名字叫mpvue-vant-flyio的項目，步驟是按照上文操做的，只是項目名不一樣而已。mpvue-vant-flyio項目源碼