[前后端分离项目] 第二部分：JavaScript 初始化

 

# 04 配置 JavaScript 和 SASS

package.json- npm的命令

webpack.mix.js

清理历史的自带包

移除 Bootstrap

npm remove bootstrap --save-dev

npm remove bootstrap-sass --save-dev

配置 app.js

引入 lodash， jquery, foundation-sites

引入 Axios 库并设置默认请求头 X-CSRF-TOKEN：

移除 Vue 相关代码：

删除: resources/assets/js/bootstrap.js

移除: resources/assets/js/components

配置 SASS:

npm install foundation-sites

resources/assets/sass/app.scss

@import "node_modules/foundation-sites/assets/foundation.scss";

## 05 引入 Vue 2、Vue Router 和 Vuex

重新引入 Vue, 安装 Vue Router, Vuex

配置 JavaScript 目录

创建 JavaScript 文件

设置 Vue

resources/assets/js/event-bus.js

## 06 通过 Vue Router 配置前端路由

配置路由文件 routes.js

添加路由 到配置文件中

添加 vue 页面: resources/assets/js/pages

将路由导入 app.js

构建应用: npm run watch/dev

## 07 实现 Laravel 后端 API 接口

/cafes 路由中，我们需要获取系统的咖啡店列表；

/cafes/new 路由在前端是一个 GET 请求（显示提交表单），但是 API 端将是一个 POST 请求，用于添加咖啡店；

/cafes/:id 路由用于加载某个咖啡店的信息。

## 08 通过 Axios 库构建 API 请求

配置 config.js 文件 根据 环境变量判断加载路径 process.env.NODE_ENV

resources/assets/js/api/cafe.js

导入config 获取 API_URL 发起请求

使用 Axios 库发起请求。