vue project to build a multi-page (vue-cli 4.0)

1. Create a project vue

cmd command

　　　　

vue create app (app custom project name)

 

Usually choose the latter, look at their own configuration options for their needs (space is selected)

 

 

 Here are some options for my personal needs, routing Router, state management Vuex, CSS processor, etc. (you can choose according to their needs)

 

 

 Here select yes (Y)

 

 

 I am here to choose sass

 

 

 And some conventional opened ESLint

 

 

 Quietly wait for the installation to complete it!

2, run the project and configure multiple pages

cd app 
yarn serve /npm run serve

　

 

 

 8080 port are generally generated due to the local service has been running a 8080 port, the default port 8081 open

        1, created under a root directory entry configuration settings 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, create a file and remove the original file

　　移除根目录下的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项目搭建！