Detailed explanation of laravel 5.4+vue+vux+element environment matching steps-PHP Tutorial-php.cn

Detailed explanation of laravel 5.4+vue+vux+element environment matching steps

php中世界最好的语言

Release： 2023-03-25 22:12:01

Original

1660 people have browsed it

This time I will bring you a detailed explanation of the steps for laravel 5.4 vue vux element environment matching. What are the precautions for laravel 5.4 vue vux element environment matching. Here are actual cases, let’s take a look.

Preface

Recently, due to the needs of the project, it is necessary to match such an environment. I have never used anything I have made before. I searched for a long time on the Internet and found that it was either too simple or simply not feasible. I went through many pitfalls for a long time and finally succeeded in matching it.

The process is as follows

First download laravel5.4, go directly to the official website for one-click installation package or composer or scaffolding download Either way, in short, the laravel environment can be accessed now.

Open the package.json file in laravel:

"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": "cross-env 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": "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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
 },
 "devDependencies": {
 "axios": "^0.15.3",
 "bootstrap-sass": "^3.3.7",
 "cross-env": "^3.2.3",
 "jquery": "^3.1.1",
 "laravel-mix": "0.*",
 "lodash": "^4.17.4",
 "vue": "^2.1.10"
 }
}

Copy after login

Modify the red part to:

"devDependencies": {
 "axios": "^0.15.3",
 "bootstrap-sass": "^3.3.7",
 "jquery": "^3.1.1",
 "laravel-mix": "^0.8.3",
 "cross-env": "^3.2.3",
 "lodash": "^4.17.4",
 "vue": "^2.1.10",
 "element-ui": "^1.2.8",
 "vue-loader": "^11.3.4",
 "vue-router": "^2.4.0"
}

Copy after login

Then the terminal enters the project root directory, Run

cnpm install

Copy after login

If there is no Taobao mirror, you can:

npm install //注意：(window下运行这个命令时要带上--no-bin-links)。

Copy after login

One thing to note is that when configuring each dependent library in the package.json file above, you must modify it according to the specific version, otherwise it will be ignored. There are many pitfalls (don’t ask me why I know!~)

After that we can find that there will be an additional directory under the laravel project:

It’s ready at this time

npm run dev, but it is still the page that comes with laravel.

So far, we have configured vue, vue-loader, vue-router, element-ui, now it is time to install vux!

cd to the root directory of the project, we need vue-cli scaffolding, if it has not been installed yet:

npm install vue-cli -g / cnpm install vue-cli -g

Copy after login

Then install vux:

npm install vux --save

Copy after login

Well, it’s actually quite fast ~~

Because vux2 requires vux-loader, we also need to install vux-loader:

npm install vux-loader --save

Copy after login

Install less-loader to correctly compile less source code:

npm install less less-loader –-save

Copy after login

OK, after the installation is successful, sell into the project root directory, create a new file named webpack.config.js, and configure it in it:

Then open the Modify package.json - the file pointed to by config, point to your current webpack.config.js file:

Save, and execute after the configuration is completed:

npm run watch

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!