Laravel 和 Vue 的項(xiàng)目搭建：基礎(chǔ)篇

jiekechoo 發(fā)布于2019-06-28 18:24 / 1580人閱讀

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

本篇只是實(shí)現(xiàn)了 基礎(chǔ) 的功能，對(duì)于實(shí)際的項(xiàng)目中的權(quán)限等還未涉及，這些會(huì)在后期逐步完善。相關(guān)項(xiàng)目 laravel-vue-iview 的 GitHub 地址 戳這里，此項(xiàng)目基本可用于實(shí)際開(kāi)發(fā)工作。

Laravel 創(chuàng)建項(xiàng)目

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

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

運(yùn)行項(xiàng)目

進(jìn)入剛創(chuàng)建的項(xiàng)目，執(zhí)行 php artisan serve ,訪問(wèn) 127.0.0.1:8000

Vue 擴(kuò)展包 package.json 配置

初次接觸 Vue 的同學(xué)，通常對(duì)于要安裝什么擴(kuò)展包感到迷茫。以下是 Laravel package.json 中默認(rèn)的擴(kuò)展包：

"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 支持，因?yàn)槲覀円?iview 所以這個(gè)擴(kuò)展可以刪除。

直接與 Vue 相關(guān)的有 vue 和 axios（網(wǎng)絡(luò)請(qǐng)求工具），如果開(kāi)發(fā)中、大型項(xiàng)目，vue-router（路由管理工具）和 vuex（狀態(tài)管理工具）也必不可少。

還有其他常用的擴(kuò)展，例如支持 cookie 操作的 js-cookie，支持多國(guó)語(yǔ)言開(kāi)發(fā)的 vue-i18n,支持 Sass 語(yǔ)法的 node-sass 等。

此項(xiàng)目前端使用 iview 框架，加上這些常用擴(kuò)展后的 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 前端動(dòng)畫等，不需要的可以自行刪除。

安裝擴(kuò)展包

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

沒(méi)有 cnpm 的，需要設(shè)置淘寶鏡像，npm 下載的是國(guó)外的鏡像，速度慢而且可能出現(xiàn)下載失敗的問(wèn)題。

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

如果想單個(gè)安裝擴(kuò)展，可以執(zhí)行命令如下：

cnpm install vue-router --save

前端結(jié)構(gòu)搭建

vue前端的文件結(jié)構(gòu)在 /recources/assets/js 目錄，vue能夠渲染主要是兩個(gè)操作

vue 掛載到頁(yè)面的節(jié)點(diǎn)中

vue-router 處理路由，渲染對(duì)應(yīng)的組件

1. 建立 html 文件

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




    
    
    
    laravel-vue-iview項(xiàng)目

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

require("./bootstrap");

// 導(dǎo)入擴(kuò)展包
window.Vue = require("vue");

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

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

// 路由配置
const RouterConfig = {
    routes: [
        // ExampleComponent laravel默認(rèn)的示例組件
        { 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 代碼搬過(guò)來(lái)：

4. 添加組件

路由訪問(wèn)的組件會(huì)渲染到 , 所以我們修改上面的 app.vue，將 content 文字修改為，上面的代碼是已經(jīng)修改過(guò)得。

然后修改組件 /recources/assets/js/components/ExampleComponent.vue 的內(nèi)容：

5. 創(chuàng)建 web 路由

在 /routes/web.php 中新建一個(gè)訪問(wèn)我們掛載著vue頁(yè)面的路由。

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

6. 編譯運(yùn)行

常用的編譯命令如下：

# 本地環(huán)境編譯
npm run dev

# 本地環(huán)境編譯 + 監(jiān)控文件修改
npm run watch

# 生產(chǎn)環(huán)境編譯
npm run prod

這里我使用 npm run dev，編譯成功后訪問(wèn)項(xiàng)目就可以看到我們創(chuàng)建的 vue 頁(yè)面了。

至此，只是完成了基礎(chǔ)的搭建過(guò)程，一個(gè)完整的項(xiàng)目還需要合理的 項(xiàng)目結(jié)構(gòu) 和基礎(chǔ)的權(quán)限管理 等，這些內(nèi)容也會(huì)逐步在此項(xiàng)目中完善。最終的目的是為了開(kāi)發(fā)新項(xiàng)目時(shí)，可以 拿來(lái)就用,而不是每次重新再配置一遍。

GPU云服務(wù)器云服務(wù)器云服務(wù)器搭建vue項(xiàng)目阿里云服務(wù)器搭建vue項(xiàng)目基礎(chǔ)篇之基礎(chǔ)篇

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/28243.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

jiekechoo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

拉勾Linux運(yùn)維實(shí)戰(zhàn)訓(xùn)練營(yíng)

閱讀 3369·2021-11-22 15:22
是學(xué)Java好呢？還是學(xué)C++更有前途？

閱讀 2894·2021-10-12 10:12
SpinServers：美國(guó)高配服務(wù)器4路e5-4640v2(40核/80線程)、768G內(nèi)存、4*

閱讀 2190·2021-08-21 14:10
cubecloud，6周年，洛杉磯新品VPS5折(三網(wǎng)回程AS4837)，中國(guó)香港CN2/美國(guó)CN2

閱讀 3856·2021-08-19 11:13
CSS選擇器的分類

閱讀 2871·2019-08-30 15:43
python大佬養(yǎng)成計(jì)劃----HTML網(wǎng)頁(yè)設(shè)計(jì)<二>

閱讀 3256·2019-08-29 16:52
css3 做一個(gè)類似于翻書特效的3D動(dòng)畫

閱讀 481·2019-08-29 16:41
100行l(wèi)ess實(shí)現(xiàn)bootstrap的12柵格布局

閱讀 1468·2019-08-29 12:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Laravel 和 Vue 的項(xiàng)目搭建：基礎(chǔ)篇

相關(guān)文章

**關(guān)于Vue2一些值得推薦的文章 -- 五、六月份**

**關(guān)于Vue2一些值得推薦的文章 -- 五、六月份**

PHP相關(guān)

Laravel核心解讀--完結(jié)篇

發(fā)表評(píng)論

0條評(píng)論

jiekechoo

男|高級(jí)講師

TA的文章

拉勾Linux運(yùn)維實(shí)戰(zhàn)訓(xùn)練營(yíng)

是學(xué)Java好呢？還是學(xué)C++更有前途？

SpinServers：美國(guó)高配服務(wù)器4路e5-4640v2(40核/80線程)、768G內(nèi)存、4*

cubecloud，6周年，洛杉磯新品VPS5折(三網(wǎng)回程AS4837)，中國(guó)香港CN2/美國(guó)CN2

CSS選擇器的分類

python大佬養(yǎng)成計(jì)劃----HTML網(wǎng)頁(yè)設(shè)計(jì)<二>

css3 做一個(gè)類似于翻書特效的3D動(dòng)畫

100行l(wèi)ess實(shí)現(xiàn)bootstrap的12柵格布局

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Laravel 和 Vue 的項(xiàng)目搭建：基礎(chǔ)篇

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！