一、安裝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