代码拉取完成,页面将自动刷新
校园二手交易平台的前端用户页面的开发
使用webpack+npm+html+css+js开发
npm i --registry=https://registry.npm.taobao.org
命令进行安装,--registry=https://registry.npm.taobao.org指定国内的仓库,加快下载速度
//dev
serverHost : ''
//prod
// serverHost : 'http://www.choisaaaa.campuso2o.com'
devServer: {
port: 8089,
inline: true,
proxy : {
//pro环境中使用下面的配置
// '/image/richtext_img_upload.do' : {
// target: 'http://www.choisaaaa.campuso2o.com/',
// changeOrigin : true
// }
// dev开发使用下面的配置
'**/*.do' : {
// 这个域名是开发时配置的域名,其实是通过修改host文件,让www.dev.campuso2o.com访问请求到本地
// 再通过nginx将这个请求代理到本地的不同tomcat(分布式部署)中
// 注:如果是但实例部署,可以配置 : target: 'http://localhost:8088/campusO2O/(本地后台项目的访问路径)',
target: 'http://www.dev.campuso2o.com/campuso2o/',
changeOrigin : true
}
}
}
npm run dist_win
,会在项目中生成dist文件夹npm run dev_win
,以webpack-dev-server启动项目 //dev
serverHost : ''
//prod
// serverHost : 'http://www.choisaaaa.campuso2o.com'
devServer: {
port: 8089,
inline: true,
proxy : {
//pro环境中使用下面的配置
// '/image/richtext_img_upload.do' : {
// target: 'http://www.choisaaaa.campuso2o.com/',
// changeOrigin : true
// }
// dev开发使用下面的配置
'**/*.do' : {
// 这个域名是开发时配置的域名,其实是通过修改host文件,让www.dev.campuso2o.com访问请求到本地
// 再通过nginx将这个请求代理到本地的不同tomcat(分布式部署)中
// 注:如果是但实例部署,可以配置 : target: 'http://localhost:8088/campusO2O/(本地后台项目的访问路径)',
target: 'http://www.dev.campuso2o.com/campuso2o/',
changeOrigin : true
}
}
3.window系统运行npm run dist_win,生成的dist文件,为前端打包的项目。 4.部署到web服务器中(nginx、tomcat)
每一个的模块中的页面包括一个css文件,一个js文件,一个.string(渲染模板)
****.html: 每个模块对应的页面
4.1. src/view/layout :布局的页面(页头,页尾,侧边导航栏的抽取)
4.2. src/view/seller :卖家的涉及页面
node: v12.16.1 npm: 6.13.4
待优化的问题
页面优化
图片资源加载过慢
如果刷新过快的会看到没有渲染CSS样式的页面
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。