入坑vue laravel,配置vue-router和axios
laravel和vue是老搭档了但是想搭建好这个平台对刚刚接触这些东西的(我)还是非常复杂的
首先感谢一篇CSDN的文章让我觉得CSDN上还不全是复制的东西
Laravel5.5 + Vue2 + Element 环境搭建-作者-潜心做事CG
搭建过程
1.首先安装composer
composer是一个非常厉害的东西
我是mac环境 brew install composer
或者使用composer.phar的局部操作也行,
以下是下载composer.phar的命令转自getcomposer
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
2.创建Laravel项目
laravel是一个很漂亮又具有内涵的php框架
我给新项目起名叫做Larvuent了来源于一篇CSDN文章
composer create-project --prefer-dist laravel/laravel Larvuent
cd Larvuent
这就算创建完成了吧
3.安装依赖库
安装之前要先安装好node和npm的环境
$node -v
v10.15.1
$npm -v
6.7.0
进入项目之后
npm install
速度慢的尽量使用代理,cnpm还是容易翻车,或者多等会儿
bash怎么使用代理之后再说
安装完成之后我们先看一下有个public目录,这就是服务目录我们先使用
php -S localhost:8080 -t public/
然后去服务器看看服务启动没有
Screen Shot 2019-02-17 at 11.26.16 PM.png
服务已经启动了
4.修改路由(我的习惯而已)
如果不知道路由是什么建议先了解一下php的基础
修改 routes/web.php 文件为
Route::get('/', function () {
return view('index');
});
5.新建vue测试连通性
在resource/js/components下其实已经有了一个ExampleComponent.vue
$cat ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
6.修改 app.js 文件，渲染组件
修改resources/assets/js/app.js文件
require('./bootstrap');
window.Vue = require('vue');
import ExampleComponent from './components/ExampleComponent.vue'; // 引入Hello 组件
const app = new Vue({
el: '#app',
render: h => h(ExampleComponent)
});
说明：app.js 是构建 Vue 项目的主文件，最后所有的组件都会被引入到这个文件，在引入所有组件之前，bootstrap.js 文件做了一些初始化的操作。同时，因为有了 window.Vue = require(‘vue’) 这句话，就不再需要使用 import Vue from ‘vue’ 重复导入 Vue 了。
7.新建 Laravel 视图文件，和 Vue 交互
在 resources/views 目录下新建 index.blade.php 文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Larvuent</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
说明：你可能在其他教程中看到有的在使用 assets 函数，这两个函数的主要区别就是 assets 函数会直接使用所填路径去 public 文件夹下找文件，而 mix 函数会自动加载带 hash 值的前端资源。这是和 Laravel 前端资源的缓存刷新相关的，如果现在还不明白，不要紧，你记得使用 mix 函数就好了，然后继续往后看。
8.编译前端组件，运行
执行以下命令，编译前端资源
npm run dev
然后我们再次来到项目根目录
php -S localhost:8080 -t public/
其实上面这个可以不关,我们再开一个窗口来完成其余内容就行了啦
Screen Shot 2019-02-17 at 11.49.28 PM.png
9.引入ElementUI
在项目中执行
npm i element-ui -S
过程会慢点稍等
在resources/assets/js/app.js中引入组件
//添加如下几行来引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
10.修改 Hello.vue 文件，使用 Element 组件
修改其中template为
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
<el-button @click="visible = !visible">按钮</el-button>
<el-col v-show="visible">欢迎使用 Element</el-col>
</div>
</div>
</div>
</div>
</template>
同时下方的数据也要使用data(){return{}}的方式给出
<script>
export default {
data(){
return {
visible:false
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
11.再次编译运行
除了php -S跑在后台之外
我们可以使用npm run watch来让vue自己监视前端改变然后自动编译资源
再次访问效果如下
Screen Shot 2019-02-18 at 12.01.30 AM.png
其实整个项目已经搭建完成了
完善
细心的人会发现
Screen Shot 2019-02-18 at 12.04.51 AM.png
这里有个CSRF报错,在view.blade.php中加一行
<meta name="csrf-token" content="{{ csrf_token() }}">加在
<meta charset="UTF-8">旁边即可解决问题
下方然后加好之后的文件为
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Larvuent</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Vue-router的引入
这个包的引入会改变你对前端的看法,用了之后会觉得前端真的是拼起来的
1.安装
npm install vue-router --save-dev
2.配置 vue-router
在 resources/assets/js 目录下新建目录 router ，同时在 router 目录下新建 index.js 文件
// resources/assets/js/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: 'index',
path: '/',
component: resolve => void(require(['../components/ExampleComponent.vue'], resolve))
}
]
});
3.引入vue-router
按照标准在resources/assets/js下新建文件App.vue
// resources/assets/js/App.vue
<template>
<div>
<h1>Hello, {{ msg }}!</h1>
<router-view></router-view> <!--路由引入的组件将在这里被渲染-->
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Vue'
}
}
}
</script>
<style>
</style>
4.修改app.js
修改 resources/assets/js/app.js 文件为
import router from './router/index.js';
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
const app = new Vue({
el: '#app',
router,
render: h => h(App)
});
虽然app.js和index.js里重复引入了vue,但是暂未找到解决方法
axios请求数据
1.安装axios
我记得直接安装axios会报错
先执行
npm install axios
再执行
npm install --save axios vue-axios
然后再app.js里添加这几条
import axios from 'axios'
Vue.prototype.$http = axios;
以下是一个post方法的实例,其中有几个点相当坑人
1.首先你是必须在headers里添加
CSRF保护
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
完全示例如下
this.$http.post('/api/user/login', {
"username": this.username,
"password": this.password,
headers: {
// language=JQuery-CSS
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
}).then((response) => {
if (response.data.status
) {
console.log('登录成功');
} else {
console.log('登录失败')
}
}).error((error) => {
alert('当前网络状态不好,请稍后刷新重试');
console.log(error);
});
2..then(...).error(...);有两种写法
一种是同以下8行和15行一样
.then((response)=>{
...
}).error((error)=>{
...
});
以上这种可以在中间使用this指代Vue来访问data中的数据,
还有一种是坑了我好久的
.then(function(response){
//这里面写this好像指代的是axios组件
}).error(function(error){
});
以上为第二种是不能用this访问的,要用self,真的是坑了太久
2.写一段示范一下
由于用外部的API有时候会有奇怪问题有关CSRF保护之类的,因此我们打开route/web.php中添加一条
Route::get('/test',function(){
return "success";
});
忘了说axios并不是vue的组件,我们安装了vue-axios是可以直接引用的
我们可以在app.js中删除掉Vue.prototype.$http = axios;
添加一下两条
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
然后我们在ExampleComponent.vue中修改mounted部分
mounted: function() {
let url = "/test";
this.axios.get(url).then(response => {
this.test = response;
console.log("加载成功");
});
}
至于mounted是干什么的之后各位了解一下vue的生命线即可
我们在模板中添加一行将数据渲染到此处
{{this.test["data"]}}
你可能还没启动服务
(在项目的根目录)开启一个终端输入php -S localhost:8081 -t public/
再开启一个输入npm run watch
然后我们访问一下即可看到console打印加载成功,字样内容渲染到界面了
Screen Shot 2019-02-18 at 9.58.00 AM.png
还有很多新玩意儿vuex啥的还有有关mix的问题之后再说
我把整个项目放在了GitHub链接
vue-laravel-template
有什么问题欢迎戳我
