vue-cli3簡單使用配置

1.下載安裝vue-cli3,這裏我使用npm安裝

npm install -g @vue/cli

若是已經安裝以前版本(1.x或2.x)須要先卸載,再安裝新的版本。
安裝完成後能夠經過vue --version命令查看版本css

2.建立一個項目

vue-cli3和以前建立一個項目的命令不一樣html

vue create project-name    // vue-cli3
vue init wepack project-name    //vue-cli2

以後就是建立項目時的一些選項,根據須要選擇,須要注意的是若是不是很熟悉,不要開啓語法檢查。而後就等文件下載完畢。
image.pngvue

等文件下載完畢打開項目,發現項目結構和以前的版本有點不一樣,config和build文件夾不見了,index.html文件也不見了,卻多了pubilc文件夾。打開public發現index.html文件在這裏。vue-cli

3.配置

以前的配置文件都不見了,應該怎麼修改配置呢,咱們能夠在項目下和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文件夾:
image.png
裏面每一個文件夾都是一個單獨的頁面,裏面有對應的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>
        &nbsp;
        &nbsp;
        &nbsp;
        &nbsp;
        <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

效果圖
image.png

以後若是要增長頁面就在vue.config.js文件裏面的pages選項裏面增長就行了,可是若是一個一個的手動增長,感受麻煩,也容易出錯,那就再簡單的配置一下自動讀取到pages文件夾裏面有哪些頁面。
1.首先安裝glob模塊,接下來會用到。

npm install glob
  1. 在src同級目錄新建utils文件夾,裏面新建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比以前要方便也更容易配置。好了,有錯誤歡迎指出,謝謝!😀😀

相關文章
相關標籤/搜索