# test-sport

**Repository Path**: lijing062815/test-sport

## Basic Information

- **Project Name**: test-sport
- **Description**: 模拟运动项目搭建项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-12-17
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web-sport

#### 介绍
沃乐动App相关H5页面
1. 首页
2. 数据页
3. 绑定亚美账号

## 使用说明

### Compiles and hot-reloads for development
```
npm run dev
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

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



---
## 目录

*   [项目初始化安装说明](#m01)
*   [.gitignore文件夹配置](#m02)
*   [mian.js文件操作](#m03)
*   [router相关](#m04)
*   [新建vue.config.js，及文件中相关配置](#m05)
*   [热更新](#m06)
*   [Vant UI框架使用相关](#m07)
*   [屏幕适配](#m08)
*   [环境输出配置](#m09)
*   [index.html文件相关配置](#m10)



---

<h2 id="m01"></h2>

## 项目初始化安装说明

```
vue create --help 回车
可设置相关操作默认在初始化项目的时候不被执行，
例如
vue create 项目名称 --no-git --clone

-p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
-d, --default                   忽略提示符并使用默认预设选项
-i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
-r, --registry <url>            在安装依赖时使用指定的 npm registry
-g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git                    跳过 git 初始化
-f, --force                     覆写目标目录可能存在的配置
-c, --clone                     使用 git clone 获取远程预设选项
-x, --proxy                     使用指定的代理创建项目
-b, --bare                      创建项目时省略默认组件中的新手指导信息
-h, --help                      输出使用帮助信息

```

```
1.vue create 项目名称 或 vue create --no-git --clone 项目名称（配置可选命令）
```
==警告==

> 如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过  **==winpty vue.cmd create 项目名称==**  启动这个命令。不过，如果你仍想使用 vue create 项目名称，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias vue='winpty vue.cmd' 你需要重新启动 Git Bash 终端会话以使更新后的 bashrc 文件生效
```

2.选择Manually select features 回车
<!--“>” 箭头指向 Manually select features-->

3.选择 "Babel" "Css Pre-processors"
<!--选中方法： 箭头“>”向要选中的选项，回车-->

4.Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) Y 回车

5.选择 Sass/SCSS (with dart-sass) 回车

6.选择 In dedicated config files 回车


“Save this as a preset for future projects? (y/N)”   输入N 回车
<!--开始初始化项目，安装各依赖包-->


```
<h2 id="m02"></h2>

## .gitignore文件夹配置

```

添加
.eslintrc.json
.eslintrc.js
package-lock.json
```

<h2 id="m03"></h2>

## mian.js文件操作

```
1.去掉 import Vue from 'vue'
<!--（index.html里面使用外部链接方式引入的情况下才需要去除，其他也一样）-->

```
<h2 id="m04"></h2>

## router相关
```
直接使用Vue.use(VueRouter)，不需要import引入（index.html里使用外部链接引入router插件情况下）其他操作方法一样
// npm 安装woyun-base后 引入
import { saveToken } from 'woyun-base'
Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    base: '/sport',
    routes: [...],
    scrollBehavior (to, from, savedPosition) {
        // 解决A页面可滑动，跳转到可滑动的B页面会默认定位到A页面滚动位置
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (to.hash) {
                    resolve({ selector: to.hash })
                } else {
                    if (savedPosition) {
                        resolve(savedPosition) //return savedPosition
                    } else {
                        resolve({ x: 0, y: 0 })
                    }
                }
            }, 100)
        })
    }
})
// 默认存储路由有token存储到本地，设置title
router.beforeEach((to, from, next) => {
    let accessToken = to.query.access_token
    if (accessToken && accessToken != null) {
        saveToken(accessToken)
    }
    if(to.meta.title) {
        document.title = to.meta.title
    }
    next()
})
export default router
```
<h2 id="m05"></h2>

## 新建vue.config.js，及文件中相关配置

```
const path = require('path')

module.exports = {
    publicPath: '/sport/', // /项目路径名称/   基本路径 后台需要
    outputDir: 'dist', // 输出文件目录
    lintOnSave: false, // eslint-loader 是否在保存的时候检查
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    // webpack配置
    chainWebpack: (config) => {},
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            // 将每个依赖包打包成单独的js文件
            let optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name(module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`
                            }
                        }
                    }
                }
            }
            Object.assign(config, {
                optimization
            })
        } else {
            // 为开发环境修改配置...
            config.mode = 'development'
        }
        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                extensions: ['.js', '.vue', '.json'],
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components'),
                    '@p': path.resolve(__dirname, './src/pages')
                } // 别名配置
            },externals: {
                vue: 'Vue'
            }
        })
    },
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    // css相关配置
    css: {
        extract: false, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps?
        loaderOptions: {
            css: {}, // 这里的选项会传递给 css-loader
            sass: { data: '@import "@/assets/css/base.scss";' },
            postcss: {} // 这里的选项会传递给 postcss-loader
        }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
        modules: false // 启用 CSS modules for all css / pre-processor files.
    },
    parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
    pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0', // 允许外部ip访问
        port: 8022, // 端口
        https: false, // 启用https
        overlay: {
            warnings: true,
            errors: true
        }, // 错误、警告在页面弹出
        proxy: {
            '/api': {
                target: 'http://mobiletst.aoyunsoft.com',
                changeOrigin: true, // 允许websockets跨域
                // ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        } // 代理转发配置，用于调试环境
    },
    // 第三方插件配置
    pluginOptions: {}
}

```
<h2 id="m06"></h2>

## 热更新
关于修改样式，页面不刷新问题

```
//vue.config.js中配置

<!--css属性下 extract的属性值 为false,如果要使用css分离插件功能，则需要找另外的配置方法，此处未做进一步研究-->
module.exports = {
    css: {
        extract: false, // 是否使用css分离插件 ExtractTextPlugin
    },
}

```
<h2 id="m07"></h2>

## Vant UI框架使用相关

##### 1.安装
```
npm i vant -S
```
##### 2.组件引入
方法一：使用 babel-plugin-import (推荐)

```
//# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

```





```
// .babelrc 中配置(vue-cli3以下)
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}


// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

```



```
import {Button} from 'vant';

Vue.use(Button);

按官网所说使用即可
```

方式二. 按需引入组件
在不使用插件的情况下，可以手动引入需要的组件


```
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
```

方式三. 导入所有组件

```
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
```

----

<h2 id="m08"></h2>

## 屏幕适配


参考文档：https://www.w3cplus.com/mobile/vw-layout-in-vue.html

1.配置 npm 安装依赖
```

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-import postcss-loader postcss-url -D

```
2.配置 .postcssrc.js 文件 （vue-cli3.0以上在postcss.config.js）


```
module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": {},
        "postcss-aspect-ratio-mini": {},
        "postcss-write-svg": {utf8: false},
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 375,// 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            viewportHeight: 667,// 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置著作权归作者所有。
            unitPrecision: 2,// 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）著作权归作者所有。
            viewportUnit: 'vw',// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名著作权归作者所有。
            selectorBlackList: ['.ignore', '.hairlines'],
            minPixelValue: 1,// 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值著作权归作者所有。
            mediaQuery: false , // 允许在媒体查询中转换`px`
            // <del>"postcss-viewport-units":{},<del>
            "cssnano": {
                preset: "advanced",
                autoprefixer: false,
                "postcss-zindex": false
            },
        }

    }
}

```
3.用法:使用px单位，会自动编译成vw
```
 .title-vh
    {
        font-weight: bold;
        margin-left: 25px;
        margin-bottom: 12px;
        font-size: 18px;
    }
```
4.新项目开发css规范：需要在对应的项目文件夹下新建单独的css或scss文件。目的：为了方便vw方案替换rem方案


5.参考项目：vue-dome

<h2 id="m09"></h2>
## 环境输出配置
##### 1. 修改package.json文件

```
{
    "scripts": {
    "serve": "node scripts/init_package.js && vue-cli-service serve",
    "deploy": "node scripts/init_package.js && vue-cli-service build",
    "postdeploy": "node scripts/create_version_file.js",
    "dev": "npm run serve -- --mode dev",
    "tst": "npm run serve -- --mode test",
    "pre": "npm run serve -- --mode pre",
    "prod": "npm run serve -- --mode prod"
  }
}
```

##### 2. 根目录创建文件夹scripts并创建 create_version_file.js和 init_package.js
###### create_version_file.js文件内容：

```

const fs = require('fs')
const fd = fs.openSync('dist/.version', 'w')

fs.writeSync(fd, process.env.npm_package_version)

fs.closeSync(fd)
```
###### init_package.js文件内容：


```
console.log('init .env')

const fs = require('fs')
const fd = fs.openSync('.env', 'w')

let cnt = '# 通用'
cnt += '\r\n' + 'VUE_APP_PROJECT_NAME=' + process.env.npm_package_name
cnt += '\r\n' + 'VUE_APP_PROJECT_VERSION=' + process.env.npm_package_version
fs.writeSync(fd, cnt)

fs.closeSync(fd)
```

3. 根目录创建 .env、 .env.dev 、 .env.pre、 .env.prod、 .env.test文件
###### .env文件内容：

```
# 通用
VUE_APP_PROJECT_NAME=web-sport
VUE_APP_PROJECT_VERSION=1.0.0
```

###### .env.dev文件内容：

```
# npm环境
NODE_ENV=development
# 内部测试环境
VUE_APP_WEB_ENV=dev
# API环境
VUE_APP_API_ENV=tst
```

###### .env.pre文件内容：

```
# npm环境
NODE_ENV=production
# 预发布环境
VUE_APP_WEB_ENV=pre
# API环境
VUE_APP_API_ENV=prod
```

###### .env.prod文件内容：

```
# npm环境
NODE_ENV=production
# 生产环境
VUE_APP_WEB_ENV=prod
# API环境
VUE_APP_API_ENV=prod
```

###### .env.test文件内容：

```
# npm环境
NODE_ENV=production
# 外部测试环境
VUE_APP_WEB_ENV=tst
# API环境
VUE_APP_API_ENV=tst
```
<h2 id="m10"></h2>

## index.html文件相关配置


```
1.设置手机端屏幕不可放大缩小
<meta name="viewport"  content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2.引入相关依赖
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/vue-router/3.0.4/vue-router.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.min.js"></script>

3.html 最后引入，调试用
<script>
    window.onload = function () {
        if (window.prj.web_env !== 'prod') {
            javascript:(function(e){
                e.setAttribute("src","https://mobile.aoyunsoft.com/vconsole.min.js");
                document.getElementsByTagName("html")[0].appendChild(e);
                e.onload = function () {
                    new VConsole()
                }
            })(document.createElement("script"));void(0);
        }
    }
</script>


```