vue多頁面項目搭建(vue-cli 4.0)

1、創建vue項目

cmd命令執行

　　　　

vue create app (app 自定義的項目名)

 

一般都會選擇后者，自己配置一下自己需要的選項（空格為選中）

 

 

 這是我個人需要的一些選項，路由Router、狀態管理Vuex、CSS處理器等（可以根據自己需要進行選擇）

 

 

 這里選擇yes（Y）

 

 

 我這里選用sass

 

 

 打開ESLint和常規的一些

 

 

 靜靜等待安裝完成就可以了！

2、運行項目並配置多頁面

cd app 
yarn serve /npm run serve

　

 

 

 一般生成的都是8080端口的，由於本地已經在跑一個8080端口的服務，所以默認打開了8081端口

        1、在根目錄下創建一個vue.config.js設置入口配置

module.exports = {
  pages: {
    about: {
      entry: 'src/pages/about/main.js',
      template: 'public/about.html',
      filename: 'about.html'
    },
    index: {
      entry: 'src/pages/home/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  }
}

　　2、創建文件和移除原文件

　　移除根目錄下的main.js和App.vue

　　在public下我新建了兩個html（index.html和about.html）

　　在src下新建pages文件夾其下新建了home、about文件夾

　　並且分別在home和about下面新建main.js和App.vue

　　

　　當然也可以把路由放在該目錄下。

 App.vue

<template>
  <div id="home">
    Home
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#home')

3、重啟一下項目

 

 

 

 這樣就完成了多頁面的vue項目搭建！