如何在现有PHP项目中通过Vue-cli安装Vue（不使用CDN）

1. 确认环境依赖 #

首先确保你的系统已经安装了Node.js和npm，打开终端执行以下命令检查版本：

node -v
npm -v

如果未安装，直接下载对应版本安装即可。

2. 全局安装Vue CLI #

在终端执行全局安装命令：

npm install -g @vue/cli

安装完成后验证是否成功：

vue --version

3. 在PHP项目根目录创建Vue子项目 #

进入你的PHP项目根目录，执行以下命令创建Vue项目（vue-app为自定义的Vue项目目录名，可按需修改）：

vue create vue-app

执行后会弹出配置选项，选择默认配置或手动配置均可，按需选择Vue 2或Vue 3版本。

4. 配置Vue打包输出目录 #

Vue默认打包文件会放在自身项目的dist目录，我们需要将其指向PHP项目的静态资源目录（比如PHP项目的public目录）。

在Vue项目目录下新建或修改vue.config.js文件，添加以下配置：

module.exports = {
  // 打包输出目录改为PHP项目public下的vue-dist文件夹，路径根据你的项目结构调整
  outputDir: '../public/vue-dist'
}

5. 开发与打包 #

• 开发调试：进入Vue项目目录，执行npm run serve，会启动开发服务器，可在浏览器访问给出的地址进行热更新调试。
• 生产打包：开发完成后，在Vue项目目录执行npm run build，打包后的静态文件会自动输出到你配置的../public/vue-dist目录。

6. 在PHP页面中引入Vue资源 #

打开需要嵌入Vue的PHP页面，添加Vue挂载的DOM容器，并引入打包后的css和js文件：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入Vue打包后的样式文件，文件名根据实际打包结果修改 -->
  <link rel="stylesheet" href="/vue-dist/css/app.xxxxxx.css">
</head>
<body>
  <!-- 你的PHP原有内容 -->
  <div id="app"></div>

  <!-- 引入Vue打包后的脚本文件，文件名根据实际打包结果修改 -->
  <script src="/vue-dist/js/app.xxxxxx.js"></script>
</body>
</html>

注意路径要和你配置的outputDir对应，确保PHP服务器能正确访问到这些静态资源。

7. 前后端交互 #

如果需要Vue和PHP交互，直接在Vue代码里用axios或fetch调用PHP接口即可，比如：

// 示例：用axios调用PHP接口
import axios from 'axios'

axios.get('/api/get-data.php')
  .then(res => {
    console.log(res.data)
  })

内容的提问来源于stack exchange，提问作者Shulz