Node.js を使用せずに Vue を開発する方法について話しましょう-フロントエンドQ&A-php.cn

Node.js を使用せずに Vue を開発する方法について話しましょう

PHPz

リリース： 2023-04-17 17:25:32

オリジナル

1401 人が閲覧しました

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