laravel5.5++ Vue2 + Element 环境搭建

最新推荐文章于 2022-06-13 09:38:25 发布

苦艾酒丶

最新推荐文章于 2022-06-13 09:38:25 发布

阅读量306

点赞数

分类专栏： Laravel 文章标签： laravel5.5++ Vue2 + Element 环境搭建

Laravel 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

1.先安装node.js 和python
https://blog.csdn.net/php12345679/article/details/89246813
https://blog.csdn.net/php12345679/article/details/80826295
2.切换镜像源

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

如何检测镜像是否设置成功呢？即查看镜像的配置结果

npm config get registry

npm config get disturl

查看npm配置

npm config list

3.通过 npm 全局安装 yarn

npm install -g yarn

查看 yarn 配置

yarn config list

3.新建 Laravel5.5 项目
在 Web 服务器目录下，使用 Composer 建立新项目

composer create-project --prefer-dist laravel/laravel Larvuent 5.5.*     // 新项目名为 Larvuent

安装完成后切换到项目跟目录，执行

cd  Larvuent

说明：建议配置虚拟主机

4.安装前端依赖库

yarn  install

如果遇到错误 error An unexpected error occurred: "EINVAL: invalid argument, symlink
请在你的执行命令之后添加 --no-bin-links

yarn install --no-bin-links

如果遇到错误 error: xxxx node-sass: Command failed
指定 node-sass 从 npm 的淘宝源中下载

yarn config set sass-binary-site https://npm.taobao.org/mirrors/node-sass
npm config set sass-binary-site https://npm.taobao.org/mirrors/node-sass

出现下面图说明安装前端依赖库成功
在这里插入图片描述
5.修改 Laravel 路由
修改 routes/web.php 文件为

Route::get('/', function () {
    return view('index');
});

6.新建 Hello.vue 文件
在 resources/assets/js/components 目录下新建 Hello.vue 文件

<template>
    <div>
        <h1>Hello, Larvuent!</h1>
        <p class="hello">{{ msg }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'This is a Laravel with Vue and Element Demo.'
        }
    }
}
</script>

<style>
.hello {
    font-size: 2em;
    color: green;
}
</style>

7.修改 app.js 文件，渲染组件
修改 resources/assets/js/app.js 文件

require('./bootstrap');

window.Vue = require('vue');

// Vue.component('example', require('./components/Example.vue')); // 注释掉
import Hello from './components/Hello.vue'; // 引入Hello 组件

const app = new Vue({
    el: '#app',
    render: h => h(Hello)
});

说明：app.js 是构建 Vue 项目的主文件，最后所有的组件都会被引入到这个文件，在引入所有组件之前，bootstrap.js 文件做了一些初始化的操作。同时，因为有了 window.Vue = require(‘vue’) 这句话，就不再需要使用 import Vue from ‘vue’ 重复导入 Vue 了。

8.新建 Laravel 视图文件，和 Vue 交互
在 resources/views 目录下新建 index.blade.php 文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Larvuent</title>
</head>
<body>
    <div id="app"></div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

说明：你可能在其他教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的，如果现在还不明白，不要紧，你记得使用 mix 函数就好了，然后继续往后看。

9.编译前端组件，运行
在项目根目录执行以下命令，编译前端资源

npm run dev

该命令默认会去执行根目录下的 webpack.mix.js 文件，使用 Laravel 提供的 Laravel Mix 编译资源，并将编译好的资源放在根目录 public 文件夹下。

访问项目
在这里插入图片描述
到目前为止，Laravel + Vue 已经完成了，下面开始引入 Element。

9.引入 Element
执行命令，安装 ElementUI

npm i element-ui -S

出现下面图说明安装成功
在这里插入图片描述
修改 resources/assets/js/app.js 文件

require('./bootstrap');
window.Vue = require('vue');
import Hello from './components/Hello.vue'; // 引入Hello 组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
const app = new Vue({
    el: '#app',
    render: h => h(Hello)
});

10.修改 Hello.vue 文件，使用 Element 组件
修改 resources/assets/js/components/Hello.vue 文件为

<template>
    <div>
        <h1>Hello, Larvuent!</h1>
        <el-button @click="visible = true">按钮</el-button>
        <el-dialog :visible.sync="visible">
            <p>欢迎使用 Element</p>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                visible: false
            }
        }
    }
</script>

<style>
    .hello {
        font-size: 2em;
        color: green;
    }
</style>

11.再次编译前端资源，运行

npm run dev

访问项目，点击按钮
在这里插入图片描述
好了，到目前为止，Laravel5.5 + Vue2 + Element 的环境搭建已经完成了，为了方便理解，第一次的搭建过程尽量简洁。本文下面的部分将使用 Vue 路由等等，逐步完善，便于后期的开发。

完善
CSRF 防护
环境搭建完成后，访问项目，打开开发者模式，切换到 Console ，会看到以下报错

在这里插入图片描述
Laravel 为了避免应用遭到跨站请求伪造攻击(CSRF)，自动为每一个有效用户会话生成一个 CSRF 令牌，该令牌用于验证授权用户和发起请求者是否是同一个人。

修改 resources/views/index.blade.php 文件为

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Larvuent</title>
</head>
<body>
<div id="app"></div>

<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

创建一个 meta 标签并将令牌保存到该 meta 标签中，问题可解决
别忘了修改后执行

npm run dev

刷新，没有了报错
在这里插入图片描述
使用 Vue Router
1.执行以下命令，安装 vue-router

npm install vue-router --save-dev

看到以下图，说明安装成功
在这里插入图片描述
2.配置 vue-router
在 resources/assets/js 目录下新建目录 router ，同时在 router 目录下新建 index.js 文件

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: 'hello',
            path: '/hello',
            component: resolve => void(require(['../components/Hello.vue'], resolve))
        }
    ]
});

3.引入 vue-router
在 resources/assets/js 目录下新建 App.vue 文件

<template>
    <div>
        <h1>Hello, {{ msg }}!</h1>
        <router-view></router-view> <!--路由引入的组件将在这里被渲染-->
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: 'Vue'
        }
    }
}
</script>

<style>
</style>

修改 resources/assets/js/app.js 文件为

require('./bootstrap');
window.Vue = require('vue');
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

import router from './router/index.js';

const app = new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

4.重新编译执行

npm run dev

通过路由访问 hello 组件
在这里插入图片描述
以后如果要添加组件，只需在 resources/assets/js/components 目录下新建 vue 文件，在 resources/assets/js/router/index.js 文件里引入，然后就可以通过路由访问了。

代码拆分
代码拆分是将一些不经常变动的代码提取出来，以避免每次都要重新编译，如果你频繁更新应用的 JavaScript，需要考虑对 vendor 库进行提取和拆分，这样的话，一次修改应用代码不会影响 vendor.js 文件的缓存。

Laravel Mix 的 extract 方法可以实现这样的功能：
修改项目根目录下的 webpack.mix.js 文件

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .extract(['vue','axios']);

extract 方法接收包含所有库的数组或你想要提取到 vendor.js 文件的模块，使用上述代码作为示例，Mix 将会生成如下文件：

public/js/manifest.js  // Webpack manifest runtime
public/js/vendor.js  // vendor 库
public/js/app.js  // 应用代码

同时修改 resources/views/index.blade.php 文件为

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Larvuent</title>
</head>
<body>
    <div id="app"></div>

    <script src="{{ mix('js/manifest.js') }}"></script>
    <script src="{{ mix('js/vendor.js') }}"></script>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

全局的 mix 函数会根据 public/mix-manifest.json 中的路径去加载对应的文件，同时也要注意引入三个 js 文件的顺序，以避免出错。

重新编译，执行命令

npm run dev

使用下面的命令，可以监视前端资源的改变，并自动编译。

npm run watch

总结
到目前为止，这篇文章也快写完了，为了便于理解，本文第一次搭建时，尽量简单，能运行即可，成功之后，再添加其它功能。前端编译工具使用基于 webpack 的 Laravel Mix，一般情况下，它可以满足大部分的需求，当然你也可以完全抛弃 Laravel Mix，配置自己的 webpack，

本文转载自 https://blog.csdn.net/mrzhouxiaofei/article/details/78015473

借鉴了
https://learnku.com/articles/5083/on-the-record-of-installing-the-node-sass-error
https://blog.csdn.net/xiaohu12685/article/details/81910087

苦艾酒丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
laravel5.5++ Vue2 + Element 环境搭建

1.先安装node.js2.切换镜像源1.新建 Laravel5.5 项目在 Web 服务器目录下，使用 Composer 建立新项目composer create-project --prefer-dist laravel/laravel Larvuent 5.5.* // 新项目名为 Larvuent安装完成后切换到项目跟目录，执行cd Larvuent说明：建议配...
复制链接

扫一扫