Laravel + Vue.js 前后端分离（SPA）

非单页应用引入第三方组件

1. 在package.json中添加组件，Like：

   1	"element-ui"："^2.0.0"

2. 运行 npm install 安装组件到项目 node_modules 文件夹
3. 在 resources/assets/js/app.js 中添加引用，Like:

   1 2 3 4

   import ElementUI from "element-ui" import "element-ui/lib/theme-default/index.css" Vue.use(ElementUI)

4. 编译好js文件即可

前后端分离时的 Oauth 处理

1. 前端请求发起三方登录请求
2. 后端接受前端请求后拼接授权请求链接
3. 返回重定向前端重定向至授权请求页面
4. 用户登录第三方网站
5. 第三方回调返回后端，后端获取数据并存储相关数据
6. 后端返回重定向链接将前端重定向至专门接受 Access_Token 页面，再由前端处理后续逻辑

使用 VSCode 开发引入 iView 等第三方 UI 框架后出现 x-invalid-end-tag

1. 如果你是用 Vetur的话 配置.eslintrc.js 并没有什么卵用

   Vetur automatically uses eslint-plugin-vue for linting template. Linting configuration is based on eslint-plugin-vue’s essential rule set.
   
   只能关掉它自带的eslint-plugin-vue 【”vetur.validation.template”: false】

2. 重新配置 .eslintrc

   “vue/no-parsing-error”: [2, { “x-invalid-end-tag”: false }]

Vue-Cli + axios 创建的项目生产环境（Nginx）跨域问题

1. 修改 nginx/conf/vhost/your.domain.conf 配置文件

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   location / { try_files $uri $uri/ /?$args; # 允许跨域以及允许跨域的请求类型的设置 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; } location ^~ /api { # 要指向的域名，一般 SPA 时需要用到 proxy_set_header Host app.layoute.top; # 跨域是需要替换的路径，一般 SPA 时需要用到 proxy_pass https://app.layoute.top/api; }

2. 重新载入 nginx 配置文件并重启 nginx

   1	$ service nginxd reload && service nginxd restart