Vue.js 2.0 バックエンドシステムの実践事例-jsチュートリアル-php.cn

Vue.js 2.0 バックエンドシステムの実践事例

php中世界最好的语言

リリース： 2018-03-07 17:37:31

オリジナル

1819 人が閲覧しました

今回は、Vue.js 2.0 バックエンドシステムの注意事項を紹介します。

最近、私の友人が自分のスキルを練習するために自分で使用するOAを作りたいと思っていたので（追記、彼はずっとビジネスを始めたいと思っていました）、最近時間が限られているので、一緒にやってみようと頼まれました。彼が自分で使用できるフレームワークを書くのを手伝ってください。

私はプロジェクトの管理にyarnを使用しています(実際にはトレンドに従っていません)。もちろん、Npm管理を使用することもできます

最初にvue-cliを使用してプロジェクトを初期化してから、Vue-router Vuex要素をインストールします。友人はフロントエンドをやったことがなかったので、私は要素ページをすばやく開発することを選択しました。すべての依存関係をインストールした後のディレクトリ構造は次のようになりますディレクトリ構造

ここで注意する必要があるのは、各コンポーネントは、index.vue script.js style.sass template.jade ファイルで構成されるフォルダーであるということです。

エディタ

で整形しておくと便利です

引用するときは、フォルダーを引用するだけです

e.g.
import NotFound from &#39;./views/404&#39;;
index.vue
<style lang="sass" scoped src="./style.sass"></style><template lang="jade" src="./template.pug"></template><script src="./script.js"></script>
script.js
export default {  data() {    return {    }  },  components: {  }}
sass
.red  color: red

ログイン後にコピー

vue-cli webpackで生成されたプロジェクトはjadeを使用しないので、jade-loaderを追加する必要があります。 webpack 自分で

これに注意してください pug-html-loader jade をインストールする必要がある場合

...
     {        test: /\.pug$/,
        loader: &#39;vue-html!pug-html&#39;
      },
...

ログイン後にコピー

Sass support

Sass をサポートするには、sass-loader node-sass

Vue-

resource

I をインストールする必要がありますインストールしましたが、まだ使用するかどうかは決めていません。Ajax を使用する場合は、reqwest ライブラリを使用します

ここでのプロジェクトは、vue2 を使用して単一ページのアプリケーションを構築する最も実用的なプロセスを指します。 0 なので、例の機能は同じです~

github にスターを付けてください

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。さらに php 中国語 Web サイトの他の関連記事にも注目してください。