vue-cli3簡(jiǎn)單使用配置

xavier 發(fā)布于2019-08-23 12:02 / 1824人閱讀

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

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

npm install -g @vue/cli

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

2.創(chuàng)建一個(gè)項(xiàng)目

vue-cli3和之前創(chuàng)建一個(gè)項(xiàng)目的命令不同

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

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

等文件下載完畢打開項(xiàng)目，發(fā)現(xiàn)項(xiàng)目結(jié)構(gòu)和之前的版本有點(diǎn)不同，config和build文件夾不見了，index.html文件也不見了，卻多了pubilc文件夾。打開public發(fā)現(xiàn)index.html文件在這里。

3.配置

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

// vue.config.js
module.exports = {
  //  選項(xiàng)...
}

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

//  vue.config.js
module.exports = {
   baseUrl: "./",  // 配置基本url
}

baseUrl的詳細(xì)解釋可以去官網(wǎng)查看。
vue-cli3還給出了多頁面的配置選項(xiàng)pages，這比之前配置多頁面要方便的多。

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: "src/index/main.js",
      // 模板來源
      template: "public/index.html",
      // 在 dist/index.html 的輸出
      filename: "index.html",
      // 當(dāng)使用 title 選項(xiàng)時(shí)，
      // template 中的 title 標(biāo)簽需要是 <%= htmlWebpackPlugin.options.title %>
      title: "Index Page",
      // 在這個(gè)頁面中包含的塊，默認(rèn)情況下會(huì)包含
      // 提取出來的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },
    // 當(dāng)使用只有入口的字符串格式時(shí)，
    // 模板會(huì)被推導(dǎo)為 `public/subpage.html`
    // 并且如果找不到的話，就回退到 `public/index.html`。
    // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。
    subpage: "src/subpage/main.js"
  }
}

上面是官網(wǎng)給出的代碼，其中除了entry之外都是可選的。
下面開始新建文件，在src文件加下新建pages文件夾：

里面每個(gè)文件夾都是一個(gè)多帶帶的頁面，里面有對(duì)應(yīng)的js、vue、html文件。其實(shí)每一個(gè)文件夾就相當(dāng)于一個(gè)單頁面應(yīng)用，寫法和單頁面相同。如果需要用到路由可以寫在里面，也可以在外邊多帶帶建一個(gè)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

這里注意頁面跳轉(zhuǎn)是用的鏈接，因?yàn)檫@是頁面之間跳轉(zhuǎn)，而不是路由。
接下來需要在vue.config.js里面進(jìn)行多頁面的配置。

//  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",
        },
    }
}

這里我只寫了三個(gè)屬性，然后運(yùn)行項(xiàng)目就好了。

npm run serve

效果圖

之后如果要增加頁面就在vue.config.js文件里面的pages選項(xiàng)里面增加就好了，但是如果一個(gè)一個(gè)的手動(dòng)增加，感覺麻煩，也容易出錯(cuò)，那就再簡(jiǎn)單的配置一下自動(dòng)讀取到pages文件夾里面有哪些頁面。
1.首先安裝glob模塊，接下來會(huì)用到。

npm install glob

在src同級(jí)目錄新建utils文件夾，里面新建utils.js文件。

const glob = require("glob");
const PAGE_PATH = "./src/pages";  // 注意是./ 而不是../ 這可能和commen.js的加載有關(guān)系

module.exports = {
    getPages: () => {
        
        //  首先得到包含pages文件夾里面符合條件的路徑數(shù)組
        let entryHtml = glob.sync(PAGE_PATH + "/*/*.html");

        //  pages就是vue.config.js里面pages選項(xiàng)的值，是一個(gè)對(duì)象
        let pages = {};

        //  遍歷得到的路徑數(shù)組，從字符串中分割出需要的頁面名字
        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()
}

到這里一個(gè)簡(jiǎn)單的多頁面項(xiàng)目就算配置完了，之前也用vue-cli2配置過多頁面應(yīng)用，感覺vue-cli3比之前要方便也更容易配置。好了，有錯(cuò)誤歡迎指出，謝謝！

云服務(wù)器 GPU云服務(wù)器 vue-cli3 簡(jiǎn)單使用 vue-cli 簡(jiǎn)單路由-域名配置

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/97875.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xavier

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

立根鑄魂，麒麟信安攜手歐拉共推操作系統(tǒng)產(chǎn)業(yè)新發(fā)展

閱讀 2069·2021-11-11 16:54
【劍指offer系列刷題】第一篇——尋找單身狗

閱讀 1050·2021-10-12 10:12
《CSS世界》閱讀筆記（一）

閱讀 389·2019-08-30 15:43
css flex 之 flex-grow | flex-direction

閱讀 654·2019-08-29 13:15
深入理解ES6之《Symbol》

閱讀 1083·2019-08-29 13:12
同源策略與跨域

閱讀 1535·2019-08-26 12:09
JavaScript正則表達(dá)式

閱讀 1663·2019-08-26 10:24
Threejs之 .obj 模型投影

閱讀 2267·2019-08-26 10:15

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

vue-cli3簡(jiǎn)單使用配置

index

相關(guān)文章

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

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

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

vue-cli3.x 新特性及踩坑記

**深入認(rèn)識(shí)vue-cli：能做的不僅僅是初始化vue工程**

發(fā)表評(píng)論

0條評(píng)論

xavier

男|高級(jí)講師

TA的文章

立根鑄魂，麒麟信安攜手歐拉共推操作系統(tǒng)產(chǎn)業(yè)新發(fā)展

【劍指offer系列刷題】第一篇——尋找單身狗

《CSS世界》閱讀筆記（一）

css flex 之 flex-grow | flex-direction

深入理解ES6之《Symbol》

同源策略與跨域

JavaScript正則表達(dá)式

Threejs之 .obj 模型投影

最新活動(dòng)