Parlons d'une façon de développer Vue sans utiliser Node.js-Questions et réponses frontales-php.cn

Parlons d'une façon de développer Vue sans utiliser Node.js

PHPz

Libérer： 2023-04-17 17:25:32

original

1440 Les gens l'ont consulté

Développement Vue : aucun NodeJS n'est utilisé

Avec le développement de la technologie front-end, Vue est devenue un framework front-end largement utilisé. Lors de l'utilisation de Vue pour le développement, Node.js est généralement utilisé pour créer un environnement de développement local, empaqueter et publier, etc. Pour certains débutants ou développeurs qui ne sont pas familiers avec Node.js, ce processus peut être difficile. Par conséquent, cet article présentera une méthode de développement de Vue sans utiliser Node.js.

Utilisez CDN pour présenter Vue

Tout d'abord, introduisez Vue.js et Vue Router.js via CDN dans la page HTML pour réaliser un développement Vue similaire à l'utilisation de jQuery :

<!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>

Copier après la connexion

Utilisez Webpack pour empaqueter

De plus En plus d'utiliser CDN pour charger Vue, nous pouvons également utiliser Webpack pour l'empaquetage. Webpack est un outil très puissant qui peut être utilisé pour empaqueter des fichiers JavaScript et CSS, et même des ressources statiques telles que des images et des polices. Il prend également en charge des fonctionnalités avancées telles que le rechargement à chaud, la séparation de code et le chargement à la demande.

Ce qui suit est un exemple de fichier de configuration d'environnement de développement Vue basé sur Webpack :

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
   }
};

Copier après la connexion

Utilisation de Vue CLI

Si vous n'êtes pas suffisamment familier avec Webpack, vous pouvez envisager d'utiliser Vue CLI pour créer rapidement un projet Vue. Vue CLI est un échafaudage officiel pour les développeurs Vue.js. Il peut créer rapidement un projet Vue complet et intègre Webpack et certains plug-ins Vue couramment utilisés, ce qui peut réduire considérablement le temps de développement et de configuration.

Voici les étapes pour créer un projet Vue à l'aide de Vue CLI :

Installer Vue CLI

npm install -g vue-cli

Copier après la connexion

Créer un nouveau projet Vue

vue create my-project

Copier après la connexion

Exécuter le projet Vue

cd my-project
npm run serve

Copier après la connexion

Utiliser JSFiddle

Si Si vous souhaitez simplement essayer certaines fonctionnalités de Vue, vous pouvez envisager d'utiliser JSFiddle pour le développement de Vue. JSFiddle est un environnement de développement en ligne qui vous permet de créer des instances Vue et d'effectuer une édition et un débogage en temps réel.

Ce qui suit est un exemple de création d'une instance Vue dans JSFiddle :

<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>

Copier après la connexion

Résumé

Ci-dessus sont quelques méthodes de développement de Vue sans utiliser Node.js. Qu'il s'agisse de l'introduction du CDN, du packaging à l'aide de Webpack, de Vue CLI ou de JSFiddle, il existe des scénarios applicables. Dans le développement réel d'un projet, des plans de développement appropriés peuvent également être sélectionnés en fonction de différents besoins et niveaux techniques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!