mpvue框架开发流程总结(基本配置和一些问题)

1. 创建项目

在命令行中进入到想要创建项目的目录 开发文档

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global [email protected]

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

2. 需要哪些三方库

• 网络库：flyio
• css预处理：node-sass [email protected] （sass-loader最新版是8.0+，会和node-sass有冲突，最好降版本）

3. 处理最基本的css样式

App.vue 的 style 添加：

page{
  height: 100%;
  color: #404040;
  font-size: 14px;
}

4. 抽取公共样式和定义样式变量

• src下新建文件 styles/common.scss、styles/variable.scss

├── styles
│   ├── common.scss       // 公共样式
│   └── variable.scss     // 样式变量

• common.scss 内容

// 引入变量  ==>> 可以使用sass
@import "~@/styles/variable.scss";

.pageContainer {
  width: 100%;
  height: 100vh;
  position: relative;
  background: $back-color;
}

• variable.scss 内容

$theme-color: #DFB994;      // 主题色

$back-color: #EEEEEE;       // 浅色背景

• 在App.vue引入公共样式

<style lang="scss">
    /* 导入共用样式 
      注意：因为 common.scss 使用了sass，所以需要在 App.vue 的style标签内加上 lang="scss"
      并且不能加上 scoped （这里需要全局使用，不能加上作用域）
    */
    @import 'styles/common.scss';
    ...
style>

• 在想要的页面中使用样式变量

<style lang="scss" scoped>
@import '~@/styles/variable.scss';
#childDetail{
  color:
}
style>

5. 在mpvue中引入vant-weapp

• 在github上下载 vant-weapp的包
• 将其中的dist目录复制到项目static下，并改名vant
• 如果使用了esLint，修改配置文件.eslintignore，添加忽略static/vant/*.*
• 在开发工具 => 项目 => 本地设置 => 勾选 “ES6 转 ES5”
• 在开发工具 => 项目 => 本地设置 => 将调试基础库改为 “2.10.3” ==>> 解决报错：wx.nextTick is not a function;at undefined page onInput function

6. 处理全局的基本样式和 利用变量修改Vant的样式

在App.vue的style里面加上以下内容：

<style lang="scss">
/* 导入共用样式 */
@import 'styles/common.scss';
page{
  height: 100%;
  color: #404040;
  font-size: 14px;
  background: #F0EEEF;

  /* 利用变量名   全局修改vant样式 */
  /* pupop 的遮罩层背景色 */
  --overlay-background-color: rgba(0, 0, 0, 0.2);
}
style>

参考定制Vant主题 => 定制全局主题样式
注意：利用变量名，全局修改vant样式时，需要在配置文件的变量前面加上 --，如：变量为overlay-background-color，我们修改是需要写为--overlay-background-color，注意值不能为变量

Vant颜色变量请参考配置文件

========= 遇到的问题 ==========

7. mpvue中的flex

在mpvue中使用flex布局时，需要注意 flex:1 会有一定的问题，最好加上具体的宽度或者高度；而且在pc或者公众号上设置为0是可以的，但在mpvue里面必须是具体的值，可以使用calc计算

8. 禁止页面拉动（非禁止小下拉刷新）

页面的mian.json中配置
"disableScroll": true,
注意：必须配置在页面级别，全局配置无效

9. vant-weapp中radio、field等表单组件

这些表单组件在获取对应的值时，官方文档写的是：

• radio、field组件 change 事件中通过 event.detail 为当前输入的值，但是这样获取的单个字符的对象；需要通过 event.mp.detail 获取

10. mpvue中不是在template中使用表达式

可以使用 computed 和 methods 处理后返回一个变量。使用这个变量在template中显示

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！