Laravel+Vue+element UI+Sass+gulp+webpack相关配置

发表于   |   分类于   |     |  

1.首先安装composer，php的包管理器。
地址：https://getcomposer.org/download/

2.然后跳转至本地虚拟环境，打开命令行利用composer安装Laravel项目：(laravelapp为项目名称)

1
composer create-project laravel/laravel laravelapp --prefer-dist

3.安装完毕后依次运行：

1
2
3
4
5
composer update
php artisan key:generate
php artisan serve

访问http://127.0.0.1:8000，有返回提示页，即为成功。

4.修改根目录下的package.json添加依赖项如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
    "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.16.2",
        "babel-core": "^6.20.0",
        "babel-loader": "^6.2.9",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.0.1",
        "css-loader": "^0.25.0",
        "element-ui": "^1.1.1",
        "gulp": "^3.9.1",
        "handsontable": "0.27.0",
        "jquery": "^3.1.1",
        "laravel-elixir": "^6.0.0-15",
        "laravel-elixir-vue-2": "^0.2.0",
        "laravel-elixir-webpack-official": "^1.0.10",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.4",
        "node-sass": "^4.5.3",
        "style-loader": "^0.13.1",
        "vue": "^2.1.4",
        "vue-loader": "^10.0.0",
        "vue-resource": "^1.0.3",
        "vue-router": "^2.1.1",
        "vue-template-compiler": "^2.1.4",
        "element-ui": "^1.4.1"
    },
    "dependencies": {}
}

4.安装node，地址：

https://nodejs.org/en/download/

5.node自带包管理器，在命令行运行依赖插入指令：

1
npm install

6.如果依赖安装过慢可挂vpn，或设置国内镜像替代运行如下指令：

1
npm config set registry http://registry.npm.taobao.org

7.完成后注意sass的编译依赖python，但版本请不高于2.7，请注意下载安装。

8.根目录新建gulpfile.js文件：编写内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const elixir = require('laravel-elixir');
const path = require('path');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
    // Elixir.webpack.config.module.loaders = [];
    Elixir.webpack.mergeConfig({
        resolveLoader: {
            root: path.join(__dirname, 'node_modules'),
        },
        module: {
            loaders: [{
                test: /\.css$/,
                loader: 'style!css'
            }]
        }
    });
    mix.sass('app.scss')
        .webpack('app.js')
});

9.resources\assets\js目录下新建App.vue文件，内容如下：

1
2
3
4
5
<template>
<div id="app">
<router-view></router-view>
</div>
</template>

10.修改app.js内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**  
 * First we will load all of this project's JavaScript dependencies which  
 * includes Vue and other libraries. It is a great starting point when  
 * building robust, powerful web applications using Vue and Laravel.  
 */
require('./bootstrap');
/**  
 * Next, we will create a fresh Vue application instance and attach it to  
 * the page. Then, you may begin adding components to this application  
 * or customize the JavaScript scaffolding to fit your unique needs.  
 */
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(VueRouter)
Vue.use(ElementUI)
const router = new VueRouter({
    routes: [
        { path: '/', component: require('./components/Example.vue') }
    ]
})
const app = new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
});

11.修改views文件夹下的welcome.blade.php文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Hello</title>
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

运行命令 ：

1
2
3
gulp watch
php artisan serve

基本项目即配置完毕。

打赏鼓励一下。