# vue2-h5

**Repository Path**: yuyingqianduan/vue2-h5

## Basic Information

- **Project Name**: vue2-h5
- **Description**: vue2+vant+国际化架子
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-09-06
- **Last Updated**: 2024-10-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Description: 项目注释
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-11-21 09:08:25
 * @LastEditors: lhl
 * @LastEditTime: 2021-08-22 11:05:10
-->

# vantpro

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

### vue 移动端项目架构 vue-cli4.x + vant + vuex + vue-router + axios

### 移动端注意事项

### 适配

安装： npm install lib-flexible -S / cnpm install lib-flexible -S
在 main.js 中引入 lib-flexible：import 'lib-flexible'
既然引入的 lib-flexible，则会自动调整视图窗口，所以需要把原始在 index.html 里的<meta name="viewport" content="width=device-width,initial-scale=1.0">注释掉

vue-cli4.x 适配和自动转 rem 插件
npm i amfe-flexible -S / cnpm i amfe-flexible -S
npm i postcss-pxtorem -D / cnpm i postcss-pxtorem -D

### vue.config.js

css: {
loaderOptions: {
postcss: {
plugins: [
require("autoprefixer")({
// 配置使用 autoprefixer
overrideBrowserslist: ["last 15 versions"]
}),
require("postcss-pxtorem")({
rootValue: 75, // 换算的基数
// 忽略转换正则匹配项。插件会转化所有的样式的 px。比如引入了三方 UI，也会被转化。目前我使用 selectorBlackList 字段，来过滤
//如果个别地方不想转化 px。可以简单的使用大写的 PX 或 Px 。
selectorBlackList: ["ig"], // 过滤掉.am-开头的 class，不进行 rem 转换
propList: ["*"],
exclude: /node_modules/
})
]
}
}
}

### 或者在 package.json 中添加以下配置 自动 px 转 rem

"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75, // 设计稿宽度的 1/10（注： package.json 中不允许添加注释）
"propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
}
}
},

### 调试工具

cdn 地址

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>

npm/cnpm 安装
npm install vconsole -S / cnpm install vconsole -S
var vConsole = new VConsole();
console.log('Hello world');

### 转码

npm install babel-polyfill -S / cnpm install babel-polyfill -S
main.js 引入：import 'babel-polyfill';
在 webpack 中的 entry 入口中：entry:['babel-polyfill','./src/main.js']

# api 层 axios

npm install axios -S / cnpm install axios -S
CDN 地址：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

### 项目优化

快、小、省
缓存

// 缓存架构
// 1.缓存不能有两个
// 2.缓存区域的权限
// 3.缓存的问题 (1) 缓存的更新问题
// js 内存 x64 1.4g x86 0.7g

### 项目打包 环境命令配置

本地
测试
生产
package.json 文件加上：对应的打包命令
"build-dev": "vue-cli-service build --mode development",
"build-test": "vue-cli-service build --mode test",
"build-prod": "vue-cli-service build --mode production"

### 打包命令

cnpm run build-dev
cnpm run build-test
cnpm run build-prod

### webpack 热更新失效 如果没有则 安装依赖 webpack-dev-server npm install --save-dev webpack-dev-server / cnpm install --save-dev webpack-dev-server

vue.config.js 文件里面配置
devServer: {
compress: true,
disableHostCheck: true, //webpack4.0 开启热更新
}
"serve": "vue-cli-service serve && webpack-dev-server --open"

### npm 代理设置 1--常用 1

npm config set registry "http://registry.npmjs.org/"

### npm 代理设置 2--常用 2

npm config set registry https://registry.npm.taobao.org

### 自动添加前缀

### 1、根目录下创建 postcss.config.js 文件

module.exports = {
plugins: {
autoprefixer: {}
}
}

### 2、package.json 配置 或者 .browserslistrc 配置

"browserslist": [
"> 1%",
"last 3 versions",
"not ie <= 8",
"chrome >= 14",
"safari >= 3",
"ios >= 8",
"android >= 4.0"
]

### sass less 全局变量报错 建议降低版本 sass-loader@7.3.1 less@5.0.0

ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.

- options has an unknown property 'javascriptEnabled'. These properties are valid:
  object { lessOptions?, additionalData?, sourceMap?, webpackImporter?, implementation? }

### 升级 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

### 升级 npm

更新到最新版本 npm install -g npm

### npm cnpm 报错

关闭 npm 的 https（取消 npm 的 https 认证）
npm config set strict-ssl false
request to https://registry.cnpmjs.org/vue failed, reason: Hostname/IP does not match certificate‘s

### gzip 加速 安装 compression-webpack-plugin 报错 执行 npm install 时安装了最新的版本

npm install --save-dev compression-webpack-plugin@1.1.12

### 骨架屏

1. vue 文件注入 参考 https://www.jianshu.com/p/db7abd05c219配置即可 网上大把相关文章
2. Base64 图片 参考 https://www.cnblogs.com/linxing/p/11060267.html
3. 自动生成 参考 https://github.com/famanoder/dps

#### 本地模拟服务

npm install http-server -g，然后执行 npm run build,之后进入打包的目录 cd dist 执行 http-server

### 国际化 vue-i18n

cnpm i js-cookie -S

cnpm i vue-i18n -S

cnpm i vuex-persist -S

示范只有菜单和头部配置了词条