Rumah > Artikel > hujung hadapan web > Mari kita bincangkan tentang cara untuk membangunkan Vue tanpa menggunakan Node.js
Mari kita bincangkan tentang cara untuk membangunkan Vue tanpa menggunakan Node.js
- PHPzasal
- 2023-04-17 16:39:421419semak imbas
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>
- 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
}
};
- 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
- Buat Vue baharu projek
vue create my-project
- Jalankan projek Vue
cd my-project npm run serve
- 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>
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!