Lassen Sie uns über eine Möglichkeit sprechen, Vue zu entwickeln, ohne Node.js zu verwenden-Front-End-Fragen und Antworten-php.cn

Lassen Sie uns über eine Möglichkeit sprechen, Vue zu entwickeln, ohne Node.js zu verwenden

PHPz

Freigeben： 2023-04-17 17:25:32

Original

1401 Leute haben es durchsucht

Vue-Entwicklung: Kein NodeJS

Mit der Entwicklung der Front-End-Technologie hat sich Vue zu einem weit verbreiteten Front-End-Framework entwickelt. Wenn Sie Vue für die Entwicklung verwenden, wird Node.js im Allgemeinen zum Erstellen einer lokalen Entwicklungsumgebung, zum Verpacken und Veröffentlichen usw. verwendet. Für einige Anfänger oder Entwickler, die mit Node.js nicht vertraut sind, kann dieser Vorgang schwierig sein. Daher wird in diesem Artikel eine Methode für die Vue-Entwicklung ohne Verwendung von Node.js vorgestellt.

Verwenden Sie CDN, um Vue einzuführen

Führen Sie zunächst Vue.js und Vue Router.js über CDN auf der HTML-Seite ein, um etwas Ähnliches zu erreichen Verwenden Sie jQuery für die Vue-Entwicklung:

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

Nach dem Login kopieren

Verwenden Sie Webpack zum Verpacken

Zusätzlich zur Verwendung von CDN zum Laden von Vue können wir Webpack auch für verwenden Verpackung. Webpack ist ein sehr leistungsstarkes Tool, das zum Packen von JavaScript- und CSS-Dateien und sogar statischen Ressourcen wie Bildern und Schriftarten verwendet werden kann. Es unterstützt auch erweiterte Funktionen wie Hot-Reloading, Code-Trennung und Laden bei Bedarf.

Das Folgende ist ein Beispiel einer Vue-Entwicklungsumgebungskonfigurationsdatei basierend auf 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
   }
};

Nach dem Login kopieren

Verwenden von Vue CLI

#🎜 🎜# Wenn Sie mit Webpack nicht vertraut sind, können Sie Vue CLI verwenden, um schnell ein Vue-Projekt zu erstellen. Vue CLI ist ein offizielles Gerüst für Vue.js-Entwickler. Es kann schnell ein vollständiges Vue-Projekt erstellen und Webpack und einige häufig verwendete Vue-Plug-Ins integrieren, was die Entwicklungs- und Konfigurationszeit erheblich verkürzen kann.

Hier sind die Schritte zum Erstellen eines Vue-Projekts mit Vue CLI:

```
npm install -g vue-cli
```
Nach dem Login kopieren

# 🎜🎜 #Neues Vue-Projekt erstellen

```
vue create my-project
```
Nach dem Login kopieren

Vue-Projekt ausführen

```
cd my-project
npm run serve
```
Nach dem Login kopieren

JSFiddle verwenden# 🎜🎜 #

Wenn Sie nur einige Funktionen von Vue ausprobieren möchten, können Sie JSFiddle für die Vue-Entwicklung verwenden. JSFiddle ist eine Online-Entwicklungsumgebung, mit der Sie Vue-Instanzen erstellen und Bearbeitungen und Debugging in Echtzeit durchführen können.

Das Folgende ist ein Beispiel für die Erstellung einer Vue-Instanz in 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>

Nach dem Login kopieren

Zusammenfassung

Das Obige zeigt einige Vue-Entwicklungen ohne Verwendung von Node.js Verfahren. Ob CDN-Einführung, Paketierung mit Webpack, Verwendung von Vue CLI oder JSFiddle – es gibt anwendbare Szenarien. Bei der eigentlichen Projektentwicklung können je nach Bedarf und technischem Niveau auch geeignete Entwicklungspläne ausgewählt werden.

Das obige ist der detaillierte Inhalt vonLassen Sie uns über eine Möglichkeit sprechen, Vue zu entwickeln, ohne Node.js zu verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!