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

jiekechoo 發布于2019-06-28 18:24 / 1553人閱讀

摘要：此項目前端使用框架，加上這些常用擴展后的其中還加入了加載器解析工具前端動畫等，不需要的可以自行刪除。沒有的，需要設置淘寶鏡像，下載的是國外的鏡像，速度慢而且可能出現下載失敗的問題。

本篇只是實現了基礎的功能，對于實際的項目中的權限等還未涉及，這些會在后期逐步完善。

相關項目 laravel-vue-iview 的 GitHub 地址戳這里，此項目基本可用于實際開發工作。

Laravel 創建項目

Laravel 最新版本是 5.6，但是 5.5 是長期支持版本所以這里依舊選擇使用 5.5

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

運行項目

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

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 和 axios（網絡請求工具），如果開發中、大型項目，vue-router（路由管理工具）和 vuex（狀態管理工具）也必不可少。

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

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

  "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 前端動畫等，不需要的可以自行刪除。

安裝擴展包

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

沒有 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,代碼如下




    
    
    
    laravel-vue-iview項目

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 代碼搬過來：

4. 添加組件

路由訪問的組件會渲染到 , 所以我們修改上面的 app.vue，將 content 文字修改為，上面的代碼是已經修改過得。

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

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 頁面了。

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

GPU云服務器云服務器云服務器搭建vue項目阿里云服務器搭建vue項目基礎篇之基礎篇

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/28243.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
PHP相關

摘要：的機器學習庫的機器學習庫，包括算法交叉驗證神經網絡等內容。在即將到來的大會上，她將和大家分享在機器學習領域的全新可能。入門總結入門相關，如安裝配置基本使用等。基于 Swoole 開發 PHP 擴展 Swoole-1.9.7 增加了一個新特性，可以基于 Swoole 使用 C++ 語言開發擴展模塊，在擴展模塊中可以注冊 PHP 內置函數和類。現在可以基于 Swoole 來編寫 PHP ...

lewinlee 2019-06-28 14:39 評論0 收藏0
Laravel核心解讀--完結篇

摘要：過去一年時間寫了多篇文章來探討了我認為的框架最核心部分的設計思路代碼實現。為了大家閱讀方便，我把這些源碼學習的文章匯總到這里。數據庫算法和數據結構這些都是編程的內功，只有內功深厚了才能解決遇到的復雜問題。過去一年時間寫了20多篇文章來探討了我認為的Larave框架最核心部分的設計思路、代碼實現。通過更新文章自己在軟件設計、文字表達方面都有所提高，在剛開始決定寫Laravel源碼分析地...

laoLiueizo 2019-07-01 11:21 評論0 收藏0