Vue+tp6 php框架如何快速建立一个前后端分离项目

作者主要是写后端的，所以本文主要以后端的角度，讲如何使用Vue+Tp框架结合，快速打通一个前后端分离的项目部署，可以作为后端学习Vue的入门步骤，通过此教程，你可以学到在生产环境和本地环境中，vue+tp 等框架是如何结合以及部署的。

提示：

1、写本文章时，代码环境在Windows 系统下,本地使用PHPstudy集成环境讲解。

2、本文章主要向初学Vue的后端同学讲解Vue与后端基础的结合使用

3、如果有看过Vue的文档，并且学习过基础语法以及使用，会使你更易理解下面的内容。

一：安装 Node 环境
下载地址为：https://nodejs.org/en/
终端输入以下命令检查是否安装成功：如果输出版本号，说明环境安装成功。

C:\Users\Administrator>node -v
v12.18.3
C:\Users\Administrator>npm -v
6.14.6

二：安装Vue项目环境
全局安装 vue-cli

C:\Users\Administrator>npm install --global vue-cli

2. 进入Web项目目录,创建一个基于 webpack 的Vue项目，例如我这边是集成环境的目录下 D:\phpstudy_pro\WWW>

D:\phpstudy_pro\WWW>vue init webpack vue-demo2
  //创建一个基于webpack 的Vue项目 vue-demo2 是你自定义的项目名，回车后出现下面选项

? Project name vue-demo2
 //项目名，默认回车
? Project description A Vue.js project
 //默认回车
? Author xxx //默认回车
? Vue build standalone
 // 打包方式 默认回车
? Install vue-router? Yes
 //是否使用vue-router，选Y
? Use ESLint to lint your code? No
 //js语法检测，教程中不需要
? Set up unit tests No
 //单元测试工具，教程不需要
? Setup e2e tests with Nightwatch? No
 // 是否需要 端到端测试工具 教程不需要
? Should we run `npm install` for you after the project has been created? (recommended) no
  //我们选择手动
 vue-cli · Generated "vue-demo2".
# Project initialization finished!
# ========================

To get started:

  cd vue-demo2
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

3. 进入我们安装好的Vue项目目录下，安装依赖

D:\phpstudy_pro\WWW>cd vue-demo2

D:\phpstudy_pro\WWW\vue-demo2>npm install
//安装好后 项目中会生成node_modules文件夹