初始化项目

使用vue-cli

• 全局安装vue-cli

  npm install -g @vue/cli

• 创建uni-app

  vue create -p dcloudio/uni-preset-vue my-project-name

• 安装依赖

  npm i

• 运行和发布

  npm run dev:%PLATFORM%
  npm run build:%PLATFORM%

  %PLATFORM% 可取值如下：

可以自定义更多条件编译平台，比如钉钉小程序，参考package.json文档。

安装less

使用npm安装less即可（npm的下载源比较慢，可以使用cnpm）

less和less-loader的版本要降低，因为可能不符合情况。

使用基础css

src\assets\css\base.less

@import url('./base-width.less');
div {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

src\assets\css\base-width.less

.w25b {
  width: 25%;
}

将css引入到公共文件
src\App.vue

<style lang="less">
@import url(@/assets/css/base.less); // 基础样式
@import url(@/assets/css/common.less); // 组件样式
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 14px;
}
view {
  box-sizing: border-box;
}
/*每个页面公共css */
</style>

使用字体图标

• 从https://icomoon.io/中下载字体图标

• 放入项目src\assets\css\fonts下

• 将下载下来的style.css这个文件放到src\assets\css下，更改文件中字体图标文件的引入

  @font-face {
  font-family: 'icomoon';
  src:  url('~@/assets/css/fonts/icomoon.eot?vwddx');
  src:  url('~@/assets/css/fonts/icomoon.eot?vwddx#iefix') format('embedded-opentype'),
    url('~@/assets/css/fonts/icomoon.ttf?vwddx') format('truetype'),
    url('~@/assets/css/fonts/icomoon.woff?vwddx') format('woff'),
    url('~@/assets/css/fonts/icomoon.svg?vwddx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
  }

使用封装的日期的JS

src\utils\DatePrototype.js

/* ================================= date start ======================================== */
/**
 * 对Date的扩展，将 Date 转化为指定格式的String
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
 * eg:
 * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
 * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
 * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
 * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
 * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
 */
// eslint-disable-next-line no-extend-native
Date.prototype.pattern = function (fmt) {
  var o = {
    'M+': this.getMonth() + 1, // 月份
    'd+': this.getDate(), // 日
    'h+': this.getHours() % 12 === 0 ? 12 : this.getHours() % 12, // 小时
    'H+': this.getHours(), // 小时
    'm+': this.getMinutes(), // 分
    's+': this.getSeconds(), // 秒
    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
    S: this.getMilliseconds() // 毫秒
  };
  var week = {
    0: '/u65e5',
    1: '/u4e00',
    2: '/u4e8c',
    3: '/u4e09',
    4: '/u56db',
    5: '/u4e94',
    6: '/u516d'
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  if (/(E+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '/u661f/u671f' : '/u5468') : '') + week[this.getDay() + '']);
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
    }
  }
  return fmt;
};

在src\main.js引入

import '@/utils/DatePrototype'; // 引入日期操作

封装公共组件库

src\plugin\componentGlobal.js

export default {
  install (Vue) {
    // register globally 注册到全局
    // Vue.component('svg-icon', SvgIcon);
  }
};

src\main.js

// 引入全局组件库
import componentGlobal from '@/plugin/componentGlobal.js';
Vue.use(componentGlobal);

使用vue组件

src\components\base\BaseModule.vue

<template>
  <view class="fixedDiv">
    <slot name="content"></slot>
  </view>
</template>
<script>
export default {
};
</script>
<style lang="less" scoped>
.fixedDiv {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

使用

import BaseModule from '@/components/base/BaseModule.vue';
components: { BaseModule },
 <base-module></base-module>

在使用组件的时候，样式必须要写在组件的上面，因为在生成微信小程序的代码的时候，使用的组件的那个标签是不会被去除的。如果不写在组件名称的上面会导致页面样式崩溃

页面相关

添加页面路由

src\pages.json
参考：配置参考地址

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
        // "navigationBarTitleText": "签到"
        "topWindow": false // 当前页面不显示 topWindow
            }
    },
    {
            "path": "pages/editTag/index", // 路径
            "style": {
                "navigationBarTitleText": "管理我的自律项"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "签到",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

页面跳转

1. 使用标签跳转

   <navigator url="/pages/editTag/index">编辑+</navigator>

页面元素相关

参考：页面元素参考地址、页面使用vue的参考

input和软键盘的触发使用

<input placeholder-class="input-placeholder" enterkeyhint="done" :hold-keyboard="true" :focus="addTagInputFocus" v-model="addTagText" ref="addTagInput" type="text" name="" id="" placeholder="请输入新建的自律项" cursor-spacing="10">
<text class="icon-deleteInput icon" v-show="addTagText" @touchend.prevent="delTagText"></text>
// 使用 @touchend.prevent阻止默认事件
// 输入框展示
addTag () {
  this.addTagStatus = true;
  this.$nextTick(() => {
    // 输入框获取焦点
    this.addTagInputFocus = true;
  });
},
// 删除输入框内容的按钮
delTagText () {
  this.addTagText = '';
},