芸众商城前端(VUE)项目
开源前端项目(H5 Vue版本)源码下载:https://www.yunzmall.com/plugins/shop_server/microcommentdetails/185?i=10注:您可以在芸众最新前端源码包中查看该文件最新版本,本文件定期完善,芸众不提供任何部署开发指导,请自行研究!
芸众前端使用node版本已经升级,请注意您使用的版本!!
node版本 10.15.3(重点)
安装 cnpm 命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install下载依赖包
本地调试时候: 静态文件全部放在public/static下
本项目使用vue-cli4 对应使用webpack4配置文件在根目录的vue.config.js
npm run dev在本地测试需要代理
在根目录的vue.config.js =>devServer=> proxy=> target中设置代理域名
不使用代理请求不了接口就没有数据显示,动态页面空白,
在浏览器输入商城网址
例如:
https://dev5.yunzshop.com/addons ... =1&type=5&mid=0&i=2
然后把https://dev5.yunzshop.com改成本地调试的localhost:8081
localhost:8081/addons/yun_shop/?menu#/home?shop_id=1&type=5&mid=0&i=2
可能会需要登录,登录后会跳转到线上地址,记得手动改回本地调试localhost:8081的地址
本地调试时记得是localhost:8081/addons/yun_shop/这个前缀路径否则会出现空白
## 项目简介
基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES2015、scss 等最新语言特性。项目包含:
- 基础库: `vue.js`、`vue-router`、`vuex`、`whatwg-fetch`
- 编译/打包工具:`webpack`、`babel`、`node-sass`
- 本地服务器:`express`
## 目录结构
├── README.md 项目介绍
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── mock mock数据目录
│ └── hello.js
├── package.json npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── title.vue
│ ├── assets 资源目录,这里的资源会被wabpack构建
│ │ └── images
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── store 应用级数据(state)
│ │ └── index.js
│ └── views 页面目录
│ ├── hello.vue
│ └── notfound.vue
├── static 纯静态资源,不会被wabpack构建。
└── test 测试文件目录(unit&e2e)
└── unit 单元测试
├── index.js 入口脚本
├── karma.conf.js karma配置文件
└── specs 单测case目录
└── Hello.spec.js
## 相关资源
- vue.js 官网:[https://vuejs.org/](https://vuejs.org/)
- vue.js 中文网: [http://vuefe.cn/](http://vuefe.cn/)
- vue-router 文档:[http://router.vuejs.org/zh-cn/index.html/](http://router.vuejs.org/zh-cn/index.html)
- vuex 文档:[http://vuex.vuejs.org/](http://vuex.vuejs.org/)
- webpack 文档:[https://webpack.github.io/docs/](https://webpack.github.io/docs/)
- ES2015 入门教程:[http://es6.ruanyifeng.com/](http://es6.ruanyifeng.com/)
- scss 文档:[http://sass-lang.com/documentation/file.SASS_REFERENCE.html](http://sass-lang.com/documentation/file.SASS_REFERENCE.html)
- mocha 文档: [http://mochajs.org/](http://mochajs.org/)
- express 中文官网:[http://expressjs.com/zh-cn/](http://expressjs.com/zh-cn/)
查看地址 学习一下 需要了解芸众免费版以及标准版请联系VX 15099997160 查看地址 :):):):):):):):):):):):):):):):):):):):):) 1231313123213 学习一下…… 支持一下
支持 支持 支持 支持 支持