Mari kita bincangkan tentang cara untuk membangunkan Vue tanpa menggunakan Node.js-Soal Jawab bahagian hadapan-php.cn

Mari kita bincangkan tentang cara untuk membangunkan Vue tanpa menggunakan Node.js

PHPz

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

asal

1401 orang telah melayarinya

Pembangunan Vue: Tiada NodeJS digunakan

Dengan pembangunan teknologi bahagian hadapan, Vue telah menjadi rangka kerja bahagian hadapan yang digunakan secara meluas. Apabila menggunakan Vue untuk pembangunan, Node.js biasanya digunakan untuk membina persekitaran pembangunan tempatan, membungkus dan menerbitkan, dsb. Bagi sesetengah pemula atau pembangun yang tidak biasa dengan Node.js, proses ini mungkin sukar. Oleh itu, artikel ini akan memperkenalkan kaedah untuk pembangunan Vue tanpa menggunakan Node.js.

Perkenalkan Vue menggunakan CDN

Mula-mula, perkenalkan Vue.js dan Vue Router.js melalui CDN dalam halaman HTML untuk melaksanakan Vue serupa dengan menggunakan Pembangunan 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>

Salin selepas log masuk

Gunakan Webpack untuk pembungkusan

Selain menggunakan CDN untuk memuatkan Vue, kami juga boleh menggunakan Webpack untuk pembungkusan. Webpack ialah alat yang sangat berkuasa yang boleh digunakan untuk membungkus fail JavaScript dan CSS, malah sumber statik seperti imej dan fon Ia juga menyokong ciri lanjutan seperti muat semula panas, pemisahan kod dan pemuatan atas permintaan.

Berikut ialah contoh fail konfigurasi persekitaran pembangunan Vue berdasarkan 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
   }
};

Salin selepas log masuk

Menggunakan Vue CLI

Jika anda tidak cukup biasa dengan Webpack , maka anda boleh mempertimbangkan untuk menggunakan Vue CLI untuk membina projek Vue dengan cepat. Vue CLI ialah perancah rasmi untuk pembangun Vue.js. Ia boleh membuat projek Vue yang lengkap dengan cepat dan menyepadukan Webpack dan beberapa pemalam Vue yang biasa digunakan, yang boleh mengurangkan banyak masa pembangunan dan konfigurasi.

Berikut ialah langkah-langkah untuk mencipta projek Vue menggunakan Vue CLI:

Pasang Vue CLI

npm install -g vue-cli

Salin selepas log masuk

Buat Vue baharu projek

vue create my-project

Salin selepas log masuk

Jalankan projek Vue

cd my-project
npm run serve

Salin selepas log masuk

Gunakan JSFiddle

Jika anda hanya mahu untuk mencubanya Beberapa ciri Vue, maka anda boleh mempertimbangkan untuk menggunakan JSFiddle untuk pembangunan Vue. JSFiddle ialah persekitaran pembangunan dalam talian yang membolehkan anda mencipta tika Vue dan melakukan pengeditan dan penyahpepijatan masa nyata.

Berikut ialah contoh mencipta tika Vue dalam 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>

Salin selepas log masuk

Ringkasan

Di atas ialah beberapa cara untuk membangunkan Vue tanpa menggunakan Node.js. Sama ada pengenalan CDN, pembungkusan menggunakan Webpack, menggunakan Vue CLI atau JSFiddle, terdapat senario yang berkenaan. Dalam pembangunan projek sebenar, rancangan pembangunan yang sesuai juga boleh dipilih berdasarkan keperluan dan tahap teknikal yang berbeza.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara untuk membangunkan Vue tanpa menggunakan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!