本文结合了别人的文章,是在自己实操完成后整理的,因为过程挺长的还有一些无需注意的地方,所以这里有的没贴图,文章简短不详细只是为了使用,看的过眼的可以使用,若有侵权,请联系删除
安装Node.js
下载地址:链接: http://www.nodejs.cn/
安装到D盘,安装时选择ADD PATH。我的路径:D:\nodejs
管理员打开DOS命令框,查看版本,显示出来就行了
node -v
npm -v
在根目录下管理员权限创建文件夹node_global和node_cache
/*继续DOS命令框执行*/
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
/*查看配置,显示成不成功都进行下一步*/
npm list -global
/*配置镜像站*/
npm config set registry=http://registry.npm.taobao.org
/*检查一下镜像站行不行命令,显示成不成功都进行下一步*/
npm config get registry
/*看看能否获得vue的信息,没啥用*/
npm info vue
/*安装更新命令*/
npm install npm -g
配置环境变量
重新管理员身份打开DOS命令框,重点重新打开
/*让上面的环境变量生效,测试NPM安装vue.js*/
npm install vue -g
/*测试NPM安装vue-router*/
npm install vue-router -g
安装脚手架
/*安装vue脚手架*/
npm install vue-cli -g
/*这里报错,需要配置环境变量*/
vue
配置环境变量path:D:\nodejs\node_global
/*查看vue脚手架版本*/
vue -V
/*切换到D盘根目录*/
vue init webpack vue01
进入vue01目录,管理员身份打开DOS命令框进入到根目录
/*初始化安装*/
npm install
/*安装依赖,会出现报错,继续下一步*/
npm install dev
/*运行了就行*/
npm i ajv
/*运行,有些慢,等着就行*/
npm run dev
出现这个界面就成功了
打开http://localhost:8080会出现下面的界面
在vue01目录下,管理员身份打开DOS命令框进入到根目录
/*生成静态文件*/
npm run build
引入WeUI组件库
在小程序的项目的根目录,管理员身份打开DOS命令框进入到根目录
/*管理员打开DOS命令框*/
npm init
/*安装插件*/
npm install weui-miniprogram -S
打开微信开发者工具,【工具】->【构建npm】,完成以后
app.wxss引入WeUI样式,路径到weui.wxss就行
使用插件
在需要引入weUI插件样式的页面的json文件中引入weUI组件样式前都加了前缀 mp-,根据需要可添加
{
"usingComponents": {
"mp-searchbar": "../../../components/searchbar/searchbar",
"mp-checkbox-group": "../../../components/checkbox-group/checkbox-group",
"mp-checkbox": "../../../components/checkbox/checkbox",
"mp-cells": "../../../components/cells/cells",
"mp-cell": "../components/cell/cell",
"mp-badge": "../components/badge/badge",
"mp-gallery": "../components/gallery/gallery",
"mp-loading": "../components/loading/loading",
"mp-toptips": "../components/toptips/toptips",,
"mp-form": "../components/form/form",
"mp-slideview": "../components/slideview/slideview",
"mp-uploader": "../components/uploader/uploader",
"mp-dialog": "../components/dialog/dialog",
"mp-msg": "../components/msg/msg",
"mp-toptips": "../../components/toptips/toptips",
"mp-halfScreenDialog": "../../components/half-screen-dialog/half-screen-dialog",
"mp-actionSheet": "../../components/actionsheet/actionsheet",
"mp-navigation-bar": "../components/navigation-bar/navigation-bar"
}
}
然后可以在对应页面的 wxml 中直接使用该组件
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
<view>test content</view>
</mp-dialog>