构建所需：
-
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：不附加相应源码地址，自己动手多试几次。