Laravel 和 Vue 的項目搭建：基礎篇

時間 2019-11-06

標籤 laravel vue 項目搭建基礎简体版

原文原文鏈接

本篇只是實現了基礎的功能，對於實際的項目中的權限等還未涉及，這些會在後期逐步完善。
相關項目 laravel-vue-iview 的 GitHub 地址戳這裏，此項目基本可用於實際開發工做。php

Laravel

建立項目

Laravel 最新版本是 5.6，可是 5.5 是長期支持版本因此這裏依舊選擇使用 5.5css

# blog 是項目的名稱，可自行修改
composer create-project --prefer-dist laravel/laravel blog "5.5.*"

運行項目

進入剛建立的項目，執行 php artisan serve ,訪問 127.0.0.1:8000 html

Vue

擴展包

package.json 配置

初次接觸 Vue 的同窗，一般對於要安裝什麼擴展包感到迷茫。如下是 Laravel package.json 中默認的擴展包：前端

"devDependencies": {
    "axios": "^0.17",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.5.7"
}

bootstrap-sass 提供 sass 編寫的 bootstrap 支持，由於咱們要用 iview 因此這個擴展能夠刪除。 vue

直接與 Vue 相關的有 vue 和 axios（網絡請求工具），若是開發中、大型項目，vue-router（路由管理工具）和 vuex（狀態管理工具）也必不可少。 node

還有其餘經常使用的擴展，例如支持 cookie 操做的 js-cookie，支持多國語言開發的 vue-i18n,支持 Sass 語法的 node-sass 等。jquery

此項目前端使用 iview 框架，加上這些經常使用擴展後的 package.json ：ios

"devDependencies": {
    "axios": "^0.17",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "node-sass": "^4.7.2",
    "vue": "^2.5.7"
  },
  "dependencies": {
    "css-loader": "^0.28.9",
    "iview": "^2.9.2",
    "js-cookie": "^2.2.0",
    "less": "^3.0.0",
    "less-loader": "^4.0.5",
    "particles.js": "^2.0.0",
    "vue-i18n": "^7.4.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  }

其中還加入了 css加載器、less解析工具、particles 前端動畫等，不須要的能夠自行刪除。laravel

安裝擴展包

將以上配置直接粘貼到你的 package.json 文件中，執行 cnpm install 或者 yarn install。git

沒有 cnpm 的，須要設置淘寶鏡像，npm 下載的是國外的鏡像，速度慢並且可能出現下載失敗的問題。

# 設置淘寶鏡像命令
npm install -g cnpm --registry=https://registry.npm.taobao.org

若是想單個安裝擴展，能夠執行命令以下：

cnpm install vue-router --save

前端結構搭建

vue前端的文件結構在 /recources/assets/js 目錄，vue可以渲染主要是兩個操做

vue 掛載到頁面的節點中
vue-router 處理路由，渲染對應的組件

1. 創建 html 文件

在 resource/views 新建 index.blade.php,代碼以下

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>laravel-vue-iview項目</title>
</head>
<body style="height: 100%">
<div id="app">

</div>
<script src="{{ mix('js/app.js') }}"></script>

</body>
</html>

2. 修改 `/recources/assets/js.app.js`

require('./bootstrap');

// 導入擴展包
window.Vue = require('vue');

import App from './app.vue'
import VueRouter from 'vue-router';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

// 導入vue
Vue.use(iView);
Vue.use(VueRouter);

// 路由配置
const RouterConfig = {
    routes: [
        // ExampleComponent laravel默認的示例組件
        { path: '/', component: require('./components/ExampleComponent.vue') },
    ]
};
const router = new VueRouter(RouterConfig);

const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

3. 創建 Layout

在 /recources/assets/js 新建 app.vue, 將 iview 的 layout 代碼搬過來：

<style scoped>
  .layout-con{
    height: 100%;
    width: 100%;
  }
  .menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }
  .menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }
  .collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
  }
  .collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
</style>
<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh'}">
      <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
        <Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
          <MenuItem name="1-1">
            <Icon type="ios-navigate"></Icon>
            <span>Option 1</span>
          </MenuItem>
          <MenuItem name="1-2">
            <Icon type="search"></Icon>
            <span>Option 2</span>
          </MenuItem>
          <MenuItem name="1-3">
            <Icon type="settings"></Icon>
            <span>Option 3</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb :style="{margin: '16px 0'}">
            <BreadcrumbItem>Home</BreadcrumbItem>
            <BreadcrumbItem>Components</BreadcrumbItem>
            <BreadcrumbItem>Layout</BreadcrumbItem>
          </Breadcrumb>
          <Card>
            <div style="height: 600px">Content</div>
          </Card>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isCollapsed: false
      };
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    }
  }
</script>

4. 添加組件

路由訪問的組件會渲染到 <router-view></router-view>, 因此咱們修改上面的 app.vue，將 content 文字修改成 <router-view></router-view>，上面的代碼是已經修改過得。

而後修改組件 /recources/assets/js/components/ExampleComponent.vue 的內容：

<template>
    <Tabs>
        <TabPane label="macOS" icon="social-apple">標籤一的內容</TabPane>
        <TabPane label="Windows" icon="social-windows">標籤二的內容</TabPane>
        <TabPane label="Linux" icon="social-tux">標籤三的內容</TabPane>
    </Tabs>
</template>

5. 建立 web 路由

在 /routes/web.php 中新建一個訪問咱們掛載着vue頁面的路由。

Route::get('/', function () {
    return view('index');
});

6. 編譯運行

經常使用的編譯命令以下：

# 本地環境編譯
npm run dev

# 本地環境編譯 + 監控文件修改
npm run watch

# 生產環境編譯
npm run prod

這裏我使用 npm run dev，編譯成功後訪問項目就能夠看到咱們建立的 vue 頁面了。

至此，只是完成了基礎的搭建過程，一個完整的項目還須要合理的 項目結構 和基礎的權限管理 等，這些內容也會逐步在此項目中完善。最終的目的是爲了開發新項目時，能夠 拿來就用,而不是每次從新再配置一遍。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。