インストールから構築プロセスまでの vue.js のグラフィカルな紹介

この記事では、主に vuejs のインストールから構築までのプロセス全体を詳細に紹介します。興味のある方は参考にしてください。

最初は、前の方法に従って vue を使用して関連ファイルを直接ダウンロードしました。

を操作しに来ました その後、インストールした方が使いやすそうなことが分かり、

フレームワーク

のセットアップ方法を考え始めました。 プロセスは次のとおりです。 1.nodejsをインストールします

オンラインで直接ダウンロードします

2.Taobaoイメージをインストールします

npm install -g cnpm --registry= https://registry.npm.taobao.org

3.webpackをインストールします

cnpm install webpack -g

4.プロジェクト ファイルを保存する新しいプロジェクトを作成したいです

cd をファイル パスに追加します

vue init webpack-simple プロジェクト名 (名前は中国語にすることはできません)

その後、いくつかのデフォルト設定があります

Target directory exists. Continue? (Y/n) 直接回车默认
  Project name (vue-test) 直接回车默认
  Project description (A Vue.js project) 直接回车默认
  Author 写你自己的名字

5.完了すると、必要なファイルがすでにフォルダーにあることがわかります

6. ファイルが多いため、npm プロジェクトの依存関係のインストールは時間がかかります

npm install

7. プロジェクトを実行します

npm run dev

この時点で、基本的なインストールとセットアップは完了です

以下は、プロジェクト

1、

jQuery

のインポートで遭遇したいくつかの必要なファイルの導入について書きます。以前他の人と一緒に、彼は vue は jQuery を使用する必要がないと言っていましたが、私たちのプロジェクトではそれをインストールしたいと言われたので、インストールしました -_- 最初はコマンドラインインストールです

npm install jquery --save

追加 - -save はローカルに保存してから webpack.config.js

module

.exports.plugins =

new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery'
 })

を追加し、引用される js に

import $ from 'jquery'
window.$=$

を追加することを意味します。このようにして、jQuery がプロジェクトに正常にインポートされます

2、
static

css、および js import

静的 CSS インポートは、対応する .vue ファイルにインポートすることです例:

@import './assets/css/global.css';

static js 内の対応する js

require
そして、これらの js と css は、assets

require('./assets/js/global.js')

3 の下に配置する必要があります。 vue-

resource

import

と elementui のインポート方法は同じです。 ここでは、vue-resource を示します。例として

npm install vue-resource --save

その後、インポートが必要なjsにインポートして使用します

import VueResource from 'vue-resource'
Vue.use(VueResource)

以上がインストールから構築プロセスまでの vue.js のグラフィカルな紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。