Thinkphp+Vue前后端分离学习笔记（1）

本人业余爱好者，以前用过Thinkphp框架+框架自带的模板+Bootstrap写过东西。

据说现在网页都用Vue，而且前后端分离，故学习之，先做一个登录功能。

用到的东西：Thinkphp 6, Vue-cli 4

插件：element-ui, Vuex, vue-cookies, axios

软件：VS code

1. 服务器安装：

windows：安装XAMPP （含apache2，Mysql（Mariadb）, php7.4）

Linux：安装apache2 或Nginx，Mysql或Maridb，PHP7

安卓：安装Termux，然后在Termux里安装apache2 或Nginx，Mysql或Maridb，PHP7

2. 安装Thinkphp

参考手册https://www.kancloud.cn/manual/thinkphp6_0

安装composer并设置国内源

composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

安装Thinkphp6，cd到网站原本的根目录（比如：xampp/htdocs, /var/www）或者你自己想要存放网站的目录，然后运行

composer create-project topthink/think tp

配置apache或Nginx主目录到Thinkphp的public目录（如：/var/www/tp/public）

开启Apache的rewrite模块或配置Nginx的rewrite （参考Thinkphp手册->架构->URL访问）

现在重启服务器，访问http://localhost应该可以访问到Thinkphp页面并支持PATHINFO访问（比如http://localhost/index/index）

但是我们要做的是前后端分析，默认http://localhost访问的是Vue的页面。所以需要进一步修改：

在public目录下新建api目录，将.htaccess, index.php, router.php文件移入api目录，修改index.php文件

require __DIR__ . '/../vendor/autoload.php';

改成

require __DIR__ . '/../../vendor/autoload.php';

这下访问Thinphp的内容需要使用http://localhost/api/

3. 安装Vue

先安装nodejs和npm

安装Vue-cli：参考https://cli.vuejs.org/guide/installation.html

npm install -g @vue/cli

创建项目：参考https://cli.vuejs.org/guide/creating-a-project.html#vue-create

在想要的目录（比如我的文档，或用户根目录）下运行

vue create my-app

手动选择组件：Bable，Router，Vuex，Linter/Formatter

Router选history模式

待npm安装组件及依赖完成后，进入项目目录

cd my-app

添加element-ui组件，参考https://element.eleme.cn/#/zh-CN/component/installation

我们用的是cli方式安装：https://github.com/ElementUI/vue-cli-plugin-element

vue add element

因为是学习，所以配置时我选的时全部导入，实际上线项目可选按需导入，需安装babel-plugin-component， 参考https://element.eleme.cn/#/zh-CN/component/quickstart

运行npm run serve，就可以访问到vue的项目了。

为了登录功能再安装几个插件吧，项目根目录运行：

npm install vue-cookies --save

npm install axios --save

好了，环境差不多到此了，后面再讲代码部分。