微信小程序漂亮UI vant-weapp 快速架设

1.先在微信开发者工具中打开项目的终端：cmd 
cd F:\项目开发\微信小程序\你项目路劲

2.然后初始化一个package.json文件：输入命令：npm init 一路回车

3.在小程序工程的根目录下执行：

npm i @vant/weapp -S --production

2.第二步：

保证当前你的微信开发者工具是最新版本，然后点击执行“构建npm“

工具--构建NPM

 

<van-button type="primary">按钮</van-button>

app.json

{
  "pages":[
      "pages/register/register",
    "pages/index/index",
 
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "usingComponents": {
    "demo-block": "./components/demo-block/index",
    "van-action-sheet": "./miniprogram_npm/@vant/weapp/action-sheet/index",
    "van-area": "./miniprogram_npm/@vant/weapp/area/index",
    "van-button": "./miniprogram_npm/@vant/weapp/button/index",
    "van-card": "./miniprogram_npm/@vant/weapp/card/index",
    "van-cell": "./miniprogram_npm/@vant/weapp/cell/index",
    "van-cell-group": "./miniprogram_npm/@vant/weapp/cell-group/index",
    "van-checkbox": "./miniprogram_npm/@vant/weapp/checkbox/index",
    "van-checkbox-group": "./miniprogram_npm/@vant/weapp/checkbox-group/index",
    "van-col": "./miniprogram_npm/@vant/weapp/col/index",
    "van-count-down": "./miniprogram_npm/@vant/weapp/count-down/index",
    "van-dialog": "./miniprogram_npm/@vant/weapp/dialog/index",
    "van-divider": "./miniprogram_npm/@vant/weapp/divider/index",
    "van-field": "./miniprogram_npm/@vant/weapp/field/index",
    "van-goods-action": "./miniprogram_npm/@vant/weapp/goods-action/index",
    "van-goods-action-icon": "./miniprogram_npm/@vant/weapp/goods-action-icon/index",
    "van-goods-action-button": "./miniprogram_npm/@vant/weapp/goods-action-button/index",
    "van-icon": "./miniprogram_npm/@vant/weapp/icon/index",
    "van-image": "./miniprogram_npm/@vant/weapp/image/index",
    "van-loading": "./miniprogram_npm/@vant/weapp/loading/index",
    "van-nav-bar": "./miniprogram_npm/@vant/weapp/nav-bar/index",
    "van-notice-bar": "./miniprogram_npm/@vant/weapp/notice-bar/index",
    "van-notify": "./miniprogram_npm/@vant/weapp/notify/index",
    "van-panel": "./miniprogram_npm/@vant/weapp/panel/index",
    "van-popup": "./miniprogram_npm/@vant/weapp/popup/index",
    "van-progress": "./miniprogram_npm/@vant/weapp/progress/index",
    "van-radio": "./miniprogram_npm/@vant/weapp/radio/index",
    "van-radio-group": "./miniprogram_npm/@vant/weapp/radio-group/index",
    "van-row": "./miniprogram_npm/@vant/weapp/row/index",
    "van-search": "./miniprogram_npm/@vant/weapp/search/index",
    "van-sidebar": "./miniprogram_npm/@vant/weapp/sidebar/index",
    "van-sidebar-item": "./miniprogram_npm/@vant/weapp/sidebar-item/index",
    "van-slider": "./miniprogram_npm/@vant/weapp/slider/index",
    "van-stepper": "./miniprogram_npm/@vant/weapp/stepper/index",
    "van-steps": "./miniprogram_npm/@vant/weapp/steps/index",
    "van-sticky": "./miniprogram_npm/@vant/weapp/sticky/index",
    "van-submit-bar": "./miniprogram_npm/@vant/weapp/submit-bar/index",
    "van-swipe-cell": "./miniprogram_npm/@vant/weapp/swipe-cell/index",
    "van-uploader": "./miniprogram_npm/@vant/weapp/uploader/index",
    "van-switch": "./miniprogram_npm/@vant/weapp/switch/index",
    "van-tab": "./miniprogram_npm/@vant/weapp/tab/index",
    "van-tabs": "./miniprogram_npm/@vant/weapp/tabs/index",
    "van-tabbar": "./miniprogram_npm/@vant/weapp/tabbar/index",
    "van-tabbar-item": "./miniprogram_npm/@vant/weapp/tabbar-item/index",
    "van-tag": "./miniprogram_npm/@vant/weapp/tag/index",
    "van-toast": "./miniprogram_npm/@vant/weapp/toast/index",
    "van-transition": "./miniprogram_npm/@vant/weapp/transition/index",
    "van-tree-select": "./miniprogram_npm/@vant/weapp/tree-select/index",
    "van-datetime-picker": "./miniprogram_npm/@vant/weapp/datetime-picker/index",
    "van-rate": "./miniprogram_npm/@vant/weapp/rate/index",
    "van-collapse": "./miniprogram_npm/@vant/weapp/collapse/index",
    "van-collapse-item": "./miniprogram_npm/@vant/weapp/collapse-item/index",
    "van-picker": "./miniprogram_npm/@vant/weapp/picker/index",
    "van-overlay": "./miniprogram_npm/@vant/weapp/overlay/index",
    "van-circle": "./miniprogram_npm/@vant/weapp/circle/index",
    "van-index-bar": "./miniprogram_npm/@vant/weapp/index-bar/index",
    "van-index-anchor": "./miniprogram_npm/@vant/weapp/index-anchor/index",
    "van-grid": "./miniprogram_npm/@vant/weapp/grid/index",
    "van-grid-item": "./miniprogram_npm/@vant/weapp/grid-item/index",
    "van-dropdown-menu": "./miniprogram_npm/@vant/weapp/dropdown-menu/index",
    "van-dropdown-item": "./miniprogram_npm/@vant/weapp/dropdown-item/index",
    "van-skeleton": "./miniprogram_npm/@vant/weapp/skeleton/index",
    "van-calendar": "./miniprogram_npm/@vant/weapp/calendar/index"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

app.wxss

@import '/miniprogram_npm/@vant/weapp/common/index.wxss';