微信公眾號開發 1: Laravel 5.7 + we-vue + vue-router 搭建

September發表於2019-08-20
LaravelVue

經過一段時間的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 協議》，轉載必須註明作者和本文連結

日照香爐生紫煙

相關文章