ホームページ  >  記事  >  ウェブフロントエンド  >  インストールから構築プロセスまでの vue.js のグラフィカルな紹介

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

高洛峰
高洛峰オリジナル
2017-03-19 09:37:161281ブラウズ

この記事では、主に 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

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

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。