vue-cli3簡單使用配置

xavier 發布于2019-08-23 12:02 / 1815人閱讀

摘要：下載安裝，這里我使用安裝如果已經安裝之前版本或需要先卸載，再安裝新的版本。還給出了多頁面的配置選項，這比之前配置多頁面要方便的多。接下來需要在里面進行多頁面的配置。

1.下載安裝vue-cli3，這里我使用npm安裝

npm install -g @vue/cli

如果已經安裝之前版本（1.x或2.x）需要先卸載，再安裝新的版本。
安裝完成后可以通過vue --version命令查看版本

2.創建一個項目

vue-cli3和之前創建一個項目的命令不同

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

之后就是創建項目時的一些選項，根據需要選擇，需要注意的是如果不是很熟悉，不要開啟語法檢查。然后就等文件下載完畢。

等文件下載完畢打開項目，發現項目結構和之前的版本有點不同，config和build文件夾不見了，index.html文件也不見了，卻多了pubilc文件夾。打開public發現index.html文件在這里。

3.配置

之前的配置文件都不見了，應該怎么修改配置呢，我們可以在項目下和package.json文件同級目錄下新建vue.config.js文件，這是一個可選文件，如果存在就會被@vue/cli-service自動加載。
這個文件格式應該為：

// vue.config.js
module.exports = {
  //  選項...
}

導出的對象有多個選項，具體可以查看官方文檔https://cli.vuejs.org/zh/config/
用過vue-cli2的同學應該都知道，如果按照默認的配置，文件的路徑是會有問題的，需要手動修改。比如css文件、js文件、還有圖片等靜態資源。
新版本的腳手架修改起來就比較方便了，只需要在vue.config.js里面加上一行

//  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 標簽需要是 <%= htmlWebpackPlugin.options.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.html




    
    Title

index.js

import Vue from "vue"
import App from "./index.vue"

Vue.config.productionTip = false;

new Vue({
    render: h => h(App)
}).$mount("#index");

index.vue

這里注意頁面跳轉是用的鏈接，因為這是頁面之間跳轉，而不是路由。
接下來需要在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比之前要方便也更容易配置。好了，有錯誤歡迎指出，謝謝！

云服務器 GPU云服務器 vue-cli3 簡單使用 vue-cli 簡單路由-域名配置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97875.html

如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我們該如何去配置自己的項目了其實這一切都是因為的項目初始化，幫開發者已經解決了，甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區別 vue-cli 3 的 github 倉庫由原有獨立的 github 倉庫遷移到了 vue 項目下 ...

xuweijian 2019-08-29 16:28 評論0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我們該如何去配置自己的項目了其實這一切都是因為的項目初始化，幫開發者已經解決了，甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區別 vue-cli 3 的 github 倉庫由原有獨立的 github 倉庫遷移到了 vue 項目下 ...

UsherChen 2019-08-26 12:18 評論0 收藏0
如何配置 vue-cli 3.0 的 vue.config.js

摘要：那么，我們該如何去配置自己的項目了其實這一切都是因為的項目初始化，幫開發者已經解決了，甚至絕大部分情形下的配置。 vue-cli 3 英文文檔vue-cli 3 中文文檔webpack 4 pluginswebpack-chain TLDR vue-cli 3 與 2 版本有很大區別 vue-cli 3 的 github 倉庫由原有獨立的 github 倉庫遷移到了 vue 項目下 ...

ZoomQuiet 2019-08-02 11:20 評論0 收藏0
vue-cli3.x 新特性及踩坑記

摘要：前言都到了，所以是時候玩轉一下的新特性了。安裝的包名稱由改成了。方法一原因的配置改變了，導致正確的不能用。打開終端，切換到根路徑文件里面修改為方法二是默認路徑修改了路徑會出現錯誤。按上面的方法修改完，再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....

xiaoqibTn 2019-08-23 12:01 評論0 收藏0
深入認識vue-cli：能做的不僅僅是初始化vue工程

摘要：借助，我們通過非常簡單的問答形式，方便地初始化一個工程，完全不需要擔心繁復的配置等等。簡單來說，就是不僅僅能初始化工程，理論上能夠初始化一切工程，包括，等等等等，只要你有一份能夠運行的模板，就能夠通過進行工程的初始化。相信對于大部分使用過VueJS的同學來說，vue-cli是他們非常熟悉的一個工具。借助vue-cli，我們通過非常簡單的問答形式，方便地初始化一個vue工程，完全不需要...

AlienZHOU 2019-08-21 17:09 評論0 收藏0