学习mpvue记录

最新推荐文章于 2024-12-10 00:04:01 发布

Amyuan的笔记

最新推荐文章于 2024-12-10 00:04:01 发布

阅读量286

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/Ee2222/article/details/82894206

版权

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍如何使用MPVue框架初始化项目，安装必要依赖如sass-loader、node-sass及vue-template-compiler，解决eslint报错问题，配置插件如mpvue-entry和mpvue-router-patch，集成原生小程序UI如vant-weapp，以及如何引入iconfont图标和配置vuex状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

vue init mpvue/mpvue-quickstart learn-mpvue

npm install sass-loader node-sass --save-dev
npm install vue-template-compiler -D

eslint

规避报错
注释掉webpack.base.conf.js里的

      // {
      //   test: /\.(js|vue)$/,
      //   loader: 'eslint-loader',
      //   enforce: 'pre',
      //   include: [resolve('src'), resolve('test')],
      //   options: {
      //     formatter: require('eslint-friendly-formatter')
      //   }
      // },

npm run lint
注意一定要在package.json里面加--fix

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "lint": "eslint --fix --ext .js,.vue src"
  },

插件

mpvue-entry 集中式页面配置
mpvue-router-patch 路由管理

用原生小程序UI

以 vant-weapp 为例，把文件复制到项目的/static/vant/目录下，然后在页面配置里写用到的组件，即可

{
  "usingComponents": {
    "van-button": "/static/vant/button/index",
  }
}

引 iconfont 图标

目前最优的方式是将图标添加至项目，然后用font-class方式引入
在这里插入图片描述

将链接里的css右键打开复制到static目录下的iconfont.css里
然后在App.vue目录下引入

@import '../static/css/iconfont.css';

用的时候

<i class="iconfont icon-zhuxiao"></i>

就可以了

配置vuex

比原来的vue项目要多这一步：
main.js中引入store, 并绑定到Vue构造函数的原型上，这样在每个vue的组件都可以通过this.$store访问store对象

import store from './store/index'
Vue.prototype.$store = store