Rumah hujung hadapan web tutorial js vue2.0怎样开发多页面

vue2.0怎样开发多页面

Apr 13, 2018 am 09:53 AM
bagaimana muka surat

这次给大家带来vue2.0怎样开发多页面,vue2.0开发多页面的注意事项有哪些,下面就是实战案例,一起来看一下。

我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是。因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面。但是vue不止可以做单页面,它还可以做多页面,如果要做多页面的话需要对他的依赖,也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。

vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解步骤。
先声明,如果用vue进行工程化开发,首先要有node.js,然后再下一个npm,不过一般新版的node都会有npm所以可以不用弄。指令是在命令行里输入。首先第一步就是生成一个vue项目,用指令:

vue init webpack test
Salin selepas log masuk

博主本人声明的文件名为test,下载好后一路enter,之后便生成了一个vue项目,但是这个vue项目还没有一些相关的依赖,这个时候需要进入到该文件夹里面,输入指令:

npm install
Salin selepas log masuk

如果网速不好,则用cnpm install,效果一样。略等几分钟后整个依赖便已经下完,之后输入指令:

npm run dev
Salin selepas log masuk

则会自动打开一个界面,如果报错不能打开网页的话只有一种原因,那就端口占用,这个时候需要到/config/index.js目录下改端口就行。

当一个vue项目完成好所有的配置后,接下来就是我们的重点了,首先我们新新建几个html文件,博主我新建了一个one.html和two.html,及其与之对应的vue文件和js文件,文件目录如下:

弄好之后我们进入buildwebpack.base.conf.js目录下,在module.exports的域里,找到entry,在那里配置添加多个入口:

entry: {
 app: './src/main.js',
 one: './src/js/one.js',
 two: './src/js/two.js'
},
Salin selepas log masuk

注意,紫色部分的变量名要起好,因为后面要用到,以防忘记。

接下来就是对开发环境run dev里进行修改,打开buildwebpack.dev.conf.js文件,在module.exports那里找到plugins,下面写法如下:

plugins: [
 new webpack.DefinePlugin({
  'process.env': config.dev.env
 }),
 // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  chunks: ['app']
 }),
 new HtmlWebpackPlugin({
  filename: 'one.html',
  template: 'one.html',
  inject: true,
  chunks: ['one']
 }),
 new HtmlWebpackPlugin({
  filename: 'two.html',
  template: 'two.html',
  inject: true,
  chunks: ['two']
 }),
 new FriendlyErrorsPlugin()
]
Salin selepas log masuk

在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry,如果没写则引入所有页面的资源。

之后就对run build也就是编译环境进行配置。首先打开configindex.js文件,在build里加入这个:

index: path.resolve(dirname, '../dist/index.html'),
one: path.resolve(dirname, '../dist/one.html'),
two: path.resolve(dirname, '../dist/two.html'),
Salin selepas log masuk

然后打开/build/webpack.prod/conf.js文件,在plugins那里找到HTMLWebpackPlugin,然后添加如下代码:

new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  ? 'index.html'
  : config.build.index,
 template: 'index.html',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  // more options:
  // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
 filename: config.build.one,
 template: 'one.html',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'one']
}),
 new HtmlWebpackPlugin({
   filename: config.build.two,
   template: 'two.html',
   inject: true,
   minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
   },
   chunksSortMode: 'dependency',
   chunks: ['manifest', 'vendor', 'two']
 }),
Salin selepas log masuk

其中filename引用的是configindex.js里的build,每个页面都要配置一个chunks,不然会加载所有页面的资源。

然后one.js文件可以这样写:

import Vue from 'vue'
import one from './one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#one',
 render: h => h(one)
})
one.vue写法如下:
<template>
 <p id="one">
  {{msg}}
 </p>
</template>
<script>
export default {
 name: 'one',
 data () {
  return {
   msg: 'I am one'
  }
 }
}
</script>
Salin selepas log masuk

two的写法与之类似,所以不写下来了,

然后App.vue里通过这样写:

<template>
 <p id="app">
  <a href="one.html" rel="external nofollow" >one</a><br>
  <a href="two.html" rel="external nofollow" >two</a><br>
  {{msg}}
 </p>
</template>
Salin selepas log masuk

这样子当你打开页面的时候,点击上面one的链接就会跳转到one.html,点击two就跳转到two.html。这样子就大功告成了。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS提示文本框邮箱地址补全       

$.ajax()方法怎样从服务器里获取json数据

Atas ialah kandungan terperinci vue2.0怎样开发多页面. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menyalin halaman dalam Word Bagaimana untuk menyalin halaman dalam Word Feb 20, 2024 am 10:09 AM

Ingin menyalin halaman dalam Microsoft Word dan mengekalkan pemformatan? Ini adalah idea yang bijak kerana menduplikasi halaman dalam Word boleh menjadi teknik penjimatan masa yang berguna apabila anda ingin membuat berbilang salinan susun atur atau format dokumen tertentu. Panduan ini akan membimbing anda melalui proses langkah demi langkah menyalin halaman dalam Word, sama ada membuat templat atau menyalin halaman tertentu dalam dokumen. Arahan mudah ini direka untuk membantu anda mencipta semula halaman anda dengan mudah tanpa perlu bermula dari awal. Mengapa menyalin halaman dalam Microsoft Word? Terdapat beberapa sebab mengapa menyalin halaman dalam Word sangat bermanfaat: Apabila anda mempunyai dokumen dengan susun atur atau format tertentu yang anda ingin salin. Tidak seperti mencipta semula keseluruhan halaman dari awal

Bagaimana untuk menangani masalah yang halaman Laravel tidak dapat memaparkan CSS dengan betul Bagaimana untuk menangani masalah yang halaman Laravel tidak dapat memaparkan CSS dengan betul Mar 10, 2024 am 11:33 AM

"Bagaimana untuk menangani kegagalan halaman Laravel untuk memaparkan CSS dengan betul, contoh kod khusus diperlukan" Apabila menggunakan rangka kerja Laravel untuk membangunkan aplikasi web, kadangkala anda akan menghadapi masalah bahawa halaman tidak dapat memaparkan gaya CSS dengan betul, yang boleh menyebabkan halaman untuk menghasilkan gaya yang tidak normal. Artikel ini akan memperkenalkan beberapa kaedah untuk menangani kegagalan halaman Laravel untuk memaparkan CSS dengan betul, dan menyediakan contoh kod khusus untuk membantu pembangun menyelesaikan masalah biasa ini. 1. Semak laluan fail Mula-mula semak laluan fail CSS.

Bagaimana untuk melaksanakan lompatan halaman dalam 3 saat: Panduan Pengaturcaraan PHP Bagaimana untuk melaksanakan lompatan halaman dalam 3 saat: Panduan Pengaturcaraan PHP Mar 25, 2024 am 10:42 AM

Tajuk: Kaedah pelaksanaan lompat halaman dalam 3 saat: Panduan Pengaturcaraan PHP Dalam pembangunan web, lompat halaman adalah operasi biasa Secara umumnya, kami menggunakan tag meta dalam kaedah HTML atau JavaScript untuk melompat ke halaman. Walau bagaimanapun, dalam beberapa kes tertentu, kita perlu melakukan lompatan halaman pada bahagian pelayan. Artikel ini akan memperkenalkan cara menggunakan pengaturcaraan PHP untuk melaksanakan fungsi yang secara automatik melompat ke halaman tertentu dalam masa 3 saat, dan juga akan memberikan contoh kod tertentu. Prinsip asas lompat halaman menggunakan PHP adalah sejenis

Cara menyesuaikan dan mengedit mod siap sedia pada iPhone: Perkara baharu dalam iOS 17 Cara menyesuaikan dan mengedit mod siap sedia pada iPhone: Perkara baharu dalam iOS 17 Sep 21, 2023 pm 04:01 PM

Siap sedia ialah ciri baharu dalam kemas kini iOS 17 yang menyediakan cara baharu dan dipertingkat untuk mengakses maklumat apabila telefon anda melahu dengan cepat. Dengan StandBy, anda boleh menyemak masa dengan mudah, melihat acara akan datang, menyemak imbas kalendar anda, mendapatkan kemas kini cuaca untuk lokasi anda dan banyak lagi. Setelah diaktifkan, iPhone secara intuitif akan memasuki mod siap sedia apabila ditetapkan kepada landskap semasa mengecas. Ciri ini sesuai untuk titik pengecasan wayarles seperti meja malam anda, atau apabila anda berada jauh dari pengecasan iPhone anda semasa tugasan harian. Ia membolehkan anda meleret melalui pelbagai widget yang dipaparkan dalam bersedia untuk mengakses set maklumat yang berbeza daripada pelbagai aplikasi. Walau bagaimanapun, anda mungkin ingin mengubah suai widget ini atau memadam beberapa berdasarkan keutamaan anda dan maklumat yang anda perlukan dengan kerap. Jadi mari kita selami

Cara Susun Semula, Lumpuhkan dan Padam Halaman Skrin Utama iPhone Cara Susun Semula, Lumpuhkan dan Padam Halaman Skrin Utama iPhone Nov 29, 2023 am 08:22 AM

Dalam iOS, Apple membenarkan anda melumpuhkan halaman skrin utama individu pada iPhone anda. Anda juga boleh menyusun semula susunan halaman skrin utama dan memadamkan halaman secara langsung dan bukannya melumpuhkannya sahaja. Begini cara ia berfungsi. Cara Menyusun Semula Halaman Skrin Utama Sentuh dan tahan Ruang pada skrin Utama untuk memasuki mod jitter. Ketik baris titik yang mewakili halaman skrin Utama. Dalam grid Skrin Utama yang muncul, sentuh dan seret halaman untuk menyusunnya semula berbanding dengan halaman lain. Orang lain bergerak sebagai tindak balas kepada penyeretan anda. Apabila anda berpuas hati dengan susunan baharu anda, ketik "Selesai" di penjuru kanan sebelah atas skrin, kemudian ketik "Selesai" sekali lagi untuk keluar dari mod dither. Cara Melumpuhkan atau Mengalih Keluar Halaman Skrin Utama Sentuh dan tahan Ruang pada skrin Utama untuk memasuki mod dither. Ketik untuk mewakili skrin utama

Bagaimana untuk memuat semula halaman web dengan cepat? Bagaimana untuk memuat semula halaman web dengan cepat? Feb 18, 2024 pm 01:14 PM

Penyegaran halaman adalah perkara biasa dalam penggunaan rangkaian harian kami Apabila kami melawat halaman web, kadangkala kami menghadapi beberapa masalah, seperti halaman web tidak dimuatkan atau dipaparkan secara tidak normal, dsb. Pada masa ini, kami biasanya memilih untuk memuat semula halaman untuk menyelesaikan masalah, jadi bagaimana untuk memuat semula halaman dengan cepat? Mari kita bincangkan kekunci pintasan untuk muat semula halaman. Kekunci pintasan muat semula halaman ialah kaedah untuk memuat semula halaman web semasa dengan pantas melalui operasi papan kekunci. Dalam sistem pengendalian dan penyemak imbas yang berbeza, kekunci pintasan untuk muat semula halaman mungkin berbeza. Di bawah ini kami menggunakan W biasa

Pengenalan kepada cara memadam halaman kandungan dalam Word Pengenalan kepada cara memadam halaman kandungan dalam Word Mar 26, 2024 am 10:06 AM

Tajuk: Pengenalan kepada cara memadam halaman kandungan dalam Word Semasa mengedit dokumen menggunakan Microsoft Word, kadangkala anda mungkin menghadapi situasi di mana anda perlu memadamkan kandungan halaman tertentu Anda mungkin mahu memadamkan halaman kosong atau kandungan yang tidak diperlukan pada halaman tertentu dalam dokumen. Sebagai tindak balas kepada situasi ini, kami boleh mengambil beberapa kaedah untuk memadamkan halaman kandungan dengan cepat dan berkesan. Seterusnya, beberapa kaedah untuk memadam halaman kandungan dalam Microsoft Word akan diperkenalkan. Kaedah 1: Padam halaman kandungan Mula-mula, buka dokumen Word yang perlu diedit. Sudah tentu

Gunakan ThinkPHP6 untuk melaksanakan halaman 404 yang cantik Gunakan ThinkPHP6 untuk melaksanakan halaman 404 yang cantik Jun 20, 2023 am 11:06 AM

Apabila Internet berkembang, banyak laman web atau aplikasi secara beransur-ansur menjadi lebih kompleks. Apabila pengguna menggunakannya, mereka sering menghadapi halaman ralat, yang paling biasa ialah halaman 404. Halaman 404 bermakna halaman yang diakses tidak wujud dan merupakan halaman ralat biasa. Untuk tapak web atau aplikasi, halaman 404 yang cantik boleh meningkatkan pengalaman pengguna dengan ketara. Dalam artikel ini, kami akan memperkenalkan cara menggunakan ThinkPHP6 untuk melaksanakan halaman 404 yang cantik dengan cepat. Cipta laluan Pertama, kita perlu mencipta ralat dalam folder laluan

See all articles