移动端框架使用说明

基础

介绍

mobile-init-project是一个移动端基础框架，它基于vue和vantUI，路由自动加载，自动全局组件注册，可通过命令行生成页面模板等，详情见项目README.md

前序准备

你需要在本地安装 node (opens new window) 和 git (opens new window)。本项目技术栈基于 ES2015+ (opens new window)、vue (opens new window)、vuex (opens new window)、vue-router (opens new window) 、vue-cli (opens new window) 、axios (opens new window) 、 vant (opens new window)和sass (opens new window)，请求数据使用Mock.js (opens new window)进行模拟，提前了解和学习这些知识会对使用本框架的学习和使用有很大的帮助。

目录结构

├── dist									# 打包后输出的可发布代码
├── public									# 静态资源
│   ├── favicon.ico							# favicon图标			
│   └── index.html							# 首页html
├── scripts									# 脚本
│   ├── generateComponent.js			    # 生成组件模版脚本
│   ├── generateView.js						# 生成页面模版脚本
│   └── template.js							# vue模板
├── src										# 源代码
│   ├── api									# 接口请求
│   ├── assets								# 图片、本地数据等静态资源
│   │   ├── data						    # 本地数据
│   │   └── imgs                            # 图片
│   ├── components							# 公用组件
│   │   └── global                          # 全局自动注册组件
│   ├── filters								# 全局过滤函数：字典、脱敏、时间转换等
│   ├── icons								# 引入使用svg等icons
│   ├── layout								# 框架布局
│   ├── mixins								# 混入全局表单常用校验规则、日期、字典等js调用处理方法
│   ├── router								# 路由
│   ├── store								# 全局 store管理，包含框架配置、登陆、数据字典
│   ├── styles								# 全局样式
│   ├── theme								# element主题配置
│   ├── utils								# 公共工具函数，包含：常用校验规则、cookie、dayjs、脱敏、storage、eventbus
│   ├── views								# 放置页面
│   │   ├── base-module						# 基础模版：信息展示、表单、表格案例展示
│   │   ├── login-module                    #登陆模块：登陆页
│   │   ├── default							# 404/维护页面
│   │   ├── home                            #首页入口
│   │   └── redirect                        #框架重定向页面
│   ├── App.vue								# 入口页面
│   └── main.js								# 入口文件 加载组件 初始化等
│   └── use.js								# 框架公用组件引用
├── .env.prod								# 正式环境：环境变量配置
├── .env.proxy							    # 本地环境：环境变量配置
├── .env.test							    # 测试环境：环境变量配置
├── .eslintignore							# eslint忽略校验目录/文件配置
├── .eslintrc.js							# eslint规则配置
├── .gitignore								# git忽略上传配置文件
├── .npmrc								    # 镜像源配置
├── babel.config.js							# babel配置
├── CHANGELOG							    # 框架更新日志
├── commitlint.config.js				    # git提交代码校验规则拦截配置
├── jsconfig.json							# 快捷文件路径配置
├── package-lock.json						# package.json
├── package.json							# package.json
├── README.md								# README.md
├── vue.config.js							# vue-cli 配置
└── yarn-error.log							# yarn错误日志
└── yarn.lock								# yarn

环境变量

vue-element-admin 4.0 之后是基于 vue-cli来进行构建，所以所有的环境变量配置都是基于vue-cli来实现和控制的。

官方文档 (opens new window)

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

例如

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用

设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用，限制也不一样。

1. 在项目中，也就是src中使用环境变量的话，必须以VUE_APP_开头。例如我们可以在main.js中直接输出：console.log(process.env.VUE_APP_SECRET)
2. 在webpack配置中使用，没什么限制，可以直接通过process.env.XXX来使用
3. 在public/index.html中使用的：分三类：

<%= VAR %> 用于非转换插值  例如：`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">`
<%- VAR %> 用于HTML转义插值
<% expression %> 用于JavaScript控制流

被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。

注意！！！

环境变量必须以VUE_APP_为开头。如:VUE_APP_API、VUE_APP_TITLE

你在代码中可以通过如下方式获取:

console.log(process.env.VUE_APP_xxxx)

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。它一般是被设置为空字符串 ('') 或是相对路径 ('./')，或者你需要使用cdn资源的时候可以设置成域名，但是需要相应的配置

模式

模式是Vue CLI项目中的一个重要概念。默认情况下，Vue CLI项目中有三种模式：

1. development：在vue-cli-service serve下，即开发环境使用
2. production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式环境使用
3. test： 在vue-cli-service test:unit下使用

另外，如果你想要修改模式下默认的环境变量的话可以通过--mode来实现，例如：

以框架中为例

"scripts": {
    "serve": "vue-cli-service serve --mode proxy",			// 对应 .env.proxy
    "build": "vue-cli-service build --report",
    "serve:proxy": "vue-cli-service serve --mode proxy",    // 对应 .env.proxy
    "build:test": "vue-cli-service build --mode test",		// 对应 .env.test
    "build:prod": "vue-cli-service build --mode prod",	    // 对应 .env.prod
    "lint": "eslint --fix --ext .js,.vue, src/"               // eslint校验,自动修复
 }

模式可帮助我们快速的打包不同环境的项目

.gitignore

写入此文件中的文件夹在提交时会被忽略

node_modules/

dist/

babel.config.js

因为有些浏览器不支持es6语法，这个时候如果我们使用了es6语法或者我们引入的插件使用了es6的语法，这个时候我们就需要在babel.config.js中进行配置，具体的配置以引入的组件库中说明为准，如果想要了解可以看后续的webpack章节。

postcss.config.js

因为有些浏览器不兼容css3的新属性，所以需要一个loader postcss-loader 来实现兼容浏览器，其次这个loader需要一个插件autoprefixer 来配合 ，这个插件需要在postcss.config.js 中配置具体可以看后续的webpack章节

README.md

使用前的说明

webpack.config.js

webpack的配置文件，因为我们是使用vue-cli为基础搭建的框架，所以相关配置还是写在vue.config.js中

vue.config.js

vue.config.js

vue.config.js 是一个可选的配置文件，简单的来说就是对 webpack 配置进行了抽象，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。简单的来说就是全局配置cli的文件（这个应该大家都知道我就随口提一下）。

特性

jsconfig.json

配合Path Autocomplete插件使用可以实现代码联想，插件在vscode中安装

在根目录创建jsconfig.json文件代码如下：

{
   "compilerOptions": {
       "baseUrl": ".",
       "paths": {
           "@/*": ["src/*"]
      },
       "target": "ES6",
       "allowSyntheticDefaultImports": true
  },
   "include": ["src/**/*"],
   "exclude": ["node_modules"]
}

命令行生成模板

scripts文件夹

generateComponent.js: 生成公共组件脚本

generateView.js: 生成页面脚本

template.js: vue模板

在项目根目录执行命令：

// 生成页面
npm run new:view

// 页面会生成在views/目录下  如需要多层级请按照路径格式如
输入：test/testin 则会在views创建test文件夹，再在test中创建testin文件夹，最后创建index.vue文件        

// 生成公共组件
npm run new:comp
按照提示加  global/前缀  之后组件文件夹命名请以 y-开头  如: y-test

router

after-each.js

用于根据router中mete属性的title，在路由跳转之后设置浏览器title

setTitle.js

export default function setTitle (title) {
  document.title = title
  document.head.querySelector('title').innerText = title
}

after-each.js

import setTitle from '@/utils/setTitle'
function afterEachHandler (to, from) {
  let { title } = to.meta
  title || (title = to.name)
  if (title) {
    setTitle(title)
  }
}

export default afterEachHandler

main.js

router.afterEach(afterEachHandler)

这里的代码逻辑挺简单的仔细看一下就可以读懂了

before-each.js

路由拦截用于做权限判断和获取用户信息的

适配单位

安装：postcss-px-to-viewport,以宽750px的设计稿进行开发（不用除以2）。自动转换成vw和vh适配屏幕宽高。 已经设置忽略对vant组件的转换。