Rumah > pembangunan bahagian belakang > tutorial php > 在 Laravel 中使用vue(二)

在 Laravel 中使用vue(二)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-06-20 12:26:12
asal
1515 orang telah melayarinya

上篇介绍了vue,以及在如何 Laravel 快速搭建vue环境。

这篇讲如何在 Laravel 中更深入使用Vue。

预处理

vue还支持使用预处理工具,比如jade, sass等等。假设使用Stylus, Jade,那就npm install 一下呗

npm install stylus jade --save-dev
Salin selepas log masuk

然后在vue文件中指定,你使用的预处理工具是什么

<template lang='jade'>.hello  h1 Hello Vue</template><style lang="stylus" scoped>.hello  width: 100vw;  height: 100vh;  display: flex;  justify-content: center;  align-items: center;</style><script>export default {  el() {    return '#app'  },  data() {    return {    }  },  computed:{  },  ready() {  },  methods: {  },  events: {  },  components: {  }}</script>
Salin selepas log masuk

Components

Vue允许我们做模块化封装,以一个Alert模块为例,这个模块的功能是弹出提示,然后用户可以手动关闭,程序员可以设置样式,内容等等。目录划分,增加多一个components 的文件夹来存放模块,它跟views下的vue文件区别在于,它们是在多个页面呈现,或者是可以独立完成业务逻辑的可复用模块,而views 下是一个Vue实例的入口。

.├── components│   └── alert.vue├── entries│   └── hello.js└── views    └── Hello.vue
Salin selepas log masuk

引入子模块

<template lang='jade'>.wrapper  alert()    | Hello Vue  alert(type='error')    | Danger  alert(type='success')    | Login Success</template><style lang="stylus" scoped></style><script>import Alert from '../components/alert.vue'export default {  el() {    return '#app'  },  data() {    return {    }  },  computed:{  },  ready() {  },  methods: {  },  events: {  },  components: {    Alert  }}</script>
Salin selepas log masuk

Alert 模块的具体实现

<template lang="jade">.alert-area(v-if='show')  .alert(:class='typeClass')    span(class='alert-close', @click='show=false') x    i.fa.fa-info-circle.alert-icon(style='font-size: 16px;line-height: 20px;')    .alert-text      slot()</template><script>export default {    props: {        type: {            default: 'info'        },        show: {          type: Boolean,          default: true        },    },    computed:{      typeClass() {        return 'alert-' + this.type;      }    }}</script><style lang="stylus" scoped>.alert  padding: 10px;  &-area    margin-bottom: 10px;  &-icon    width: 20px;    display: inline-block;    float: left;  &-close    cursor: pointer;    float: right;  &-text    word-break: break-all;    margin-left: 20px;    margin-right: 10px;  &-info    background: #c7e0f2;    color: #0082d5;    border: 1px solid #0082d5;  &-success    background: #8AC48A;  &-error    background: red;    color: white;</style>
Salin selepas log masuk

页面效果是这样的:

点击x可以关闭它。

Vue CDN

你可能会发现,使用上面一波操作之后,我们只产出一个js文件,这个文件的体积(未经过压缩)已经达到了2、300KB,这显然是不合常理的。原因是browserify把 整个vue也产出到js文件中。但其实 vue.js 我们并不需要改动到。我们可以将它抽出来,使用cdn。

可以使用 browserify-shim 来完成这件事。

npm install browserify-shim --save-dev
Salin selepas log masuk

修改 package.json

"browserify": {  "transform": [    "vueify",    "browserify-shim"  ]},"browserify-shim": {    "vue": "global:Vue"}
Salin selepas log masuk

修改 blade 文件,引入cdn

<html>  <head>    <title>Laravel</title>    <script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>  </head>  <body>    <div id='app'>    </div>    <script src="js/hello.js" charset="utf-8"></script>  </body></html>
Salin selepas log masuk

之前是直接整个vue文件压入,现在替换成一条语句,文件大小13KB

var _vue = (typeof window !== "undefined" ? window['Vue'] : typeof global !== "undefined" ? global['Vue'] : null);
Salin selepas log masuk

TheEnd

我把Laravel项目中相关 源代码 都提交到github 了,需要的同学自行查阅。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan