npm install -g @vue/cli
若是已經安裝以前版本(1.x或2.x)須要先卸載,再安裝新的版本。
安裝完成後能夠經過vue --version
命令查看版本css
vue-cli3和以前建立一個項目的命令不一樣html
vue create project-name // vue-cli3 vue init wepack project-name //vue-cli2
以後就是建立項目時的一些選項,根據須要選擇,須要注意的是若是不是很熟悉,不要開啓語法檢查。而後就等文件下載完畢。vue
等文件下載完畢打開項目,發現項目結構和以前的版本有點不一樣,config和build文件夾不見了,index.html
文件也不見了,卻多了pubilc文件夾。打開public發現index.html文件在這裏。vue-cli
以前的配置文件都不見了,應該怎麼修改配置呢,咱們能夠在項目下和package.json
文件同級目錄下新建vue.config.js
文件,這是一個可選文件,若是存在就會被@vue/cli-service
自動加載。
這個文件格式應該爲:npm
// vue.config.js module.exports = { // 選項... }
導出的對象有多個選項,具體能夠查看官方文檔https://cli.vuejs.org/zh/config/
用過vue-cli2的同窗應該都知道,若是按照默認的配置,文件的路徑是會有問題的,須要手動修改。好比css文件、js文件、還有圖片等靜態資源。
新版本的腳手架修改起來就比較方便了,只須要在vue.config.js
裏面加上一行json
// vue.config.js module.exports = { baseUrl: './', // 配置基本url }
baseUrl
的詳細解釋能夠去官網查看。
vue-cli3還給出了多頁面的配置選項pages
,這比以前配置多頁面要方便的多。數組
module.exports = { pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板來源 template: 'public/index.html', // 在 dist/index.html 的輸出 filename: 'index.html', // 當使用 title 選項時, // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page', // 在這個頁面中包含的塊,默認狀況下會包含 // 提取出來的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 當使用只有入口的字符串格式時, // 模板會被推導爲 `public/subpage.html` // 而且若是找不到的話,就回退到 `public/index.html`。 // 輸出文件名會被推導爲 `subpage.html`。 subpage: 'src/subpage/main.js' } }
上面是官網給出的代碼,其中除了entry
以外都是可選的。
下面開始新建文件,在src文件加下新建pages文件夾:
裏面每一個文件夾都是一個單獨的頁面,裏面有對應的js、vue、html文件。其實每個文件夾就至關於一個單頁面應用,寫法和單頁面相同。若是須要用到路由能夠寫在裏面,也能夠在外邊單獨建一個router的文件夾集中管理。這裏只寫出index的代碼,其餘都是相似的。
index.htmlui
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="index"></div> </body> </html>
index.jsurl
import Vue from 'vue' import App from './index.vue' Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount('#index');
index.vuespa
<template> <div> <h1>index</h1> <a href="view1.html">view1</a> <a href="view2.html">view2</a> </div> </template> <script> export default { name: "index" } </script> <style scoped> </style>
這裏注意頁面跳轉是用的<a>
連接,由於這是頁面之間跳轉,而不是路由。
接下來須要在vue.config.js
裏面進行多頁面的配置。
// vue.config.js const utils = require('./utils/utils'); module.exports = { baseUrl: './', pages: { index: { entry: 'src/pages/index/index.js', template: 'src/pages/index/index.html', filename: 'index.html', }, view1: { entry: 'src/pages/view1/view1.js', template: 'src/pages/view1/view1.html', filename: 'view1.html', }, view2: { entry: 'src/pages/view2/view2.js', template: 'src/pages/view2/view2.html', filename: 'view2.html', }, } }
這裏我只寫了三個屬性,而後運行項目就行了。
npm run serve
效果圖
以後若是要增長頁面就在vue.config.js
文件裏面的pages
選項裏面增長就行了,可是若是一個一個的手動增長,感受麻煩,也容易出錯,那就再簡單的配置一下自動讀取到pages文件夾裏面有哪些頁面。
1.首先安裝glob
模塊,接下來會用到。
npm install glob
utils.js
文件。const glob = require("glob"); const PAGE_PATH = './src/pages'; // 注意是./ 而不是../ 這可能和commen.js的加載有關係 module.exports = { getPages: () => { // 首先獲得包含pages文件夾裏面符合條件的路徑數組 let entryHtml = glob.sync(PAGE_PATH + '/*/*.html'); // pages就是vue.config.js裏面pages選項的值,是一個對象 let pages = {}; // 遍歷獲得的路徑數組,從字符串中分割出須要的頁面名字 entryHtml.forEach((filePath) => { let fileName = filePath.substring(filePath.lastIndexOf('/') + 1, filePath.lastIndexOf('.')); // 組建pages須要的值 pages[fileName] = { entry: `src/pages/${fileName}/${fileName}.js`, template: `src/pages/${fileName}/${fileName}.html`, filename: `${fileName}.html` } }); return pages; } };
而後在vue.config.js
裏面引入
// vue.config.js const utils = require('./utils/utils'); module.exports = { baseUrl: './', pages: utils.getPages() }
到這裏一個簡單的多頁面項目就算配置完了,以前也用vue-cli2配置過多頁面應用,感受vue-cli3比以前要方便也更容易配置。好了,有錯誤歡迎指出,謝謝!😀😀