ホームページ >バックエンド開発 >PHPチュートリアル >Laravelでvueを使う(2)
Laravelでvueを使う(2)
- WBOYオリジナル
- 2016-06-20 12:26:121460ブラウズ
前回の記事では vue と、Laravel で vue 環境を素早く構築する方法を紹介しました。
この記事では、Laravel で Vue をより深く使用する方法について説明します。
前処理
Vue は、jade、sass などの前処理ツールの使用もサポートしています。 Stylus、Jade を使用する場合は、npm install
npm install stylus jade --save-dev
次に、使用している前処理ツールを 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> コンポーネント
Vue では、モジュール式のカプセル化を行うことができます。このモジュールの機能は、プロンプトをポップアップすることです。その後、ユーザーは手動でオフにすることができ、プログラマはスタイルやコンテンツなどを設定できます。ディレクトリ分割、モジュールを格納するためのコンポーネント フォルダーを 1 つ追加します。ビューの下の vue ファイルとの違いは、それらが複数のページに表示されるか、独立してビジネス ロジックを完成できる再利用可能なモジュールであるのに対し、ビューの下には 1 つの入り口があることです。 Vue インスタンス。
.├── components│ └── alert.vue├── entries│ └── hello.js└── views └── Hello.vue
サブモジュールの紹介
<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> Alertの具体的な実装module
<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>
ページの効果は次のとおりです:
x をクリックして閉じます。
Vue CDN
上記の一連の操作を使用した後、js ファイルが 1 つだけ出力され、このファイルのサイズ (圧縮なし) が 2 に達していることがわかります。 300KB、これは明らかに無理があります。その理由は、browserify が vue 全体を js ファイルに出力するためです。しかし実際には、vue.js を変更する必要はありません。それを抽出して cdn を使用できます。
これを実現するには、browserify-shim を使用できます。
npm install browserify-shim --save-dev
package.json を変更する
"browserify": { "transform": [ "vueify", "browserify-shim" ]},"browserify-shim": { "vue": "global:Vue"} ブレード ファイルを変更する, 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>
以前は vue ファイル全体が直接プッシュされていましたが、ファイル サイズは 13KB
var _vue = (typeof window !== "undefined" ? window['Vue'] : typeof global !== "undefined" ? global['Vue'] : null);TheEnd
Laravel プロジェクトの関連するすべてのソースコードを github に提出しました。必要な学生はそれを確認できます。自分たちで外に出る。