使用vue2.0怎么實(shí)現(xiàn)多頁面開發(fā)？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比交城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式交城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋交城地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

指令：

vue init webpack test

聲明的文件名為test，下載好后一路enter，之后便生成了一個(gè)vue項(xiàng)目，但是這個(gè)vue項(xiàng)目還沒有一些相關(guān)的依賴，這個(gè)時(shí)候需要進(jìn)入到該文件夾里面，輸入指令：

npm install

如果網(wǎng)速不好，則用cnpm install，效果一樣。略等幾分鐘后整個(gè)依賴便已經(jīng)下完，之后輸入指令：

npm run dev

則會(huì)自動(dòng)打開一個(gè)界面，如果報(bào)錯(cuò)不能打開網(wǎng)頁的話只有一種原因，那就端口占用，這個(gè)時(shí)候需要到/config/index.js目錄下改端口就行。

當(dāng)一個(gè)vue項(xiàng)目完成好所有的配置后，接下來就是我們的重點(diǎn)了，首先我們新新建幾個(gè)html文件，博主我新建了一個(gè)one.html和two.html，及其與之對應(yīng)的vue文件和js文件，文件目錄如下：

弄好之后我們進(jìn)入\build\webpack.base.conf.js目錄下，在module.exports的域里，找到entry，在那里配置添加多個(gè)入口：

entry: {
 app: './src/main.js',
 one: './src/js/one.js',
 two: './src/js/two.js'
},

注意，紫色部分的變量名要起好，因?yàn)楹竺嬉玫?，以防忘記?/p>

接下來就是對開發(fā)環(huán)境run dev里進(jìn)行修改，打開\build\webpack.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()
]

在chunks那里的app指的是webpack.base.conf.js的entry那里與之對應(yīng)的變量名。chunks的作用是每次編譯、運(yùn)行時(shí)每一個(gè)入口都會(huì)對應(yīng)一個(gè)entry，如果沒寫則引入所有頁面的資源。

之后就對run build也就是編譯環(huán)境進(jìn)行配置。首先打開\config\index.js文件，在build里加入這個(gè)：

index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
two: path.resolve(__dirname, '../dist/two.html'),

然后打開/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']
 }),

其中filename引用的是\config\index.js里的build，每個(gè)頁面都要配置一個(gè)chunks，不然會(huì)加載所有頁面的資源。

然后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寫法如下：

two的寫法與之類似，所以不寫下來了，

然后App.vue里通過這樣寫：

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。