前端框架

# 爽客邦ES Hybrid APP开发-前端开发框架(基于VUE-CLI)

# 前端框架依赖

# 1.编译时依赖

Vue CLI
copy-webpack-plugin
html-inline-css-webpack-plugin
html-webpack-plugin
inline-chunk-html-plugin
mini-css-extract-plugin
postcss-pxtorem
pug-plain-loader
sass,
sass-loader,

# 2.运行时依赖

vue,
vant,
axios,
crypto-js,
core-js,
echarts,
libpag@,

# 3.三方依赖包

h5lock (移动端手势密码)
arealist (中国地区表)
clipboard (复制文本)

# 介绍

# 爽客邦ES 是一个基于 Vue CLI、Vue.js + APP原生进行快速开发多页面APP的完整系统，提供

通过 @vue/cli 实现的交互式的多页面项目脚手架
项目输出结构为多页面web APP，多页面上传服务器通过服务器与APP原生进行交互，具有快速部署、页面灵活性高、快速迭代等优势
爽客邦ES项目打包文件为本地运行，
爽客邦ES致力于将web APP页面标准化、模块化。提高了传统H5页面在本地加载的安全性。

# 项目开发目录结构

|-- root
  |-- config
    |-- cleanfile.js
    |-- inlinecode.js
    |-- pages.config.js
    |-- split-chunks.js
  |-- public
    |-- index.html
  |-- src
    |-- assets
      |-- api
        |-- .js
      |-- public
        |-- .js
      |-- scss
        |-- .scss
      |-- static
        |-- images
          |-- .png/.jpe?g/.gif/webp
        |-- pag
          |-- .pag
    |-- components
    |-- pages
  |-- .gitignore
  |-- babel.config.js
  |-- jsconfig.json
  |-- package-lock.json
  |-- package.js
  |-- vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 打包目录结构

|-- dist
  |-- static
    |-- css
      |-- .css
    |-- img
      |-- .png/.jpe?g/.gif/webp
    |-- js
      |-- .js/.wasm
    |-- pag
      |-- .pag
  |-- .html

1
2
3
4
5
6
7
8
9
10
11

# 安装

# Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

# 可以使用下列任一命令安装这个新的包

npm install -g @vue/cli

# OR

yarn global add @vue/cli

1
2
3
4
5

# 项目依赖安装

npm i

# OR

yarn

1
2
3
4
5

# 开发

# HTML 和静态资源

# Index.html 文件

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入图标链接,以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接(页面私有逻辑及样式会以内联的形式注入html页面)

# 插值

因为 index 文件被用作模板，所以你可以使用 lodash template 语法插入内容：

<%= VALUE %> 用来做不转义插值；
<%- VALUE %> 用来做 HTML 转义插值；
<% expression %> 用来描述 JavaScript 流程控制。

除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。例如，BASE_URL 的用法：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

# 多页应用配置

爽客邦打包编译为多页面应用，需要对VUE CLI进行多页面配置。
在config/pages.config.js 中的 list 添加已有页面文件名及html标题名，构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能。

# 处理静态资源

静态资源可以通过两种方式进行处理：

在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 进行路径处理。
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 处理(不推荐直接将静态资源放置public文件夹下，这样会导致静态资源会在打包编译后直接放在打包根目录处)

图片资源压缩处理：

你可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将内联图片资源限制设置为 4KiB：

chainWebpack:(config) => {
  config.module
    .rule('images')
    .set('parser', {
      dataUrlCondition: {
        maxSize: 2 * 1024, // 2KiB
      }
    })
},

1
2
3
4
5
6
7
8
9

# 预处理器

pug:爽客邦ES的html都是由pug进行撰写并转义，减少不必要的双标签代码量，并由pug-loader进行转义并编译。

<template lang="pug">
.app
 div(@click="goback")
  img(src="~images/test.png")
 #inputpassword(@click="setsuccess")
 #goon(@click="goindex")
 .lock.bgcfff
 #passwordiswrong(@click="forgetpassword")
 .forgetpassword.c999(@click="forgetpassword") 忘记手势密码
</template>

1
2
3
4
5
6
7
8
9
10

# CSS相关

爽客邦ES项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。

# 引用静态资源

所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 ~ 的前缀来避免歧义。

# 样式预处理器

scss:爽客邦ES前端项目的css与正常MPA并无区别，可定义公共样式与页面私有样式，但在页面中 style的SCOPE标签无论添加与否都无全局生效作用。

<style lang="scss">
  ···
</style>

1
2
3

# 部署

← 目录结构前端项目介绍→