打印/下载
简介
Vue3
配置文件
运行

WebMIS( VueAPP )

采用Vue2和5+Runtime开发,包括APP自动更新、Socket通信、仿手机页面切换效果、底部导航菜单、Scroller滑动、Popup弹出层等功能。 运用模块化思路整体规划项目,分别将项目划分页面、Ui组件、JS模块三个部分,便于维护和扩展。 封装函数,规范命名和参数,统一APP和小程序使用方式,实现一次开发稍加改动便可兼容多种小程序。 另外,这是前后台配套的全栈式解决方案,处理登录、验证、缓存、列队等问题。

Demo

环境要求

  • NodeJS、Yarn

下载

git clone https://github.com/webmiss/base
  • WebMIS-Base > vueapp

安装Node

# 安装
pacman -S nodejs yarn

安装Vue-cli

yarn cache clean
yarn global add @vue/cli

创建项目( v3 )

vue create demo
  • ◉ Choose Vue version
  • ◉ Babel
  • ◯ TypeScript
  • ◯ Progressive Web App (PWA) Support
  • ◉ Router
  • ◉ Vuex
  • ◯ CSS Pre-processors
  • ◉ Linter / Formatter
  • ◯ Unit Testing
  • ◯ E2E Testing 下一步 Use history mode for router?Yes 下一步 Pick a linter / formatter config: Basic 下一步 Pick additional lint features: Lint on save 下一步 Where do you prefer placing config for Babel, ESLint, etc.? In package.json 下一步 Save this as a preset for future projects? Yes

配置文件( vueapp/src/env.js )


const title = 'WebMIS-VueApp';
const baseUrl = 'https://demo-api.webmis.vip/';
const socket = 'wss://demo-api.webmis.vip/wss';

export default {
  dev: false, //开发模式
  title: title, //应用名称
  version: '1.0.0', //应用版本
  baseUrl: baseUrl, //数据地址
  apiUrl: baseUrl+'api/', //数据接口地址
  copy: 'Copyright © WebMIS.VIP 2020',  //版权信息
  /* 请求 */
  request:{
    headers: {
      "Content-Type":"multipart/form-data"  //表单方式
    },
  },
  /* 状态栏 */
  statusBar:{
    height: 48, //默认高度
    color: '#333',  //字体颜色
    bgColor:'#FFF'  //背景颜色
  },
  /* 更新 */
  update: {
    start: true,  //开启更新
    bg: '#24292E',  //背景颜色
    logoBg: '#FFFFFF', //Logo背景
    loading: '#6FB737',  //加载中
    loaded: '#000000', //未加载
    copy: '#666666', //版权颜色
    msgColor: '#999999', //提示颜色
    butColor: '#FFFFFF', //按钮颜色
    butBg: '#6FB737',  //按钮背景
    butText: '下载并安装' //按钮文字
  },
  upIosUrl: '', //IOS下载链接
  /* Login */
  login: {
    start: true,  //Token验证
    api: 'user/token',  //验证接口
    uinfo: 'uinfo', //用户信息
  },
  /* 高德地图 */
  amap: {
    start: false,  //开启定位
    jsapi_key: '',  
  },
  /* Socket */
  socket: {
    start: false, //启动
    server: socket, //链接地址
  },
  /* 消息阅读 */
  msg: {
    content: 'title', //阅读:title(标题)、content(内容)
    browser: false,  // 浏览器信息
  },
  /* 小程序 */
  wx_type: 0, //正式版(0)、测试版(1)、体验版(2)
  wx_id: '', // 应用ID
}

运行

# 进入目录
cd vueapp
# 安装依赖包
yarn install
# 运行
yarn serve
{{copy}}