構建所需：
-
composer (請調成中國鏡像)
-
Node.js (請安裝穩定版)
-
npm (最新版node已集成npm，無需另外安裝)
淘寶鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
1、下載Laravel
選擇 Laravel 版本時，應該 優先考慮 LTS 版本，因爲安全性和穩定性考慮，商業項目開發中 不應該 使用最新版本的 『Laravel 一般發行版』
composer create-project laravel/laravel project-name --prefer-dist "5.5.*"
2、虛擬主機配置自行搜索
另附Linux：https://blog.csdn.net/qq_33430445/article/details/79158975
3、Vue安裝
Laravel 並沒有規定你使用哪個 JavaScript 或 CSS 預處理器，不過它還是提供了對大多數應用都很適用的 Bootstrap 和 Vue 來作爲默認的起點。默認情況下，Laravel 使用 NPM 安裝這兩個前端依賴。
npm install
或者
cnpm install
直接進入項目的根目錄執行 npm install ，等待一段時間就OK了
然後，寫一些代碼來測試下，我們進入 resources\assets 目錄後會發現，laravel默認帶了一個vue的例子
可以看到app.js的代碼，發現他是引入了vue，然後註冊了一個組件，也就時Example.vue , Example.vue 中輸出兩句話，這是一個完整的組件，可以直接使用。
如下:
/** * 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'); import App from './App.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. */ const app = new Vue({ el: '#app', router, render: h => h(App), });
找到resources\views\welcome.blade.php 文件，將其修改爲下面的代碼，也就是把原來的HTML刪了，添加一個id爲app的div，在其中使用app.js 中註冊的組件，需要注意的就是要添加crsf-Token的驗證meta標籤，和引入 app.js 文件，這個js文件也可以去根目錄中的 webpack.mix.js 文集中修改。
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"><title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"></head>
<body>
<div id="app">
<example></example>
</div>
</body>
<script src="/js/app.js"></script>
</html>
npm run dev 一下然後到瀏覽器中看一下， npm編譯好之後我們在瀏覽器查看發現已經安裝好了。
4、Element UI 2.X / iView 3.X
Element-ui 官方文檔 查看安裝教程
iView 文檔 如果安裝iView 組件庫，請看官方文檔，其他步驟與Element UI 相似
npm i element-ui -S
然後在 resources\assets\js\app.js 中引入Element-ui組件
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI)
修改Example.vue 文件，使用Element-ui的組件，修改爲
<template>
<div>
<el-radio class="radio" v-model="radio" label="1">備選項</el-radio>
<el-radio class="radio" v-model="radio" label="2">備選項</el-radio>
</div>
</template><script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
最後 npm run dev 編譯一下，到瀏覽器查看效果
5、VUX的安裝
首先安裝VUX必要的組件
npm install vux --save
npm install vux-loader --save
npm install less-loader --save
安裝完成後還需要將 webpack.config.js 文件提出來
cp node_modules/laravel-mix/setup/webpack.config.js ./
然後打開webpack.config.js 文件，向其中添加一些代碼，如下：
/** * As our first step, we'll pull in the user's webpack.mix.js * file. Based on what the user requests in that file, * a generic config object will be constructed for us. */ require('./node_modules/laravel-mix/src/index'); require(Mix.paths.mix()); /** * Just in case the user needs to hook into this point * in the build process, we'll make an announcement. */ Mix.dispatch('init', Mix); /** * Now that we know which build tasks are required by the * user, we can dynamically create a configuration object * for Webpack. And that's all there is to it. Simple! */ let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig'); module.exports = new WebpackConfig().build(); const vuxLoader = require('vux-loader') const webpackConfig = module.exports // 原來的 module.exports 代碼賦值給變量 webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
修改package.json文件的config文件路徑 爲根目錄的webpack.config.js文件
如下：
{ "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.6.10" }, "dependencies": { "element-ui": "2.11.1", "less-loader": "^4.0.5", "vue-router": "^2.7.0", "vux": "^2.6.4", "vux-loader": "^1.1.9", "es6-promise": "^4.2.8" } }
然後去Vux中找一個demo 然後修改 Example.vue文件爲
<template>
<div>
<group>
<cell title="Total" value="￥1024"></cell>
<cell-form-preview :list="list"></cell-form-preview>
</group>
</div>
</template><script>
import { CellFormPreview, Group, Cell } from 'vux'export default {
components: {
CellFormPreview,
Group,
Cell
},
data () {
return {
list: [{
label: 'Apple',
value: '3.29'
}, {
label: 'Banana',
value: '1.04'
}, {
label: 'Fish',
value: '8.00'
}]
}
}
}
</script>
然後 npm run dev 編譯後刷新瀏覽器即可看到
6、Vue Router
npm install vue-router --save
在 resources\assets\js 目錄下創建 router.js 和 App.vue 文件
在App.vue文件中添加 模板代碼：
<template>
<div>
<router-view></router-view>
</div>
</template>
<script scoped>export default {
data(){
return {}
},
components: {},
computed: {},
methods: {},
mounted() {
},
}
</script>
在 router.js 文件中添加:
import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
name:"test",
path:'/',
component: resolve =>void(require(['./components/Example.vue'], resolve))
},
]
})
然後來修改 app.js 文件，需要引入剛纔的路由文件，在Vue創建時添加路由和App.vue
/** * 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'); import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue' import router from './router.js' Vue.use(ElementUI) /** * 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. */ const app = new Vue({ el: '#app', router, render: h => h(App), });
在路由文件中可添加路由，再添加相應vue組件，如下：
PS：不附加相應源碼地址，自己動手多試幾次。