Skip to content
做fecshop的前后端彻底分离部分的前端界面部分
Vue JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build 分类页面产品无限加载 Aug 14, 2017
config update trace info Apr 10, 2018
dist add Aug 8, 2017
src product review 验证码bug Aug 7, 2019
static 初步上传 Aug 8, 2017
test 初步上传 Aug 8, 2017
.babelrc 初步上传 Aug 8, 2017
.editorconfig 初步上传 Aug 8, 2017
.eslintignore 初步上传 Aug 8, 2017
.eslintrc.js 初步上传 Aug 8, 2017
.gitignore add Aug 8, 2017
LICENSE Initial commit Aug 8, 2017
README.md update readme Nov 26, 2018
index.html 初步上传 Aug 8, 2017
package-lock.json vue支持微信JsApi支付方式 Jun 19, 2019
package.json vue支持微信JsApi支付方式 Jun 19, 2019

README.md

vue_fecshop_appserver

Fecshop Appserver 前后端彻底分离,VUE客户端部分代码。

DEMO:http://demo.fancyecommerce.com/

开发状态:【已完成】

1.首先您需要安装npm

建议在window下面安装VUE部分

linux 详细参看:安装npm和nodejs

window 详细参看:http://www.fecshop.com/doc/fecshop-guide/develop/cn-1.0/guide-fecshop-about-install-vue.html

2.全局安装 vue-cli:

npm install -g vue-cli

3.下载本文件

git clone https://github.com/fecshop/vue_fecshop_appserver.git

4.进入上面下载的文件夹vue_fecshop_appserver,然后执行。

npm install 

这里需要很长一段时间,您也可以使用淘宝镜像,速度会快很多

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

如果中间没有报错(warn警告信息就没问题的),则说明安装成功了

本页面的底部有一些常见的问题的解决方式,您可以参看一下,如果出现的问题,里面没有 ,可以自行搜索解决这些问题,大多数可能是库包缺失或者版本的问题导致无法install

下面进行配置工作

5.vue的配置

5.1文件包里面的文件说明:

build: 配置了webpack的基本配置、开发环境配置、生产环境配置

config: 中配置了路径端口值等

node_modules: 为依赖的模块

src: 放置组件和入口文件

static: 放置静态资源文件

index.html: 文件入口

5.2配置后端url地址和vue url地址

打开配置文件:

开发环境为:config/dev.env.js

生产环境为:config/prod.env.js

上面2个环境下的配置文件都可以看到下面的配置:

API_ROOT: '"//fecshop.appserver.fancyecommerce.com"',
WEBSITE_ROOT: '"//demo.fancyecommerce.com"'

API_ROOT: 是fecshop server部分的api url,也就是fecshop的appserver入口, 作为vue后端数据提供者

WEBSITE_ROOT: 这个是vue部分的域名,也就是访问vue的域名

下面,我们以本地开发环境为例子进行配置

您需要将这里改成您自己的域名,譬如:我的fecshop是docker配置的, fecshop appserver入口url为:appserver.fecshop.com, 我打开配置文件config/dev.env.js,修改配置如下:

API_ROOT: '"//appserver.fecshop.com"',
WEBSITE_ROOT: '"//localhost:8080"'

在运行vue端之前,你要保证//appserver.fecshop.com 已经配置好,否则无法获取后端数据

5.3配置store

打开配置文件:src/config/store.js

可以看到


'domain': 'demo.fancyecommerce.com',
'lang_code' : 'zh',
'currency_code' : 'EUR'

domain: 这个是vue访问的url地址,和上面的WEBSITE_ROOT部分设置成一样即可

lang_code: 这个是默认的语言

currency_code: 默认的货币

因此,我们需要进行更改如下:

'domain': 'localhost:8080',
'lang_code' : 'zh',
'currency_code' : 'EUR'

5.3.2配置跨域

如果你的vue和appserver域名不一样,那么存在ajax 跨域问题,需要设置cors, 打开fecshop的@appserver/config/fecshop_local_services/Helper.php文件, 将'Origin' => ['http://demo.fancyecommerce.com'], 改成您自己的域名地址即可 ,详细参看帖子:http://www.fecshop.com/topic/1547

5.4下面就可以执行了

在vue的根目录下面启动vue

5.4.1开发环境执行

npm run dev

执行成功后,访问http://localhost:8080/#/ 即可访问

5.4.2生产环境执行,

npm run build

执行后,后在dist文件夹下面生成相应的html js css文件,您将nginx设置到这个路径即可 ,使用生产环境,nginx设置的域名,需要到 config/prod.env.jssrc/config/store.js 中设置,上面已经说明,这里不做陈述

6.其他说明

6.1、另外,vue里面有一些图片地址,是直接写上的,这个开发者自己替换掉自己的图片地址即可。

6.2、网站的多语言和多货币,是在服务端appserver中进行设置。

6.3、文档: fecshop appserver api 状态码

6.4、文档: fecshop appserver的一些说明

安装的报错解决

报错1:

npm ERR! phantomjs-prebuilt@2.1.14 install: `node install.js`

npm ERR! Exit status 1

npm ERR! 

npm ERR! Failed at the phantomjs-prebuilt@2.1.14 install script 'node install.js

解决:

npm install phantomjs-prebuilt@2.1.14 --ignore-scripts

报错2:

执行npm install报错如下

npm ERR! code EINTEGRITY
npm ERR! sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA== integrity checksum failed when using sha512: wanted sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA== but got sha512-n+6hC9m8/M79/zP73OVephxorZkaamBKLLwslR3SOUCqGyBpmyWwfdmqEs/NZGksb86QEJawH8+fz6iKNrYJKw==. (48732 bytes)

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\likang\AppData\Roaming\npm-cache\_logs\2017-12-14T11_24_54_278Z-debug.log

解决:

使用 npm cache clean --force 重新清理,然后重新 npm install, 成功

后续:

关于vue部分的多语言

多语言分为几个部分,api提供的多语言数据 和 VUE本身的多语言

10.1、api提供的多语言: 在fecshop appserver入口的翻译文件部分 处理,详细参看:Fecshop 多语言

10.2、VUE本身的多语言: 在文件路径 /src/config/languages/ 下面就可以 看到各个语言对应的js类型的配置文件,多语言使用的是vue-i18n, 下面是这个组件的资料。

vue-i18n github地址

vue-i18n 文档

譬如设置中文使用多语言,/src/config/languages/zh_CN.js 加入hello的语言配置

const messagesZh = {
    hello: '你好、世界'
}
export default messagesZh

调用处代码:

    <p>{{ $t("message.hello") }}</p>
    <p>{{ $t("message.wowowo") }}</p>

当设置当前语言为中文zh的时候,就会显示语言配置里的中文字符。

You can’t perform that action at this time.