ホームページ > 記事 > ウェブフロントエンド > インストールから構築プロセスまでの vue.js のグラフィカルな紹介
この記事では、主に vuejs のインストールから構築までのプロセス全体を詳細に紹介します。興味のある方は参考にしてください。
最初は、前の方法に従って vue を使用して関連ファイルを直接ダウンロードしました。
を操作しに来ました その後、インストールした方が使いやすそうなことが分かり、
フレームワークのセットアップ方法を考え始めました。 プロセスは次のとおりです。 1.nodejsをインストールします
オンラインで直接ダウンロードします2.Taobaoイメージをインストールしますnpm install -g cnpm --registry= https://registry.npm.taobao.org3.webpackをインストールします
cnpm install webpack -g4.プロジェクト ファイルを保存する新しいプロジェクトを作成したいです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
.exports.plugins =
new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery' })
を追加し、引用される js に import $ from 'jquery'
window.$=$
を追加することを意味します。このようにして、jQuery がプロジェクトに正常にインポートされます
2、
static
静的 CSS インポートは、対応する .vue ファイルにインポートすることです例:@import './assets/css/global.css';
require
そして、これらの js と css は、assets
require('./assets/js/global.js')
import
と elementui のインポート方法は同じです。 ここでは、vue-resource を示します。例としてnpm install vue-resource --save
その後、インポートが必要なjsにインポートして使用しますimport VueResource from 'vue-resource'
Vue.use(VueResource)
以上がインストールから構築プロセスまでの vue.js のグラフィカルな紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。