vue-cli3簡單使用配置

時間 2019-11-10

標籤 vue cli3 cli 簡單使用配置简体版

原文原文鏈接

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

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

等文件下載完畢打開項目，發現項目結構和以前的版本有點不一樣，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文件夾：

裏面每一個文件夾都是一個單獨的頁面，裏面有對應的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

效果圖

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

npm install glob

在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比以前要方便也更容易配置。好了，有錯誤歡迎指出，謝謝！😀😀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。