Laravel 和 Vue 的项目搭建：基础篇

jiekechoo 发布于2019-06-28 18:24 / 1397人阅读

摘要：此项目前端使用框架，加上这些常用扩展后的其中还加入了加载器解析工具前端动画等，不需要的可以自行删除。没有的，需要设置淘宝镜像，下载的是国外的镜像，速度慢而且可能出现下载失败的问题。

本篇只是实现了基础的功能，对于实际的项目中的权限等还未涉及，这些会在后期逐步完善。

相关项目 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 页面了。

至此，只是完成了基础的搭建过程，一个完整的项目还需要合理的 项目结构 和基础的权限管理 等，这些内容也会逐步在此项目中完善。最终的目的是为了开发新项目时，可以 拿来就用,而不是每次重新再配置一遍。

私有云 idc机房托管云服务器搭建vue项目阿里云服务器搭建vue项目基础篇之基础篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28243.html

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

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

Terry_Tai 2019-08-05 17:19 评论0 收藏0
关于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