微信公众号开发 1: Laravel 5.7 + we-vue + vue-router 搭建

微信公众号开发 1: laravel 5.7 + we-vue + vue-router 搭建

经过一段时间的vue学习,现在开始尝试用vue做一个项目,重构公司的报名系统。 经过一下午的考察,我打算基于laravel5.7并用we-vue 来作为我开始此次程序的vue前端框架,今天的任务就是搭建开始环境。

WE-VUE 组件使用简单,配置很容易。支持多种引入方式。对于对 Vue.js 有一定了解的开发者,一定能很快上手。

  1. 因为之前的项目就是基于laravel5.7的,所以laravel5.7的安装就不赘述了
  2. 安装好npm,并在项目根目录执行
$ npm i //安装依赖库
$ npm install we-vue --save //安装ve-vue
$ npm install vue-router --save-dev //安装vue-router
  1. 在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>
  1. 修改 routes/web.php 文件为
Route::get('wechat/enroll', function () {
    return view('wechatEnroll.index');
});
  1. 在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)
});
  1. 在resources/js 下新建App.vue
<template>
    <div>
        <router-view></router-view> <!--路由引入的组件将在这里被渲染-->
    </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: 'Vue'
            }
        }
    }
</script>
<style>
</style>
  1. 在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
        }
    ]
});
  1. 在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
        }
    ]
});
  1. 运行 npm run dev 查看效果 ,ok了!!!!
本作品采用《CC 协议》,转载必须注明作者和本文链接
日照香炉生紫烟
September
讨论数量: 1

看起来不错,有实际例子吗?

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!