ホームページ > 記事 > ウェブフロントエンド > Node.js を使用せずに Vue を開発する方法について話しましょう
Node.js を使用せずに Vue を開発する方法について話しましょう
- PHPzオリジナル
- 2023-04-17 16:39:421376ブラウズ
Vue 開発: NodeJS を使用しない
フロントエンド テクノロジの発展により、Vue は広く使用されるフロントエンド フレームワークになりました。 Vue を開発に使用する場合、ローカル開発環境の構築、パッケージ化、公開などには Node.js が一般的に使用されます。 Node.js に慣れていない初心者や開発者にとって、このプロセスは難しいかもしれません。そこで本記事ではNode.jsを使わずにVue開発を行う方法を紹介します。
- CDN を使用して Vue を導入する
まず、CDN を介して HTML ページに Vue.js と Vue Router.js を導入し、jQuery を使用する場合と同様の Vue を実現します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue Development without Node.js</title>
<!-- 引入 Vue.js 和 Vue Router -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 创建 vue router
const router = new VueRouter({
routes: [...]
});
// 创建 vue 实例
const app = new Vue({
router,
el: '#app',
data: {...},
methods: {...},
mounted() {...}
});
</script>
</body>
</html>
- パッケージ化に Webpack を使用する
CDN を使用して Vue をロードすることに加えて、パッケージ化に Webpack を使用することもできます。 Webpack は、JavaScript や CSS ファイル、さらには画像やフォントなどの静的リソースをパッケージ化するために使用できる非常に強力なツールであり、ホット リロード、コード分離、オンデマンド ロードなどの高度な機能もサポートしています。
以下は、Webpack に基づく Vue 開発環境設定ファイルの例です。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
- Vue CLI の使用
よくわからない場合は、 Webpack で十分な場合は、Vue CLI を使用して Vue プロジェクトを迅速に構築することを検討できます。 Vue CLI は、Vue.js 開発者向けの公式スキャフォールディングであり、完全な Vue プロジェクトを迅速に作成し、Webpack と一般的に使用される Vue プラグインを統合することで、開発と構成の時間を大幅に削減できます。
Vue CLI を使用して Vue プロジェクトを作成する手順は次のとおりです。
- Vue CLI をインストールする
npm install -g vue-cli
- 新しい Vue プロジェクトを作成する
vue create my-project
- Vue プロジェクトを実行します
cd my-project npm run serve
- JSFiddle を使用します
いくつかの機能を試してみたい場合は、 Vue の場合は、Vue 開発に JSFiddle の使用を検討してください。 JSFiddle は、Vue インスタンスを作成し、リアルタイムの編集とデバッグを実行できるオンライン開発環境です。
以下は、JSFiddle で Vue インスタンスを作成する例です。
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
概要
上記は、Node.js を使用しない Vue 開発のいくつかの方法です。 CDN の導入、Webpack を使用したパッケージ化、Vue CLI または JSFiddle の使用のいずれであっても、適用可能なシナリオがあります。実際のプロジェクト開発においても、さまざまなニーズや技術レベルに応じて適切な開発計画を選択することができます。
以上がNode.js を使用せずに Vue を開発する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。