vue.js之使用Vue CLI3开发多页面应用

一、安装Vue CLI

安装Vue CLI命令为npm install -g @vue/cli,若已安装旧版vue-cli则需要先卸载vue-cli，卸载命令为npm uninstall vue-cli -g 。

二、创建vue工程

我使用的是webstorm，直接新建即可，如下图

 

 

 

或者使用dos命令

cmd命令vue create project-name创建vue工程
 注意：新建的时候，需要等待2分钟左右

1.新建 vue.console.js，在package.json同级目录，代码如下
module.exports = {
    pages: {
        // console: {
        //     // 应用入口配置，相当于单页面应用的main.js，必需项
        //     entry: 'src/modules/console/console.js',
        //
        //     // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致
        //     template: 'public/console.html',
        //
        //     // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
        //     filename: 'console.html',
        //
        //     // 标题，可选项，一般情况不使用，通常是在路由切换时设置title
        //     // 需要注意的是使用title属性template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
        //     // title: 'console page',
        //
        //     // 包含的模块，可选项
        //     chunks: ['console']
        // },
        // 只有entry属性时，直接用字符串表示模块入口
        console: 'src/modules/console/console.js',
        client: 'src/modules/client/client.js'
        ,index:"src/main.js"
    }
}

 在public文件夹下新建 client.html，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="client"></div>
</body>
</html>

 

 

 

 console.html如此

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <div id="console"></div>
</body>
</html>

 新建文件夹 modules，如下图

 

 

client相关代码

// Login.vue
<template>
<div>this is client login</div>
</template>

<script>
    export default {
        name: "login"
        }
</script>

<style scoped>

</style>

//client.js
import Vue from 'vue'
import Console from './Client.vue'
import router from './router'

Vue.use(require('vue-wechat-title'))

new Vue({
router,
render: h => h(Console)
}).$mount('#client')
//Client.vue
<template>
<div id="client" v-wechat-title="$route.meta.title">
<router-view></router-view>
</div>
</template>

<script>
    export default {
        name: "client"
        }
</script>

<style scoped>

</style>
//router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
{
path: '/', name: 'login', component: r => {
require(['./login/Login'], r)
}, meta: {title: 'client 登录'}
}
]

export default new VueRouter({
routes: routes
})

　console同上

 此时运行起来 

 

 

 

 

 

 结束

过程中需要路由和vue-wechat-title ，安装一下就行

资源来源于：https://www.jianshu.com/p/05c1bc5074a9




posted @ 2020-01-10 15:41  天妖姥爷  阅读(6616)  评论(0)    收藏  举报