Laravel引入vue

本文建立在该环境上。
Laravel默认是支持vue的，安装了Larvel后，目录下已经有了vue的package.json。
vue作为js的工程，首先来看一下package.json文件

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17"
    }
}

这里定义了一些依赖包，以及快捷命令，调用 npm run + scripts中的key，则等于调用其后边的定义。

---

关于共享文件夹

对于linux在window上的文件夹中，由于文件系统并不相同，所以是无法创建软链接的，用 ln -s 命令可以验证这一点。
所以对于Laravel工程如果创建在了共享文件夹中，那么所有和npm相关的命令都需要加 --no-bin-links，这个命令的意思是不创建链接。

---

安装依赖

调用npm install --no-bin-links

---

编译vue

调用npm run dev --no-bin-links
运行这个命令，往往会出现两个错误。

• 关于 corss-env找不到的错误。
  解决这个问题有两种方法
  • 全局安装 cross-env ，sudo npm install cross-env -g
  • 更改package.json，将其中cross-env的调用路径改为目录下

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

• dev会再调用yarn来安装vue的其他依赖，而没有加 --no-bin-links，也会导致链接报错。
  需要再手动调用 yarn install --no-bin-links来安装其他的依赖

最后调用npm run dev --no-bin-links则可以编译通过。

如果不想这么麻烦，可以将工程建立在非共享目录中。
只需要调用 npm install，然后运行 npm run dev即可

使用vue

在welcome.blade.php的body里添加如下内容

image.png

在打开网页则会看到

image.png

至此，在Laravel应用vue已经完成

写在最后

共享文件夹的方式来创建工程，就会出现上面那种链接的问题，其实是比较麻烦的。
比较推荐不在共享目录中来创建工程，当然，如果不在共享文件夹中创建工程需要注意，当销毁虚拟机的时候，工程是会被一起删掉的。