vue cli3超詳細創建多頁面配置

1.首先按照vue cli3 給的入門文檔下載個vue cli3 如果之前下載了vue cli2的要先卸載之前的

 

2.檢查安裝是否成功

3.ok，現在環境搭建好了，新建項目

 

vue create hello-world

 

你會被提示選取一個preset，選你需要什么模塊呢？

你可以選default（默認）的包含了基本的 Babel + ESLint 設置的 preset，也可以選Manually("手動選擇特性”)來選取需要的特性。

個人推薦選第二個  手動的配置 （空格是選取，a是全選）

選好之后回車進入下一步

 接下來就是你詢問你選擇的模塊的配置內容，像下面的我選了vue的路由 它會提示我是否用歷史模式，看需求吧。小白可以一直回車就好了，最后有幾個需要注意的

上邊這倆意思問你像，babel,postcss,eslint這些配置文件放哪？ 第一個是：放獨立文件放置 第二個是：放package.json里 這里推薦放單獨配置文件，選第一個

然后就靜靜等待下載模板了

 

下載好之后是這樣的，（vue.config.js文件是我加進去的，vue cli3后沒有了，其實這是為后面的多頁面做的准備）

現在可以 cd 到目標文件夾下 執行 npm run serve  就可以跑起來了。

下面是配置多頁面過程

首先把下面的東西從原來的位置放到一個新的文件夾里。（這里最重要的還是main.js）

這樣我就創建了兩個頁面了。（當然了，要把里面文件的引用位置改下）

接下來就是vue cli3官方給出的多頁面配置 ，在vue.config.js里寫上這些。（subpage，chunks選項可以沒有）

chunks如果有最后的參數必須是你頁面的名稱（比如我第一個頁面是定義的是ui，就要寫ui）

module.exports = {
  pages: {
    ui: {
      // page 的入口
      entry: "src/views/index/main.js",
      // 模板來源
      template: "public/index.html",
      // 在 dist/index.html 的輸出
      filename: "index.html",
      // 當使用 title 選項時，
      // template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 在這個頁面中包含的塊，默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "ui"]
    },
    hh: {
      // page 的入口
      entry: "src/views/ui/main.js",
      // 模板來源
      template: "public/ui.html",
      // 在 dist/index.html 的輸出
      filename: "ui.html",
      // 當使用 title 選項時，
      // template 中的 title 標簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "Index Page",
      // 在這個頁面中包含的塊，默認情況下會包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "hh"]
    },
    // 當使用只有入口的字符串格式時，
    // 模板會被推導為 `public/subpage.html`
    // 並且如果找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會被推導為 `subpage.html`。
    subpage: "src/subpage/main.js"
  }
};

還有注意模板來源，網頁必須在對應的位置創建個html文件

 

 接下來就是編寫代碼了

main.js入口文件的寫法如下（render渲染這個模板）

App.vue模板寫法（以下是我改寫的）

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <div>
        <a href="ui.html">跳轉新的頁面</a>
      </div>
      
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(this);
    console.log(this.$router);
  }
};
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

 

可以注意到跳轉新頁面a標簽的href屬性  

 

好了到這里就結束了跳轉頁面自己動手了。

 

最后總結一遍

入口文件就是用來渲染模板跟其他vue之類的操作，掛載到html頁面的（比如路由。狀態管理等）