laravel和vue的项目搭建基础篇

2018-02-09 12:42:24来源:segmentfault作者:彼得堡的遗书人点击

分享
本篇是搭建最基础的laravel + vue 项目的过程记录。只要对 laravel 和 vue 有概念就可以完成。
当然只完成本篇只是实现了基础的功能,对于实际的项目应用还有距离,这些会在后期逐步完善。

你也可以到此项目的github地址,查看项目代码。


1.使用 laravel 生成器生成项目:
laravel new blog

或者 composer 安装:


composer create-project --prefer-dist laravel/laravel blog
2.安装 vue 全家桶 (vue,vue-router,vuex,axios)
前端使用 npm 管理,未配置淘宝国内镜像的先执行 :

npm install -g cnpm --registry=https://registry.npm.taobao.org



laravel 在 package.json 中默认已加入 vue 和 axios, 执行 cnpm install 安装。


----安装 vue-router(路由管理)
cnpm install vue-router --save
----安装 vuex(状态管理)
cnpm install vuex --save
3.安装其他依赖(sass, iview)
----安装 sass(css扩展语言)
cnpm install --save-dev node-sass
----安装 iview(前端ui组件)
cnpm install iview --save
4.在 /recources/assets/js 目录下配置前端
-- vue 挂载节点:

在 .html 文件中加载 vue 编译后的 js 文件,并设置挂载点,就可以实现 vue 的挂载。


-- vue 组件渲染:

vue 通过路由访问的组件,会自动渲染到 <router-view></router-view>中(vue-router相关,请移步官网)。


在 resource/views 新建 index.blade.php,代码如下
<!DOCTYPE html>
<html>
<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>
<div></div>
<script src="{{ mix('js/app.js') }}"></script></body>
</html>
在 /recources/assets/js 新建 app.vue, 代码如下
<template>
<router-view>
</router-view>
</template><script>
export default {
name: "app"
}
</script><style scoped></style>修改 /recources/assets/js.app.jsrequire('./bootstrap');// 导入扩展包
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)
});
5.创建web路由并编译前端

在 routes/web.php 中新建一个访问我们挂载着vue页面的路由。


Route::get('/', function () {
return view('index');
});
6.使用 iview 前端ui

修改 /recources/assets/js/components/ExampleComponent.vue


<Tabs>
<TabPane label="macOS" icon="social-apple">标签一的内容</TabPane>
<TabPane label="Windows" icon="social-windows">标签二的内容</TabPane>
<TabPane label="Linux" icon="social-tux">标签三的内容</TabPane>
</Tabs>

执行 npm run dev 编译前端文件,然后访问我们创建的路由。


如果没有配置 nginx ,可以使用 laravel 内置的 php artisan serve访问 http://127.0.0.1:8000 查看是否成功。

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

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台