导言：

对于从未接触过小程序，想要尝试开发小程序的人来说，mpvue框架无疑是最好的选择。Mpvue从底层支持Vue.js语法和构建工具系统，同时结合相关UI组件库，可以高效实现小程序开发

前言：

本文介绍了如何构建一个完整的小程序项目框架，由于是第一次使用，如有不完善之处请指正。

建设内容包括：

1.使用scss语法：依赖插件sass加载程序和节点sass

2.像vue一样使用路由：依赖插件mpvue-entry和mpvue-router-patch

3.使用ZanUI:拥有一个表扬团队的小程序UI组件库(GitHub)

4.使用vuex进行状态管理

5.使用flyio进行数据交互：GitHub地址

项目结构：

解释一下：

1.使用scss语法

1.安装相关性

cnpm安装节点-sass sass-加载程序-保存-开发

由于一些未知的原因，node-sass的安装经常会失败，所以cnpm是最好的安装方式

2.将lang=" scss "添加到。vue文件，这样sass可以愉快地用于开发。不需要在webpack.base.config.js中配置loader，webpack会自动识别。中的scss文件和scss代码。vue。

第二，使用类似vue的路由

使用mpvue提供的命令vue init MPV UE/MPV UE-quick start my-project创建项目后，我们会发现每个页面都要配置main.js文件，这样不仅麻烦，而且冗余。那么我们能不能像vue一样改革路由的使用方式呢？答案是肯定的。需要Mpvue-entry和mpvue-router-patch插件(集中页面配置，自动生成每页的条目文件，优化目录结构，支持新页面热更新)；和

Mpvue-entry:集中页面配置，自动生成每个页面的入口文件，优化目录结构，支持新页面热更新

Mpvue-router-patch:在Mpvue中使用vue-router兼容路由

1.安装相关性

Cnpm安装mpvue-entry-save-devcnpm安装mpvue-router-patch-save2，在项目的src文件夹下创建router文件夹和router.js文件

3.该项目引入了src下的main.js文件

从' vue '导入vue导入mpvue-router-patch ' vue . use(mpvue-router-patch)注意：main.js的导出默认值{}不能为空，否则编译时不会生成app.json文件。

4.修改webpack.base.conf.js配置文件

const mpvueentry=require(' mpvue-entry ')模块，exports={ entry : mpvueentry . getentry('。/src/router/router.js ')，} 5.配置router.js文件

//第一个路由是主页模块，exports=[{ path : ' pages/index '，name3360' index '，config3360 {导航栏标题文本：' article details '。//引入UI组件。使用组件：的详细信息{'Zan-button' : './dist/BTN/index'}}，{path:' pages/list/list '，name:' list '，config3360 {导航栏标题文本：' list将在后面描述。

1.将用户界面组件放在本地

2.将上图中的dist目录复制到mpvue项目的输出目录中

3.在router.js文件中引入UI组件

module . exports=[{ path : ' pages/index '，name:' index '，config: {导航栏标题文本：' article details '，//使用组件引入UI组件3360{ //组件名称和引用路径' Zan-button' 3360 './dist/BTN/index'}}}] 4。在页面中使用用户界面组件

模板div class=' index ' Zan-button type=' primary ' size=' small '确认付款/zan-button /div/template5，

小程序使用自定义组件：https://developers . weixin . QQ.com/mini program/dev/framework/custom-component/

关于使用ZanUI组件库的说明：https://github.com/youzan/zanui-weapp/blob/dev/README.md

第四，使用vuex进行状态管理

1.装置

cnpm安装vuex -保存

2.导入(main.js文件)

来自“”的进口商商店。/vuex/index' vue。原型。$ store=store//挂在vue原型上。5.使用flyio进行数据交互

1.装置

cnpm安装flyio -保存

2.导入(main.js文件)

const fly=require(' fly io/dist/NPM/wx ')//引入const fly=new flyvue。原型。$ fly=fly//挂在vue原型3上。使用

Add(){ //执行接口请求这个。$ fly.get ('http://* * * * */user？Id=133 ')。然后(function (res) {//请求成功console.log('res '，RES)；}) .catch(function (err) {//请求失败console.log('err '，err)；});}摘要

以上是边肖介绍的基于mpvue搭建微信小程序项目框架教程的详细讲解。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！