vue-cli建立的專案，配置多頁面的方法

阿新 • • 發佈：2019-01-16

vue官方提供的命令列工具vue-cli，能夠快速搭建單頁應用。預設一個頁面入口index.html，那麼，如果我們需要多頁面該如何配置，實際上也不復雜

假設要新建的頁面是rule，以下以rule為例

建立新的html頁面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title></title>
	</head>

	<body>
		<div id="rule"></div> 

		<!-- built files will be auto injected -->
	</body>

</html>

建立入口檔案Rule.vue和rule.js，仿照App.vue和main.js

<template>
	<div id="rule">
		<router-view></router-view>
	</div>
</template>
<script>
	export default {
		name: 'lottery',
		data() {
			return {
			}
		},
		mounted: function() {
			
			this.$router.replace({
					path:'/rule'
			});
		},
	}
</script>
<style lang="less">
	body{
		margin:0;
		padding:0;
	}
</style>

rule.js

import Vue from 'vue'
import Rule from './Rule.vue'
import router from './router'
import $ from 'jquery'
//import vConsole from 'vconsole'
import fastclick from 'fastclick'
Vue.config.productionTip = false

fastclick.attach(document.body)

Vue.config.productionTip = false;
 

/* eslint-disable no-new */
new Vue({
  el: '#rule',
  router,
  template: '<Rule/>',
  components: { Rule },
})

修改config/index.js

build新增rule地址，即編譯後生成的rule.html的地址和名字

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.php'),
    rule: path.resolve(__dirname, '../dist/rule.php'),
    ……
  }

rule: path.resolve(__dirname, '../dist/rule.php')表示編譯後再dist檔案下，rule.html編譯後文件名為rule.php

修改build/webpack.base.conf.js

配置entry

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

修改build/webpack.dev.conf.js

在plugins增加

new HtmlWebpackPlugin({
      filename: 'rule.html',
      template: 'rule.html',
      inject: true,
      chunks:['rule']
    }),

修改build/webpack.prod.conf.js

在plugins增加

new HtmlWebpackPlugin({
      filename: config.build.rule,
      template: 'rule.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','rule']
    }),

以上全部當後臺地址跳轉到你的新建的頁面後，由於現在配置的預設路由是公用的，可自己配置多個路由檔案，分別引用。可在Rule.vue中路由跳轉到指定路由，以實現頁面控制

mounted: function() {
			
	this.$router.replace({
		path:'/rule'
	});
},

vue-cli建立的專案，配置多頁面的方法

vue官方提供的命令列工具vue-cli，能夠快速搭建單頁應用。預設一個頁面入口index.html，那麼，如果我們需要多頁面該如何配置，實際上也不復雜假設要新建的頁面是rule，以下以rule為例建立

使用vscode開發vue cli 3專案，配置eslint以及prettier

初始化專案時選擇eslint-config-standard作為程式碼檢測規範，vscode安裝ESLint和Prettier - Code formatter兩個外掛，並進行如下配置 { "editor.formatOnPaste": true, "editor.formatOnSave"

新手入門vue-cli建立專案

建立專案之前的準備環境 1、安裝node.js環境及npm或者yarn包管理工具 **2、安裝webpack-cli 命令：npm install webpack-cli -g ；檢視是否安裝成功webpack-cli -v ** 3、安裝vue-cli腳手架命令：npm in

Vue-cli 建立專案關於資源路徑問題

關於在vue專案中資源路徑問題在寫vue專案時往往面臨這些問題 1. 圖片引入使用絕對路徑，不會經過編譯，小圖片不會編譯成base64形式 2. 打包之後的檔案，全部使用絕對路

vue-cli 建立專案失敗解決方案

作業系統是linux，新裝的系統，所以要配置環境，安裝nodejs npm都木有任何毛病，然後就安裝vue-cli。一切ok。到了關鍵時刻 vue init webpack my-project 熟悉的朋友都知道，這是用官方的webpack模板建立自

使用vue-cli建立專案模板

開啟終端（我用的是git bash,windows下） cd ~/Desktop npm install -g vue-cli

webpack+vue-cli建立專案遇見的跨域問題

本文章完全由自己原創，且內容是網上搜索加上自己理解所釋出的內容，裡面有不對的地方歡迎大家批評指正，謝謝。目的主要還是希望幫助那些和我一樣經常遇見跨域請求抓狂的同行們。今天在使用webpack+vue+elementUI做後臺管理系統時用谷歌瀏覽器訪問時遇見了跨域問題，之前的專

使用vue-cli建立專案

用windows壽命真是要縮短了事先先安裝cnpm吧 npm install -g cnpm --registry=http://registry.npm.taobao.org 成功的栗子記錄下： cd d:\web vue init webpack vue-proj

vue-cli建立專案

1.先安裝node，檢查node版本，node -v,安裝vue-cli腳手架，node的版本必須在v4.0以上。如果你安裝的是舊版本的 npm，可以很容易得通過 npm 命令來升級，命令如下：npm install npm-g 2.全域性安裝vue-cli,npm install -g vue-cli

vue移動端專案，螢幕適配方法，rem

親測有效，大家可以試試。使用的是vue-cli搭建的webpack專案，然後按步驟一步一步走下去就成功了 1.終端中輸入 npm i lib-flexible --save 2.終端中輸入 npm i px2rem-loader --save-dev 3.在專案

vue-cli配置多頁面專案

背景：vue-cli版本3.0 省略初始化專案；預設的App.vue和index.html檔案可以刪掉頁面結構如上圖，新加的home可以不要，注意下面的檔案路徑就行接下來修改配置檔案： 1、修改build/utils.js /* 這裡是新

vue-cli搭建專案模擬後臺介面資料，webpack-dev-conf.js檔案配置

注：本篇寫於2018-12，基於vue2.xxx （一）路徑：bulid / webpack.dev.conf.js 1、在webpack.dev.conf.js 裡面找到 const portfinder = require(‘portfinder’),然後在下面寫上以下程式

Vue學習之旅----vue-cli及建立專案，初步執行

npm i vue-cli -g vue init webpack vue01 cd vue01 npm install npm run dev vue基礎 <li v-for="(index,item) in list " :key=index>{{item

vue-cli腳手架專案的建立，以及常用ui元件的引用

本篇主要是利用vue-cli來搭建vue專案，其中前提是node和npm已經安裝好，文章結尾將會簡單提到一個簡單的例子。使用vue-cli搭建專案最開始我也是看網上的教程一步步搭下來，所以其中的一些步驟說法為了表達正確會進行一定參考。 1.node.js的安裝：https://nodej

利用vue-cli建立新的專案的時候，遇到了'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式或批處理檔案的報錯

今天在做練習專案的時候，在新建專案的時候遇到了這個'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式或批處理檔案的報錯。後來發現問題可能是出在了node_modules這個

vue 配置多頁面應用

imp 執行 util utf dsp for tip sset function 前言: 本文基於vue 2.5.2, webpack 3.6.0（配置多頁面原理類似，實現方法各有千秋，可根據需要進行定制化） vue 是單頁面應用。但是在做大型項目時，單頁面往往無法滿足我

利用vue-cli建立新專案

1、安裝vue-cli npm i vue-cli --gd 2、初始化一個專案 vue init webpack test //test 是個專案名稱並且配置相應的配置，（測試部份的可以選擇no） 3、執行初始化的專案，如果可以執行，那麼說明安裝成功 c

vue-cli建立vue專案

1，配置淘寶映象（可選）為什麼說可選，npm的install都是走的下載，有時候下載速度太慢的話，通過配置淘寶映象可以提速 npm install -g cnpm --registry=https://registry.npm.taobao.org 2,安裝npm c

在 vue cli3 的專案中配置雙服務，模擬 ajax 分頁請求

最近安裝了下vue cli3版本，與 cli 2 相比，檔案少了，以前配置方法也不管用了。demo 中的大量的資料，需要做成 ajax 請求的方式來展示資料，因此，需要啟動兩個服務，一個用作前端請求，一個用作後端傳送。雙服務的配置方法在 build / webpack.dev.conf.js 中寫入。

vue-cli的專案中關於axios的全域性配置

1. 使用easy-mock.com來模擬資料介面 2. npm install axios 安裝 3.新建目錄其中的http.js 裡面是對axios請求介面的前期引數配置與後期資料的處理，直接上程式碼 import axios from 'axios' const instance

vue-cli建立的專案，配置多頁面的方法

相關推薦