親愛的猿友們,接下來請跟着我左手右手一個慢動作來搭建laravel5.4+vue+element+vux環境
下面說的cnpm使用的都是淘寶鏡像
http://d.laravel-china.org/docs/5.4 laravel 5.4 中文文檔
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiQ3chVEa0V3bT9CX5RXa2Fmcn9CXwczLcVmds92czlGZvwVP9EUTDZ0aRJkSwk0LcxGbpZ2LcBDM08CXlpXazRnbvZ2LcRlMMVDT2EWNvwFdu9mZvwVP0ckW1o1RaZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zMxETMwETM4ETMygDM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
入門指南->安裝->通過Composer Create-Project建立laravel項目
1. 執行 composer create-project --prefer-dist laravel/laravel blog //建立一個名為blog的laravel項目
laravel 安裝完成後
cd blog
進入項目 php artisan serve 啟動一個本地開發伺服器來通路它(我這裡是127.0.0.1:8000)
通路127.0.0.1:8000來看一下效果
配置VUE
‘/’ 是或者的意思
npm install / cnpm install
npm install vue-router –save-dev / cnpm install vue-router –save-dev
在/resources/assets/js下建立hello.js和hello.vue,内容如下
hello.vue檔案
<template>
<div>
<h1>Hello</h1>
<hr>
<router-view>
</router-view>
</div>
</template>
<script>
export default{
components : {
},
data(){
return {
}
},
methods : {
},
mounted(){
}
}
</script>
hello.js檔案
/**
* 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');
window.Vue = require('vue');
/**
* 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 './Hello.vue'
import router from './router/hello.js'
const app = new Vue({
el: '#app',
router,
render: h=>h(App)
});
在/resources/assets/js/components下建立檔案夾hello,然後在hello檔案夾下建立一個test1.vue檔案,内容如下
test1.vue
<template>
<div>
<h1>test1</h1>
</div>
</template>
<script>
export default{
components : {
},
data(){
return {
}
},
methods : {
},
mounted(){
}
}
</script>
在/resources/assets/js下建立檔案夾router
在/resources/assets/js/router下建立hello.js
hello.js檔案
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: "test1",
path: '/',
component: resolve =>void(require(['../components/hello/test1.vue'], resolve))
},
]
})
在/resources/views下建立hello.blade.php
hello.blade.php檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Hello</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/hello.js') }}"></script>
</body>
</html>
在/resources/routes/web.php中 修改
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/hello', function () {
return view('hello');
});
變更地方
Route::get('/hello', function () {
return view('hello');
});
在webpack.mix.js中修改
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/hello.js', 'public/js')
.extract(['vue', "vue-router", "axios"])
.sass('resources/assets/sass/app.scss', 'public/css');
變更地方
.js('resources/assets/js/hello.js', 'public/js')
.extract(['vue', "vue-router", "axios"])
修改和新增的檔案
修改配置并儲存後 執行 npm run watch 重新編譯
VUE配置基本完成,然後通路http://127.0.0.1:8000/hello#/就可以看到效果了
element配置
npm i element-ui -S / cnpm i element-ui -S (這裡的i相當于install)
安裝完成後,修改/resources/assets/js/components/hello/test1.vue
<template>
<div>
<h1>test1</h1>
<el-button @click="visible = true">按鈕</el-button>
<el-dialog v-model="visible" title="Hello world">
<p>歡迎使用 Element</p>
</el-dialog>
</div>
</template>
<script>
export default{
components : {
},
data(){
return {
visible: false
}
},
methods : {
},
mounted(){
}
}
</script>
變更地方
<el-button @click="visible = true">按鈕</el-button>
<el-dialog v-model="visible" title="Hello world">
<p>歡迎使用 Element</p>
</el-dialog>
visible: false
然後修改/resources/assets/js/hello.js
/**
* 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');
window.Vue = require('vue');
/**
* 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 './Hello.vue'
import router from './router/hello.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
const app = new Vue({
el: '#app',
router,
render: h=>h(App)
});
變更地方
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
element配置完成 再次執行npm run watch(沒修改配置檔案,不執行應該也沒什麼問題)
然後通路http://127.0.0.1:8000/hello#/就可以看到效果了
vux配置
npm install vue-cli -g / cnpm install vue-cli -g
npm install vux –save-dev / cnpm install vux –save-dev
npm install vux-loader –save-dev / cnpm install vux-loader –save-dev
npm install less less-loader –save-dev / cnpm install less less-loader –save-dev
然後在/目錄下添加webpack.config.js檔案,内容如下:
webpack.config.js檔案
const webpackConfig = require('./node_modules/laravel-mix/setup/webpack.config')
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [{ name: 'vux-ui' }]
})
然後修改/resources/assets/js/components/hello/test1.vue
<template>
<div>
<h1>test1</h1>
<el-button @click="visible = true">按鈕</el-button>
<el-dialog v-model="visible" title="Hello world">
<p>歡迎使用 Element</p>
</el-dialog>
<group>
<cell title="title" value="value"></cell>
</group>
</div>
</template>
<script>
import { Group, Cell } from 'vux'
export default{
components: {
Group,
Cell
},
data(){
return {
visible: false
}
},
methods : {
},
mounted(){
}
}
</script>
變更地方
<group>
<cell title="title" value="value"></cell>
</group>
import { Group, Cell } from 'vux'
Group,
Cell
然後修改/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=./webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=./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=./webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=./webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10",
"vue-router": "^2.7.0"
},
"dependencies": {
"element-ui": "^1.4.2"
}
}
變更地方
./webpack.config.js
./webpack.config.js
./webpack.config.js
./webpack.config.js
vux配置完成,然後再次執行 npm run watch
通路http://127.0.0.1:8000/hello#/就可以看到效果了
成長路上的一些知識分享,如有錯誤,歡迎指正批評!O(∩_∩)O