vue-h5-template Vue+Vant

#使用流程 1.复制项目 2.安装依赖 npm install or yarn install 3.修改vue.config.js,src/config/env.*.js(环境配置文件),调整需要页面，如百度统计[public/index.html,actionInitEndBack()] 4.npm run serve

#aliyun，docker测试环境

构建脚本
# input your command here
yarn install
npm run build

部署脚本
#! /bin/bash
dirName=$(date "+%Y-%m-%d_%H-%M-%S")
fileDev="/home/publish/vueh5template/unzip/${dirName}"
mkdir -p ${fileDev}
tar zxvf /home/publish/vueh5template/package.tgz -C $fileDev
\cp -rf ${fileDev}/* /home/publish/vueh5template/runcode

ECS
mkdir /home/publish/vueh5template/nginx_conf,/home/publish/vueh5template/runcode,/home/publish/vueh5template/unzip
vim deault.conf 同项目dockerconfig default.conf

host api.vueh5template.com 到指定ip 

docker run -d -p 50808:80 -v /home/publish/vueh5template/runcode:/usr/share/nginx/html -v /home/publish/vueh5template/nginx_conf:/etc/nginx/conf.d/ --restart=always --name vue-h5-template nginx:latest

启动项目

package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development
通过 npm run stage 打包测试 , 执行 staging 需要测试环境配置nginx重写404到index，避免vue页面刷新404
通过 npm run build 打包正式 , 执行 production 需要环境配置nginx重写404到index，避免vue页面刷新404

router.config.js 参数解释

meta 内参数：keepAlive 是否缓存页面（配合） excludeScroll 是否排除滚动（特定情况下配合keepAlive使用） visitorCheck 是否进行游客验证正常情况下 visitorCheck和loginCheck只有一个需要检查，也只能设置1个为true loginCheck 是否进行登录验证后端接口也会校验权限，并返回对应值，前端先行校验一次，如业务较为复杂可考虑直接放弃全都校验全由后端处理。

二级目录模式需调整地方

vue.config.js module.exports 下 publicPath: '/二级目录名/'

Nginx 配置

兼容 nginx配置
//// 二级域名模式
   location / {
      root /root/server/vue/wap/; #项目路径
      index index.html;                        
      try_files $uri $uri/ /index.html; #匹配不到任何静态资源，跳到同一个index.html 主要是加入这句
        # 如果try_files不生效可以尝试改为 
        #if (!-e $request_filename){
        #                rewrite ^/(.*) /index.html last;
        #            }
    }

nginx 加入不缓存index.html 防止不刷新无法加载最新 需配合下方index.html修改
location = /index.html {
    add_header Cache-Control "no-cache, no-store";
    root /root/server/vue/wap/; #项目路径
          index index.html;                        
          try_files $uri $uri/ /index.html; #匹配不到任何静态资源，跳到同一个index.html 主要是加入这句
            # 如果try_files不生效可以尝试改为 
            #if (!-e $request_filename){
            #                rewrite ^/(.*) /index.html last;
            #            }
}



// 二级目录模式
        location ^~ /abc/ {
                index index.html;
      try_files $uri $uri/ /abc/index.html; #匹配不到任何静态资源，跳到同一个index.html 主要是加入这句
        # 如果try_files不生效可以尝试改为 
         #   if (!-e $request_filename){
          #      rewrite ^/(.*) /lcyf-webs/index.html last;
          # }
            autoindex  off;
        }

nginx 加入不缓存index.html 防止不刷新无法加载最新(二级目录模式) 需配合下方index.html修改
location = /abc/index.html {
    add_header Cache-Control "no-cache, no-store";
}

-----
index.html页面被缓存导致没有刷新处理
index.html加入
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">



----------跨域问题在本地开启 proxy
注意将 config/env.development.js  中 baseApi: '/api' 设置为api api对应proxy配置的api

预定义

别名统一@开头静态资源尽量带上别名符号访问如~@,~assets 避免不必要混乱

设计尺寸：375，在非style内联样式中可直接用px编写代码，将自动按照375比例转换为rem

layout 使用：layout模板存放 layouts src/router/router.config.js 添加

统一样式处理公共样式 src/assets/css/index.scss 全局样式统一目录需要局部覆盖在页面 <style lang="scss" scoped> 中单独处理

混入样式 src/assets/css/mixin.scss 包含了常用的复杂语法可通过@include 快速引用

全局css变量 src/assets/css/variables.scss 统一变量目录公共css属性值例如主题颜色字体距离等均写入此目录在其他css中进行引入便于后续统一维护整体样式

vant全局样式覆盖 src/assets/css/vant-overwrite.scss vant组件大部分都可以自定义相关内容不建议进行全局vant样式覆盖需要完全自定义vant主题可以使用less覆盖见 vant文档

对 https://github.com/sunniejs/vue-h5-template.git 根据自身业务进行了调整

调整内容:

默认使用history模式

加入路由守卫动态设置 title 并加入项目名

注意keep-alive可以结合activated+deactivated 动态控制数据 keep-alive 调整，改为通过全局变量自定义控制滚动条位置,通过router/index.js scrollPositionList 保存y滚动条位置例如: {'/about':30,'/home':90} 路由前置守卫+keepAlive true 控制是否记录滚动条位置 this.setScrollPosition() 也可扩展为手动处理

// 如果涉及到部分页面使用了 fixed或者absolute 导致无法在最外层获取到滚动条和设置滚动条的情况需要自行在相关页面进行维护，router.config.js中excludeScroll字段为判断全局滚动设置例如自定义为：
//////// ex 路由中加入 excludeScroll: true pageContainerRef 为滚动元素的 ref activated() { if (this.$route.meta.keepAlive === true) { // this.gotoScrollPosition() this.$refs.pageContainerRef.scrollTop = this.scrollPositionList[this.$route.path] } }, beforeRouteLeave(to, from, next) { // 当使用自定义页面滚动配置的时候需要在路由通过 excludeScroll: true 排除全局的滚动条设置防止覆盖 if (from.meta.keepAlive === true) { // 由于部分html结构问题导致需要单独处理滚动条位置 this.setScrollPosition(null, this.$refs.pageContainerRef.scrollTop) } next() },

 ///对于部分页面需要动态控制是否应该刷新采用 
 this.getRefreshStaticPage,this.setRefreshStaticPage
 
 例如:
   activated() {
     // 根据全局变量控制是否刷新页面
     if (this.getRefreshStaticPage()) {
       this.setRefreshStaticPage()
       this.loadData()
     }
   },
   mounted() {
     // 当非刷新的适合调用看，防止重复调用两次
     if (!this.getRefreshStaticPage()) {
       this.loadData()
     }
   },

/////// ex

在需要缓存的页面通过 if (from.meta.keepAlive === true) { vue.gotoScrollPosition() // 如果为需要缓存调整滚动条位置 } 获取之前设置的滚动条位置并跳转到指定位置

快捷跳转页面 gotoPath('/path?id=123')

快捷返回前一页 gotoBack

快捷路由push routerPush({ name: 'A-b', params: { id: 123, name: 'name' })

request 加入timeout可以动态设置超时时间，，根据需要维护,和 hideloading同级

目录结构

├── public 静态文件目录
│   ├── dist 旧web html文件目录，直接将原html项目代码拷贝即可，注意 需要修改底部我的跳转地址到 /my
├── src 源码地址
│   ├── api 接口封装地址
│   ├── assets 静态资源
│   ├── components 组件
│   ├── config 环境配置文件
│   ├── filters 数据过滤函数封装
│   ├── plugins 使用的插件配置
│   ├── router 路由配置
│   ├── store 状态封装
│   ├── utils 常用函数封装
│   ├── views 视图目录
│   │   ├── apitest 统一测试接口上线后可删除 
│   │   ├── goods 产品页面目录 - 由于使用了旧产品html 目前该目录未使用
│   │   ├── home 主页目录 - 由于使用了旧产品html 目前该目录未使用，行后根本可写入此目录
│   │   ├── layouts 页面模板目录
│   │   ├── my 我的页面目录
│   │   ├── myteam 我的团队目录
│   │   ├── order 订单目录 - 由于使用了旧产品html 目前该目录未使用，行后根本可写入此目录
├── webroot 测试或生产打包后的跟目录文件，由于旧项目使用的dist为了避免混乱使用了这个名字
├── vue.config.js 环境配置文件

缓存页面动态变更方案2 适用于在动态控制缓存页面场景较多的业务也可尝试同时一起使用有待测试

<keep-alive :include="keepAlivePage">
          <router-view></router-view>
</keep-alive>

<script>
  computed: {
    ...mapGetters([
      'keepAlivePage'
    ])
  }
</script>

VUEX state加入数组：
const state = {
  keepAlivePage: [] // 需要缓存的页面，如果说你一开始就要缓存，那么你可以在这里设置初始值，如果你不需一开始就设置缓存，那么设置为空，再通过某种条件通过mutations或者actions改变keepAlivePage
}

getter中加入：
const getters = {
  keepAlivePage: state => state.settings.keepAlivePage // 获取需要缓存的页面
}
export default getters

动态控制：
this.$store.dispatch('settings/addKeepAlivePage', 'Home') //'Home'就是你要增加页面缓存的名称。

VUEX actions中加入：
const actions = {
  addKeepAlivePage ({ commit }, name) {
    commit('ADD_KEEP_ALVE', name)
  }
}

VUEX mutations中加入：
const mutations = {
 ADD_KEEP_ALVE: (state, name) => {
    state.keepAlivePage = state.keepAlivePage.concat(name)
  }
}

注意！！这里要特别注意页面组价的名字要和router设置页面的名字要一一对应，不然的话接下来的需求就会实现不了！！

来源地址
https://blog.csdn.net/qq_42268364/article/details/102368148

环境安装流程

win 10 nodejs 安装流程 vue项目搭建过程

win10下安装node和npm 第一步:官网 https://nodejs.org/zh-cn/download/ 下载免安装的压缩包选择 Windows 二级制文件(.zip) 64位版本

第二步:解压下载的压缩文件例如：node-v14.15.4-win-x64.zip（注意不要解压在中文路径下或者C盘Windows、Program Files等需要管理员权限的目录下）,解压完整后在解压出的目录（例如node-v14.15.4-win-x64）中创建两个文件node-cache,node-global用来指定npm的模块路径和缓存路径(类似于java的maven库)

第三步:配置环境变量.在环境变量->系统变量下新建一个变量，变量名为NODE_HOME ,变量值为node-v14.15.4-win-x64所有目录的绝对路面。添加如下%NODE_HOME%,%NODE_HOME%\node-global两个环境变量到path ,点击系统路径里的Path,点击新建：输入:%NODE_HOME% 添加后在新建输入:%NODE_HOME%\node-global 注意添加完环境变量后关闭IDE编辑器或命令或重启电脑

第四步:打开cmd,配置刚才新建的两个文件夹 npm config set prefix "D:\Program Files (x86)\nodejs\node-v12.10.0-win-x64\node-global" npm config set cache "D:\Program Files (x86)\nodejs\node-v12.10.0-win-x64\node-cache" 注意这里的文件夹为自己的安装目录

查看安装的node和npm cmd下输入 node --version cmd下输入 npm --version

第五步安装 yarn ，由于国内npm经常安装缓慢可用考虑用yarn代替

cmd 下输入 npm install -g yarn

安装完成后即可到该项目目录下运行： npm install 如果此命令安装没有反应可用执行 yarn install

npm yarn均无法安装改用淘宝镜像执行如下命令。设置淘宝为国内镜像源(相当于maven设置阿里是国内的远程镜像仓库) 打开cmd输入 npm config set registry https://registry.npm.taobao.org 设置完了输入 npm config get registry查看设置的国内镜像对不对

安装淘宝镜像后重新执行 npm install 或 yarn install 任然无法安装完成则改为使用cnpm 由于cnpm安装的目录有时存在未知问题一般最后采用

安装淘宝镜像后npm用cnpm代替，其它命令不变 npm install -g cnpm --registry=https://registry.npm.taobao.org

执行 cnpm install 完整安装

通过 npm run serve 启动本地 , 执行 development
通过 npm run stage 打包测试 , 执行 staging
通过 npm run build 打包正式 , 执行 production

执行 npm run serve 将自动打开测试网页

基于 vue-cli4.0 + webpack 4 + vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架

掘金: vue-cli4 vant rem 移动端框架方案

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

本示例 Node.js 12.14.1

启动项目


git clone https://github.com/coder1379/vue-h5-template

cd vue-h5-template

npm install

npm run serve

√ Vue-cli4
√ 配置多环境变量
√ rem 适配方案
√ vm 适配方案
√ VantUI 组件按需加载
√ Sass 全局样式
√ Vuex 状态管理
√ Vue-router
√ Axios 封装及接口管理
√ Webpack 4 vue.config.js 基础配置
√ 配置 alias 别名
√ 配置 proxy 跨域
√ 配置打包分析
√ 配置 externals 引入 cdn 资源
√ 去掉 console.log
√ splitChunks 单独打包第三方模块
√ 添加 IE 兼容
√ Eslint+Pettier 统一开发规范

✅ 配置多环境变量

package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境

通过 npm run serve 启动本地 , 执行 development
通过 npm run stage 打包测试 , 执行 staging
通过 npm run build 打包正式 , 执行 production

"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}

配置介绍

以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。
比如,VUE_APP_ENV = 'development' 通过process.env.VUE_APP_ENV 访问。
除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL

在项目根目录中新建.env.*

.env.development 本地开发环境配置

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

.env.staging 测试环境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

.env.production 正式环境配置

 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV development staging production
变量我们统一在 src/config/env.*.js 里进行管理。

这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？
修改起来方便，不需要重启项目，符合开发习惯。

config/index.js

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

配置对应环境的变量，拿本地环境文件 env.development.js 举例，用户可以根据需求修改

// 本地环境配置
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:9018', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

根据环境不同，变量就会不同了

// 根据环境不同引入不同baseApi地址
import { baseApi } from '@/config'
console.log(baseApi)

马杰 / vue-h5-template .gitee-modal { width: 500px !important; }

vue-h5-template Vue+Vant

启动项目

router.config.js 参数解释

二级目录模式需调整地方

Nginx 配置

预定义

调整内容:

目录结构

缓存页面动态变更方案2 适用于在动态控制缓存页面场景较多的业务 也可尝试同时一起使用 有待测试

环境安装流程

Node 版本要求

启动项目

✅ 配置多环境变量

配置介绍

✅ rem 适配方案

PostCSS 配置

✅ vm 适配方案

1.安装依赖

2.修改 .postcssrc.js

3.删除原来的 rem 相关代码

✅ VantUI 组件按需加载

安装插件

使用组件

✅ Sass 全局样式

目录结构

自定义 vant-ui 样式

父组件改变子组件样式 深度选择器

全局变量

✅ Vuex 状态管理

✅ Vue-router

✅ Axios 封装及接口管理

接口管理

如何调用

✅ Webpack 4 vue.config.js 基础配置

✅ 配置 alias 别名

✅ 配置 proxy 跨域

✅ 配置 打包分析

✅ 配置 externals 引入 cdn 资源

✅ 去掉 console.log

✅ splitChunks 单独打包第三方模块

✅ 添加 IE 兼容

✅ Eslint + Pettier 统一开发规范

鸣谢 ​

简介

发行版

贡献者

近期动态

搜索帮助

马杰 / vue-h5-template

缓存页面动态变更方案2 适用于在动态控制缓存页面场景较多的业务也可尝试同时一起使用有待测试

父组件改变子组件样式深度选择器

✅ 配置打包分析

鸣谢