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~

vue-cli3搭建多页面应用

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

(四)建立每个页面的文件夹(目录整理)

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

两个页面 newPage 和 share 

vue-cli3搭建多页面应用

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

vue-cli3搭建多页面应用

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

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

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

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

store.js: newPage.html 的 vuex 相关

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

1)router 项目文件进行了抽取,其目录结构如下:

vue-cli3搭建多页面应用

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 文件夹就是业务组件了,这个按业务要求来,就不说啦,想些啥写啥

vue-cli3搭建多页面应用

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 ~

vue-cli3搭建多页面应用

以上~all ~

 

上一篇:小程序制作笔记


下一篇:antd pro2.0 使用记录六:与服务端交互(使用原有mock)