最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

LARAVEL學習 DAY 18 VUE.JS(二)

XAMPP下载 admin 675浏览 0评论
 LARAVEL學習 DAY 18 VUE.JS(二)
前言

正文
這次我們就直接毫不留情把它原本的那個元件砍了吧
砍完之後把resourcesiews/index.blade.php的元件改成<app/>
app.js的元件宣告部分改成Vue.component(‘app’, require(‘./components/App.vue’));
因為我們要拿app來當進入點
之後建立一個resources/assets/js/components/App.vue
裡面大概長這樣

<template>
<div>
Hello, world!
</div>
</template>

<script>
export default {

}
</script>
然後

npm run watch
— or —
yarn watch
然後就會看到一個很老套的東西了…

不管啦 來裝套件(頭痛)

npm install vue-router
— or —
yarn add vue-router
裝完之後把app.js改成這樣

/**
* First we will load all of this project’s JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/

require(‘./bootstrap’);

window.Vue = require(‘vue’);
import VueRouter from ‘vue-router’;
import router from ‘./router’;

Vue.use(VueRouter);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/

Vue.component(‘app’, require(‘./components/App.vue’));

const app = new Vue({
el: ‘#app’,
router
});
然後再重新watch(保守起見)

會報錯是正常的 因為我們沒有router.js
再來就是新增resources/assets/js/router.js

import VueRouter from ‘vue-router’;

const routes = [
{
path: ‘/’,
component: require(‘./components/Index’)
}
];

const router = new VueRouter({ routes });
export default router;
之後新增resources/assets/js/components/Index.vue

<template>
<div>
Hi, world!
</div>
</template>

<script>
export default {

}
</script>

然後就會發現 watch過了是過了 可是還是沒什麼Hi, world!…
這是因為我們的vue-router根本找不到地方注入啊~
那就到App.vue來注入吧
在那個Hello, world!下面新增一個<router-view/>就萬事太平了

QQ截图20180922160012

转载请注明:XAMPP中文组官网 » LARAVEL學習 DAY 18 VUE.JS(二)

您必须 登录 才能发表评论!