mpvue 调起子组件的方法_关于 mpvue 和 stylus 的使用

mpvue

一个项目写完了，又来一个项目，一直都使用小程序原生的语法，发现有很多的不方便，而且今后的 市场还是以 Vue 居多，所以决定，接下来的项目都用 Vue 来实现。 当然这里想在小程序中实现 Vue 的语法，只能使用美团基于 Vue 开发的 mpvue 了，其实就是在 render 的时候，把 Vue 的语法渲染成小程序能识别的而已,下面来步入正题:

首先我们还是需要 npm 或者 cnpm 去安装 vue/cli:

npm/cnpm install vue/cli -g

下载好后，执行:

vue init mpvue/mpvue-quickstart my-project

下载好后，需要按装项目配置,执行:

npm/cnpm i

完成后进入，项目根目录，执行:

npm run dev/start

开始编译，编译完成后，可以看到目录下出现一个dist目录，这里就是小程序可以识别的 代码，我们使用小程序打开项目，就可以看到初始化生成的模版;

我们再来分析下目录，和具体使用的方法:

在每一个.vue文件的路径下都有一个main.js文件，这个就是用来将.vue的文件重新调用$mount 的方法，编译 render 成小程序的 wxml,wxss,js 三个文件，所以这个 js 一定要有。

---

可以看到该目录有pages和components目录，这个和 vue 本身是不一样的，因为 vue 中可以使用vue-router来做页面跳转，其他全部都是组件， 而小程序，页面跳转需要使用自带的 API 来跳转，比如navgateto 等，所以pages存放的是页面,components存放的就是组件。

app.json 也就是我们小程序中的全部配置文件,一些相关配置还是在这里配置。

mpvue 使用方法和 Vue 没什么特别
支持: vuex
不支持: axios、vue-router 等

优点:

使用 mpvue 最大的好处就是可以只用 npm，支持三方库，例如 vant、Fly 等，学习成本低，会 Vue 就可以，组件化思想更好，可以使用原生小程序的标签，和生命周期(尽量不用)

缺点:

缺点就是不稳定，总有莫名奇妙的 bug，添加文件需要重新编译，无缘无辜的报错等。

总结:

熊掌和鱼不可兼得，权衡后还是选择 mpvue，因为毕竟小程序只能开发小程序，而对于 vue 的熟练对其他开发有着更好的基础，最关键可以支持的库，让开发更得心应手

---

stylus

在众多的 css 预编译器中，我还是最钟爱这款，简介的语法，强大的函数，和自定义变量功能，让弱智 css 也有的新的春天.

在 mpvue 中使用 stylus 需要对 webpack 做一些配置，需要手动加些代码来实现；

首先安装:

npm/cnpm i stylus -D npm/cnpm i stylus-loader -D

两个都需要下载，一个是使用 stylus 一个是编译器，然后我们在build/webpack.base.conf.js文件下，rules 下写下面的代码:

rules: [
  {
    test: /.styl$/,
    loaders: ["style-loader", "css-loader", "stylus-loader"]
  }
];

意思是添加一条规则将所有的 stylus 代码，全部编译成 style，现在全局已经引入 stylus，我来试试:

<div class="div1">hahaha</div>

---

<style scoped lang="stylus">
.div1
  background red
</style>

去小程序上看看样式:

总结:

使用stylus会大大提升我们写样式的速度，所以一定要选择一款适合自己的预编译语言。

---

最近又开始使用vscode了，重新熟悉它后，发现如果插件玩的好，它会很强，下篇文章讲讲我在编程中它的一些你不为人知的小方法。