目录指南
public
|- favico.icon // 网页icon
|- index.html // 页面模板（页面三要素），cdn.
src
assets
|-images //图片
|-sf-common // sf公共组件的图片
|-common // 项目的公共图片
|-home // home页面的图片
|-store // store页面的图片，其他页面的图片以此类推
|-styles //公共样式
|-function.scss // 自定义的scss函数
|-variables.scss // 自定义的属性
|-reset.scss // 样式重置文件
|-mixin.scss // mixin函数
|-flex.scss // flex布局class，其他类型以此类推grid,定位等等
|-fonts // 字体文件
|-svg // svg文件
....
assets
images //图片
|- sf-common // sf公共组件的图片
|- common // 项目的公共图片
|- home // home页面的图片
|- store // store页面的图片，其他页面的图片以此类推
styles //公共样式
|- function.scss // 自定义的scss函数
|- variables.scss // 自定义的属性
|- reset.scss // 样式重置文件
|- mixin.scss // mixin函数
|- flex.scss // flex布局class，其他类型以此类推grid,清除浮动、定位等等常用class可以定义
fonts // 字体文件
|- ...
svg // svg文件
|- ...
components
SFCommon // 可复用的专题全局组件文件夹
|- sf-address // 地址组件
|- sf-comment // 评论组件
|- sf-dialog // 对话框组件
|- sf-menu // 菜单组件
|- sf-open-app // 打开app组件
|- ...
Dialog // 地址弹窗
|- ...
registration.js // 全局组件注册文件
config
index.js // api基础配置、环境配置
sfConfig.js // 网站标题、上下文
mixin
index.js // 多页面模式
xxx.js // 多人模式，以vuex的module名或者页面名类推
global.js // 全局方法混入
plugins
vant.js // 第三方组件的引入
router
index.js // 路由定义文件
service
api.js // 多页面模式下api文件 !![多人模式]新增xxx.js以views文件夹下页面文件夹命名类推
mapPendingRequests.js // axios请求增删处理
request.js // axios请求方式、请求拦截、loading、响应码等等的封装处理
store
// 多页面模式
// index.js
utils
bridge.js // 客户端桥方法
SFCache.js // 缓存方法
utils.js // 公用方法
views
index // 页面文件夹，!![多人模式]在views下新增xxx文件夹
|- index.vue // 页面模板
|- components //页面组件
App.vue
App.vue // vue路由容器组件
main.js
main.js // vue初始化组件
permission.js
permission.js // 路由钩子、权限、全局请求
pagkage-lock.json
版本锁，每次上传(yarn同理)
package.json
npm下载的版本
vue.config
参考vue官方配置，采用链式结构配置脚手架
配置文件
const SFConfig = require('./src/config/sfConfig')
const path = require('path')
const fs = require('fs')
const argv = process.argv
console.log('process.argv值', argv)
const config = {}
for (var i = 0; i < argv.length; i++) {
if (argv[i] === '--sfenv') {
config['--sfenv'] = argv[i + 1]
}
if (argv[i] === '--sfcdn') {
config['--sfcdn'] = argv[i + 1]
}
}
process.env.SF_ENV = config['--sfenv']
process.env.SF_CDN = config['--sfcdn']
console.log('SFENV：' + process.env.SF_ENV)
console.log('======>> process.env.NODE_ENV = ', process.env.NODE_ENV)
console.log('======>> process.env.SF_CDN = ', process.env.SF_CDN)
console.log('======>> process.env.VUE_APP_SF_ENV = ', process.env.SF_ENV)
module.exports = {
lintOnSave: true,
pages: {
index: {
// entry for the page
entry: 'src/main.js',
// the source template
template: 'public/index.html',
// output as dist/index.html
filename: 'index.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: SFConfig.websiteTitle,
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
},
productionSourceMap: process.env.NODE_ENV !== 'production',
css: {
loaderOptions: {
sass: {
prependData: `
@import "@/assets/styles/global.scss";
@import '@/assets/styles/mixin.scss';
`
},
postcss: {
plugins: [
// 设计稿宽度的1/10，一般为75
require('postcss-px2rem-exclude')({
remUnit: 75,
exclude: /node_modules|vant|ipad/ // 指定忽略文件夹不用rem转换
}) // 换算的基数
]
}
}
},
outputDir: path.resolve(__dirname, `../../release/h5/act/${SFConfig.ztContext}/`),
publicPath: `/h5/act/${SFConfig.ztContext}/`,
chainWebpack: config => {
if (process.env.SF_CDN === 'true') {
config
.module
.rule('images')
.test(/.(jpg|png|gif)$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10240, // 10k
// 以下配置项用于配置file-loader
// 根据环境使用cdn或相对路径
publicPath: `https://rss.sfacg.com/web/pages/act/${SFConfig.ztContext}/img-cdn`,
// 将图片打包到dist/img文件夹下, 不配置则打包到dist文件夹下
outputPath: 'img-cdn',
// 配置打包后图片文件名
name: '[name].[hash:8].[ext]'
})
.end()
}
},
devServer: {
port: 8080,
// host: '0.0.0.0',
host: process.env.SF_ENV ? `${process.env.SF_ENV}.sfacg.com` : '',
http2: true,
https: {
key: fs.readFileSync('../../keys/2_sfacg.com.key'),
cert: fs.readFileSync('../../keys/1_sfacg.com_bundle.crt')
},
disableHostCheck: true,
proxy: {
'^/api': {
target: 'https://sandboxpages.sfacg.com',
// target: 'https://pages.sfacg.com',
// target: 'https://testpages.sfacg.com',
changeOrigin: true,
secure: false,
https: true,
// ws: true,
pathRewrite: {
'^/api': '/api'
}
},
'^/ajax': {
target: 'https://sandboxpages.sfacg.com',
// target: 'https://pages.sfacg.com',
// target: 'https://testpages.sfacg.com',
changeOrigin: true,
secure: false,
https: true,
// ws: true,
pathRewrite: {
'^/ajax': '/ajax'
}
}
}
}
}
README.md
用于每次存档记录
配置文件
----------------举例------------------
# 202暑期充值和暑期周边活动
1. 原型及 UI
https://lanhuapp.com/web/#/item/project/stage?pid=10dca9e7-eae2-4a0c-8906-afee1dd117cc&teamId=586eef2d-4f99-413f-b506-ef58db98759c
2. 预期线上地址：
- 测试环境 https://sandboxpages.sfacg.com/h5/act/summer2023/
- 预生产环境 https://testpages.sfacg.com/h5/act/summer2023/
- 正式环境 https://pages.sfacg.com/h5/act/summer2023/
3. 项目代码位置
source/summer2023/
4. 生成的最终页面的位置：
release/h5/act/summer2023/
5. 页面
充值页面 - index.html
周边页面 - store.html
6. 上下文
- tower地址：https://tower.im/teams/181805/todos/161016/ (项目进度/对应的Tower/前端/)
- 评论 id: 3430
- 征文的 tag id 无 (找林成彭在测试环境创建)
-
上下文： summer2023
代码： source/summer2023/
发布目录 release/h5/act/summer2023/
7. 记录
- 记录一些代码、事项、逻辑、避免翻车
- 每次都要检查pc端兼容、openApp组件是否添加
.eslintrc.js
代码规范配置文件
配置文件
module.exports = {
root: true,
env: {
es6: true,
node: true,
browser: true
},
extends: [
'plugin:vue/essential',
'@vue/standard'
],
parserOptions: {
parser: 'babel-eslint'
},
globals: {
bridgeFactory: 'readonly'
},
rules: {
'quotes': [
'error',
'single',
{
avoidEscape: true,
allowTemplateLiterals: true
}
],
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'space-before-function-paren': 0,
"indent": 'off', // 缩进
}
}
