基于mpvue搭建小程序项目

最新推荐文章于 2025-11-21 04:20:11 发布

原创最新推荐文章于 2025-11-21 04:20:11 发布 · 456 阅读

1 ·

CC 4.0 BY-SA版权

前言

小程序开发跟web开发有着很大的相似之处，语法跟开发工具都可以借鉴，如果你有vue开发web的经历，则小程序开发就比较简单。

个人习惯使用VS Code进行web开发，小程序则外加微信开发者工具（只是用其中的模拟器，看效果）

另外需要在VS Code中安装Vetur、微信开发者工具两个插件，以便支持小程序语法

参考博客：1：https://www.jianshu.com/p/6f8d74be3ff8

2：https://www.cnblogs.com/weichen913/p/9439203.html

正文

1、安装node.js，切换npm下载源到国内淘宝镜像

#node.js安装请百度（手动滑稽）

#查看node版本
node -version 

#淘宝镜像
npm set registry https://registry.npm.taobao.org/

#安装npm-cli脚手架工具
npm install vue-cli -g

2、打开cdm面板、进入项目文件夹，创建项目

#使用vue脚手架创建新项目
vue init mpvue/mpvue-quickstart projectname
#注意不建议安装Eslint

3、使用VS Code打开项目，删除其中的dist文件夹，删除src文件夹里面的components、pages文件夹下的所有文件，然后npm install一下

4、依赖安装（仅限个人爱好）

#1、vue路由配置
cnpm install mpvue-entry --save-dev
cnpm instal mpvue-router-patch --save-dev

#2、使用scss语法
cnpm install sass-loader --save-dev
cnpm install node-sass --save-dev

#3、使用Vuex状态管理（创建项目时会提示安装）

#4、使用flyio进行数据交互
cnpm install flyio --save-dev

#5、使用ZanUI小程序组件库（可百度）

5、路由配置

# 1、 main.js配置如下
import Vue from 'vue'
import App from './App'
import MpvueRouterPatch from 'mpvue-router-patch'

Vue.config.productionTip = false
Vue.use(MpvueRouterPatch)
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

# 2、 webpack.base.conf.js配置如下（局部）
const MpvueEntry = require('mpvue-entry')   //vue-router配置

//设置vue-router
const entry = MpvueEntry.getEntry({
  pages: './src/router/index.js',
  app: './src/app.json',
  dist: './dist/wx/'
})

  plugins: [
    new MpvueEntry(),
    // api 统一桥协议方案

# 3、在src文件下创建router文件下，在其中创建index.js文件（其中路由示例如下）
module.exports = [
    {
        path: 'pages/home/index',
        name: 'home',
        config: {   //这部分代码为小程序样式配置（包括小程序顶部小标题/）
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#fff',
            navigationBarTitleText: '皇子直播',
            navigationBarTextStyle: 'black',
            disableScroll: true
        }
    }
]

# 4、 不要忘了在app.json中添加页面
"pages": [
    "pages/home/index"
  ],