Laravelでvueを使う(2)-PHPチュートリアル-php.cn

Laravelでvueを使う(2)

WBOY

リリース： 2016-06-20 12:26:12

オリジナル

1456 人が閲覧しました

前回の記事では 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 に提出しました。必要な学生はそれを確認できます。自分たちで外に出る。