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

今回は、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 './views/404';
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: 'vue-html!pug-html'
      },
...

Sass support

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

Vue-

resource

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

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

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

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

関連書籍:

BOM操作に関するjs知識集

js正規表現の応用例10選

以上がVue.js 2.0 バックエンドシステムの実践事例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。