1 準備工作
1.1 先查看版本
npm -V
npm@6.9.0 D:\Program Files\nodejs\node_modules\npm
vue -V
vue == 3.11.0
1.2 創(chuàng)建項目
vue create templates
會創(chuàng)建一個名為templates的項目
目錄結(jié)構為：
初始結(jié)構.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目錄下創(chuàng)建一個pages文件夾搔体，
2琉历、在pages文件夾下面創(chuàng)建index文件夾，
修改之后文件夾結(jié)構為：
第一次修改目錄結(jié)構.jpg
3亚兄、把public文件夾下的index.html移到index文件夾低滩，
4、把components文件夾下面的HelloWorld.vue移到index文件夾欺抗，（這里可以不移動售碳，因為這個是默認生成的一個例子，實際開發(fā)中绞呈，創(chuàng)建項目生成的這個頁面我們根本用不到贸人，移動只是為了方便做例子，不另外寫一個index頁面）
5佃声、把src文件夾下的App.vue和main.js都移到index文件夾下面
這時候目錄結(jié)構：
第一次移動文件.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
內(nèi)容如下：
<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的內(nèi)容志鹃。
并且引入了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 target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a target="_blank" rel="noopener">babel</a></li>
<li><a target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a target="_blank" rel="noopener">Core Docs</a></li>
<li><a target="_blank" rel="noopener">Forum</a></li>
<li><a target="_blank" rel="noopener">Community Chat</a></li>
<li><a target="_blank" rel="noopener">Twitter</a></li>
<li><a target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a target="_blank" rel="noopener">vue-router</a></li>
<li><a target="_blank" rel="noopener">vuex</a></li>
<li><a target="_blank" rel="noopener">vue-devtools</a></li>
<li><a target="_blank" rel="noopener">vue-loader</a></li>
<li><a 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)這句話的意思是創(chuàng)建 App element
就是下面這個函數(shù)的意思
render: function (createElement) {
return createElement(App);
}
2.3 修改文件名稱
App.vue改為index.vue;
main.js改為index.js
2.4 修改文件內(nèi)容
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
內(nèi)容如下：
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>標簽的文本內(nèi)容
// 在這個頁面中包含的塊，默認情況下會包含
// 提取出來的通用 chunk 和 vendor chunk弄跌。
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
},
}
具體配置請查看官方文檔
啟動 npm run serve
這時候可以重新打開首頁甲喝。
我們做到這里就完成了首頁頁面配置。
4 新增一個頁面
新增一個頁面铛只，隨便取個名字 baicai
在pages文件夾下新增一個baicai文件夾
在白菜文件夾下新建幾個文件
baicai.html
baicai.vue
baicai.js
新增baicai.jpg
編輯文件內(nèi)容
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>一顆數(shù)據(jù)小白菜</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下創(chuàng)建router文件夾埠胖，在router文件夾下創(chuàng)建router.js
修改內(nèi)容為：
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 重啟服務
打開http://localhost:8080/baicai
baicai.png
7 首頁跳轉(zhuǎn)
修改index文件夾下的 index.vue
<template>
<div id="app">
<img alt="Vue logo" src="../../assets/logo.png">
<div>
<a href="baicai.html">跳轉(zhuǎn)到白菜頁面</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
跳轉(zhuǎn)到白菜頁面.png
點擊跳轉(zhuǎn)到白菜頁面
就會跳轉(zhuǎn)到http://localhost:8080/baicai.html
一顆數(shù)據(jù)小白菜.png
8 總結(jié)
多頁面配置其實就是2個步驟：
1、配置vue.config.js中的pages
2直撤、配置router
demo地址
GitHub
