vue-cli4 創建多頁面項目

本文轉載自查看原文 2020-04-28 21:56 1047 vue

使用vue cli進行開發，所有表現都會通過注入在index.html表現。

如果要實現多個頁面節點，一般通過路由來實現，路由有兩種模式，分別是默認的hash模式，History模式，它們的區別是：

hash模式，產生的目錄結構為：www.doamin.com/#/good

history模式，產生的目錄結構為：www.doamin.com/good/

配置的方法是定義router/router.js文件

const router = new Router({ mode: 'history', routers, });

即使是上面的方法，但對傳統網頁有所愛好者依然會不滿意，比如會網友問：
當前目前如果有多個頁面怎么辦？
比如是否能實現這樣的網頁結構：
www.z01.com/pub/index.html
www.z01.com/pub/listpage.shtml

答案是有的，偉大領袖告訴我們自力更生豐衣足食，讓我們動起手來！

1 准備工作

1.1 先查看版本

npm -V npm@6.12.0 C:\Program Files\nodejs\node_modules\npm vue -V @vue/cli 4.1.2

1.2 創建項目

vue create templates

會創建一個名為templates的項目
目錄結構為：

初始結構.png

npm run serve App running at: - Local: http://localhost:8080/ - Network: http://192.168.43.36:8080/ Note that the development build is not optimized. To create a production build, run npm run build.

運行npm run serve，可以在

http://localhost:8080/ http://192.168.43.36:8080/

看到這個頁面：

初始index.png

2 多頁面配置

2.1 修改目錄

1、在src目錄下創建一個pages文件夾，
2、在pages文件夾下面創建index文件夾，
修改之后文件夾結構為：

第一次修改目錄結構.jpg

3、把public文件夾下的index.html移到index文件夾，
4、把components文件夾下面的HelloWorld.vue移到index文件夾，（這里可以不移動，因為這個是默認生成的一個例子，實際開發中，創建項目生成的這個頁面我們根本用不到，移動只是為了方便做例子，不另外寫一個index頁面）
5、把src文件夾下的App.vue和main.js都移到index文件夾下面

這時候目錄結構：

第一次移動文件.png

2.2 理一下邏輯

index.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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>templates</title> </head> <body> <noscript> <strong>We're sorry but templates doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- 記住這里！！！！--> <!-- built files will be auto injected --> </body> </html>

記住 id="app"這行

App.vue

內容如下：

<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

這里就是寫index.html中id="app"這個div的內容。
並且引入了HelloWorld.vue
在

components: { HelloWorld }

包含了這個組件
在

<HelloWorld msg="Welcome to Your Vue.js App"/>

給HelloWorld.vue傳入了一個msg變量

HelloWorld.vue

<template> <div class="hello"> <h1>{{ msg }}</h1> <!--傳入的msg變量在這里 --> <p> For a guide and recipes on how to configure / customize this project,<br> check out the <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. </p> <h3>Installed CLI Plugins</h3> <ul> <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> </ul> <h3>Essential Links</h3> <ul> <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> </ul> <h3>Ecosystem</h3> <ul> <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> </ul> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: String } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

main.js

import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')

render: h => h(App)這句話的意思是創建 App element
就是下面這個函數的意思

render: function (createElement) { return createElement(App); }

2.3 修改文件名稱

App.vue改為index.vue;
main.js改為index.js

2.4 修改文件內容

index.vue

<template> <div id="app"> <img alt="Vue logo" src="../../assets/logo.png"> 修改這里 <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './HelloWorld.vue' 修改這里 export default { name: 'app', components: { HelloWorld } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

index.js

import Vue from 'vue' import App from './index.vue' 修改這里 Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')

3 配置vue.config.js

在src文件夾同一級目錄添加一個名為vue.config.js的js文件。

添加vue.config.js.png

內容如下：

module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: 'assets', indexPath: 'index.html', filenameHashing:true, pages: { index: { entry: "./src/pages/index/index.js", // 配置入口js文件 template: "./src/pages/index/index.html", // 主頁面 filename: "index.html", // 打包后的html文件名稱 title: "首頁", // 打包后的.html中<title>標簽的文本內容 // 在這個頁面中包含的塊，默認情況下會包含 // 提取出來的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] } }, }

具體配置請查看官方文檔

啟動 npm run serve
這時候可以重新打開首頁。
我們做到這里就完成了首頁頁面配置。

4 新增一個頁面

新增一個頁面，隨便取個名字 baicai
在pages文件夾下新增一個baicai文件夾
在白菜文件夾下新建幾個文件

baicai.html
baicai.vue
baicai.js

新增baicai.jpg

編輯文件內容

baicai.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"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>baicai</title> </head> <body> <noscript> <strong>We're sorry but templates doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>

baicai.vue

<template> <div id="app"> <img alt="Vue logo" src="../../assets/logo.png"> <h1>一顆數據小白菜</h1> </div> </template> <script> export default { name: 'app', } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

baicai.js

import Vue from 'vue' import App from './baicai.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')

5 配置router

在src下創建router文件夾，在router文件夾下創建router.js
修改內容為：

import Vue from 'vue' import Router from 'vue-router' import index from '../pages/index/index.vue'; import baicai from '../pages/baicai/baicai.vue'; Vue.use(Router); const routers = [ { path: '/', redirect: '/index', component: index, meta: {requiresAuth: false} }, { path: '/index', name: 'index', component: index, meta: { requiresAuth: false }, }, { path: '/baicai', name: 'baicai', component: baicai, meta: { requiresAuth: false }, }, ]; const router = new Router({ mode: 'history', routers, }); export default router;

6 定義vue.config.js

如果只增加了前面幾步，訪問是可以，但頁面不會生效，還需要定義全局使該頁生效。
回到項目的根目錄，打開vue.config.js，增加baicai一段資源引用，完整代碼如下：

module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: 'assets', indexPath: 'index.html', filenameHashing:true, pages: { index: { entry: "./src/pages/index/index.js", // 配置入口js文件 template: "./src/pages/index/index.html", // 主頁面 filename: "index.html", // 打包后的html文件名稱 title: "首頁", // 打包后的.html中<title>標簽的文本內容 // 在這個頁面中包含的塊，默認情況下會包含 // 提取出來的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, baicai: {//新增的部份 entry: "./src/pages/baicai/baicai.js", // 配置入口js文件 template: "./src/pages/baicai/baicai.html", // 主頁面 filename: "baicai.html", // 打包后的html文件名稱 title: "首頁", // 打包后的.html中<title>標簽的文本內容 // 在這個頁面中包含的塊，默認情況下會包含 // 提取出來的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'baicai'] }, }, }

7 重啟服務

打開http://localhost:8080/baicai

baicai.png

8 首頁跳轉

修改index文件夾下的 index.vue

<template> <div id="app"> <img alt="Vue logo" src="../../assets/logo.png"> <div> <a href="baicai.html">跳轉到白菜頁面</a> 修改這里 </div> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> import HelloWorld from './HelloWorld.vue' export default { name: 'app', components: { HelloWorld } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

重啟服務，打開http://localhost:8080

跳轉到白菜頁面.png

點擊跳轉到白菜頁面
就會跳轉到http://localhost:8080/baicai.html

一顆數據小白菜.png

最后你可以運行npm run bulid編譯，最后結構如下所示：

最后發布出來的格式

9 總結

手工多頁面配置其實就是2個步驟：
1、配置vue.config.js中的pages
2、配置router

項目最后實例可參見github:
https://github.com/zoomla/vue-cli4-multipage

注：此文有參照引用https://www.jianshu.com/p/3a27c5c4da18

作者：zoomlaCMS
鏈接：https://www.jianshu.com/p/5361fb716df2
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 安裝vue-cli4 使用vue-cli4快速搭建vue項目demo vue-cli4創建項目導入elementUI，瀏覽器報錯Uncaught TypeError: Cannot read property ‘prototype‘ of undefined Vue-cli創建項目從單頁面到多頁面2-history模式 vue-cli4兼容ie vue-cli3.0創建項目之完成登錄頁面 vue-cli4 vue.config.js vue項目vue-cli4展示本地markdown語法_md文件，圖文詳細講解 vue-cli創建項目 vue cli 4 +創建項目步驟