微信公众号开发 1: Laravel 5.7 + we-vue + vue-router 搭建
0 / 1 / 创建于 5年前 /
September 的个人博客
微信公众号开发 1: laravel 5.7 + we-vue + vue-router 搭建
经过一段时间的vue学习，现在开始尝试用vue做一个项目，重构公司的报名系统。 经过一下午的考察，我打算基于laravel5.7并用we-vue 来作为我开始此次程序的vue前端框架，今天的任务就是搭建开始环境。
WE-VUE 组件使用简单，配置很容易。支持多种引入方式。对于对 Vue.js 有一定了解的开发者，一定能很快上手。
- 因为之前的项目就是基于laravel5.7的，所以laravel5.7的安装就不赘述了
- 安装好npm,并在项目根目录执行
$ npm i //安装依赖库
$ npm install we-vue --save //安装ve-vue
$ npm install vue-router --save-dev //安装vue-router- 在resources/views 新建文件夹wechatEnroll,并新建 index.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>xxxx</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/home.js') }}"></script>
</body>
</html>- 修改 routes/web.php 文件为
Route::get('wechat/enroll', function () {
return view('wechatEnroll.index');
});- 在resources/js 下新建app.js
require('./bootstrap');
window.Vue = require('vue');
import App from './App.vue';
import router from './router/index.js';
import WeVue from 'we-vue'
import 'we-vue/lib/style.css'
Vue.use(WeVue)
const app = new Vue({
el: '#app',
router,
render: h => h(App)
});- 在resources/js 下新建App.vue
<template>
<div>
<router-view></router-view> <!--路由引入的组件将在这里被渲染-->
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Vue'
}
}
}
</script>
<style>
</style>- 在resources/js/router 下新建 index.js
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Index from '../components/Enroll/Index'
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: 'index',
path: '/',
component:Index
}
]
});- 在resources/js/components/wechatEnroll 新建一个组件 index.vue
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Index from '../components/Enroll/Index'
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: 'index',
path: '/',
component:Index
}
]
});- 运行 npm run dev 查看效果 ，ok了！！！！
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
看起来不错，有实际例子吗？