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.js 和 src/config/store.js
中设置，上面已经说明，这里不做陈述
6.其他说明
6.1、另外，vue里面有一些图片地址，是直接写上的，这个开发者自己替换掉自己的图片地址即可。
6.2、网站的多语言和多货币，是在服务端appserver中进行设置。
6.3、文档: fecshop appserver api 状态码
6.4、文档: fecshop appserver的一些说明
报错1:
npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node install.js
解决：
npm install [email protected] --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，
下面是这个组件的资料。
譬如设置中文使用多语言，/src/config/languages/zh_CN.js 加入hello的语言配置
const messagesZh = {
hello: '你好、世界'
}
export default messagesZh
调用处代码：
<p>{{ $t("message.hello") }}</p>
<p>{{ $t("message.wowowo") }}</p>
当设置当前语言为中文zh的时候，就会显示语言配置里的中文字符。