微信小程序mpvue入门（vue-cli初始化项目并使用第三方UI组件）

微信小程序mpvue入门

项目起步

• 首先确保node.js和vue脚手架已经全部全局配置好
• cd到想要创建项目的目录下使用命令
• vue init mpvue/mpvue-quickstart mpvue01
• mpvue01为项目文件夹名称可以随便写，前边的命令不可以随便写
• cd到项目里面安装依赖cd mpvue01 npm install
• 把创建的vue项目转化成小程序的项目npm run dev
• 至此项目初始化已经完毕，可以用微信开发小程序打开项目观察项目结构

使用第三方UI组件

• 可用的第三方UI组件很多，这里以iView为例
• 首先到iVew官网进入github下边把目录clone到本地
• 把目录中名为dist的目录copy到vue项目中的static目录下，把dist改名为iVew以免跟主目录下的dist搞混

• 在需要用到UI组件的page的main.json文件(没有的话就自己建一个)中进行配置，这里以i-button为例

{
    "usingComponents": {
      "i-button": "../../static/iView/button/index"
    }
  }

• 然后在page中需要用组件的地方直接使用即可

<template>
	<div>
		<i-button type="primary" @click="bindViewTap">这是一个按钮</i-button>
	<div>
<template>

• 重新编译，打开页面i-button是不是已经在页面上了？