vue-cli3搭建多页面应用

（一） 首先全局安装vue-cli3，已安装忽略

npm install -g @vue/cli

（二）创建vue-cli3 项目 （more_pages是项目名）

vue create more_pages

（三） 创建 vue.config.js 进行项目配置，vue.config.js是vue-cli的入口文件，在vue.config.js里面配置多页面，page入口路径要与项目对应上～ 代码如下这里以newPage、share 两个页面为例

const pages = {
  newPage: {
    // page 的入口
    entry: 'src/project/newPage/main.js',
    // 模板来源
    template: 'public/newPage.html',
    // 在 dist/new.html 的输出
    filename: 'newPage.html'
  },
  share: {
    // page 的入口
    entry: 'src/project/share/main.js',
    // 模板来源
    template: 'public/share.html',
    // 在 dist/new.html 的输出
    filename: 'share.html'
  }
}

module.exports = { pages } 

vue.config.js页面配置完毕～
其中:

1. entry 入口文件是每个多页面都需要填写的，是必须项

2. template 模板来源，如果多个页面 html 文件是一样的，都可以写成 'public/index.html'，

如果多页面有页面html 文件配置不同，可以 在 public 下方建 html 文件，然后映射过去 (非必须项)，本项目为不同，一个 newPage.html、一个为share.html～

3. filename: 是 webpack打包后的文件输出，非必填项 不打包的话～

（四）建立每个页面的文件夹（目录整理）

先在 src 文件夹下建立 project 文件夹 ，名字自己定，project 表示项目文件，然后每个页面一个文件夹，目录截图如下：

两个页面 newPage 和 share 

以建立 newPage 为例～其下方文件目录结构如下：

router : newPage.html 页面的 路由 存放

views: newPage.html 页面的 vue 组件 存放

App.vue: newPage.html 的 入口组件

main.js: newPage.html 的 入口文件

store.js: newPage.html 的 vuex 相关

每个文件代码与初始时创建vue-cli3的代码相同，复制一份即可，然后基于业务逻辑进行改造，但还是写一下吧～代码如下：

1）router 项目文件进行了抽取，其目录结构如下：

newPageRouter.js: 把路由对象单独抽取出来啦～

const Index = () => import(/* webpackChunkName: "Index" */ '@/project/newPage/views/Index.vue')
const About = () => import(/* webpackChunkName: "About" */ '@/project/newPage/views/About.vue')
const newRoutes = [
  {
    path: '/index',
    name: 'index',
    component: Index
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '*',
    redirect: { name: 'index' }
  }
]

export default newRoutes

index.js: 把路由文件引入进去

import Vue from 'vue'
import VueRouter from 'vue-router'
import newRoutes from './conf/newPageRouter'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: `hash`,
  base: `/`,
  routes: newRoutes
})
export default router

2）views 文件夹就是业务组件了，这个按业务要求来，就不说啦，想些啥写啥

3）App.vue: 根据业务来即可～目前这个是初始的～

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<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>

4）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('#app')

5）store.js: 若使用 vuex 则会用到这个

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})

以上就是多页面中一个页面的创建完成啦～其余每个页面的文件目录结构与这个一样就可以～

然后运行项目：

yarn serve

newPage.html 运行如下: 注意地址栏 url ~

以上～all ~

 

标签：newPage,vue,cli3,js,html,import,页面
来源： https://blog.csdn.net/Luckyzhoufangbing/article/details/101052592