導語

之前有搭建過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專案原始碼