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

資訊專欄INFORMATION COLUMN

一張圖教你快速玩轉(zhuǎn)vue-cli3

chaosx110 / 2817人閱讀

摘要：前言本文系統(tǒng)的梳理了搭建項目的常見用法，目的在于讓你快速掌握獨立搭建項目的能力。思維導(dǎo)圖接下來，我們根據(jù)思維導(dǎo)圖，一步步來解釋和實現(xiàn)我們的目標(biāo)。這確保了最終包里數(shù)量的最小化。但是如果其中一個依賴需要特殊的，默認(rèn)情況下無法將其檢測出來。

前言

本文系統(tǒng)的梳理了vue-cli3搭建項目的常見用法，目的在于讓你快速掌握獨立搭建vue項目的能力。你將會了解如下知識點：

如何安裝項目插件

添加瀏覽器支持

如何配置scss/stylus共享全局變量

如何整合elementUI等第三方框架并實現(xiàn)按需引入

配置單/多頁面

如何配置自定義環(huán)境變量

如何在vue.config.js定制自己的webpack

vue項目部署

說明

本文末尾會給出一個以上提到的所有功能的一個配置文件，可供大家學(xué)習(xí)參考。

思維導(dǎo)圖


接下來，我們根據(jù)思維導(dǎo)圖，一步步來解釋和實現(xiàn)我們的目標(biāo)。

1.安裝項目插件 
vue add @vue/cli-plugin-eslint
# 或
vue add xjFile
vue add 的設(shè)計意圖是為了安裝和調(diào)用 Vue CLI 插件。對于普通的 npm 包而言，我們?nèi)匀豢梢裕ǜ鶕?jù)所選的 npm 包）使用包管理器。最后可以在vue.config.js做webpack自定義配置
2.添加瀏覽器支持

browserslist

我們可以通過package.json 文件里的 browserslist字段或一個多帶帶的 .browserslistrc 文件來指定項目的目標(biāo)瀏覽器的范圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉(zhuǎn)譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴

例如：

// .browserslistrc
> 1%
last 2 versions

想要獲取更多browserslist，可移步browserslist

Polyfill

默認(rèn)情況下，cli會把 useBuiltIns: "usage" 傳遞給 @babel/preset-env，這樣它會根據(jù)源代碼中出現(xiàn)的語言特性自動檢測需要的 polyfill。這確保了最終包里 polyfill 數(shù)量的最小化。但是如果其中一個依賴需要特殊的 polyfill，默認(rèn)情況下 Babel 無法將其檢測出來。我們可以通過如下三種方式解決此類問題：

將依賴添加到 vue.config.js 中的 transpileDependencies 選項

// vue.config.js
module.exports = {
    // 默認(rèn)情況下 babel-loader 會忽略所有 node_modules 中的文件。如果你想要通過 Babel 顯式轉(zhuǎn)譯一個依賴，可以在這個選項中列出來
    transpileDependencies: ["glob"]
}

可以使用 @vue/babel-preset-app 的 polyfills 選項預(yù)包含所需要的 polyfill

// babel.config.js
module.exports = {
  presets: [
    ["@vue/app", {
      polyfills: [
        "es6.promise",
        "es6.symbol"
      ]
    }]
  ]
}

使用 useBuiltIns: "entry" 然后在入口文件添加 import "@babel/polyfill",這種方式的問題就是會增加包的大小

3.配置scss/stylus共享全局變量

對與scss，可以使用如下方式開啟：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 這里假設(shè)你有 `src/variables.scss` 文件
        data: `@import "~@/variables.scss";`
      }
    }
  }
}

對于stylus，本人親測使用如上方式無效，可以通過如下方式實現(xiàn)：

vue add style-resources-loader

// vue.config.js
const path = require("path")
module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      "patterns": [
        path.resolve(__dirname, "src/styles/abstracts/*.styl"),
      ]
    }
  }
}
4.整合eleemntUI等第三方框架并實現(xiàn)按需引入

安裝babel-plugin-component

npm install babel-plugin-component -D

配置babel.config.js

module.exports = {
  presets: [
    "@vue/app",
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

此時即可按需引入element組件，優(yōu)化項目體積了。

5.配置單/多頁面

vue-cli默認(rèn)單頁面結(jié)構(gòu)，我們可以通過配置文件來將項目配置成多頁面：

// vue.config.js
const path = require("path")
module.exports = {
  // 單/多頁面
    pages: {
        index: {
          // page 的入口
          entry: "src/home/main.js",
          // 模板來源
          template: "public/index.html",
          // 在 dist/index.html 的輸出
          filename: "index.html",
          // 當(dāng)使用 title 選項時，
          // template 中的 title 標(biāo)簽需要是 <%= htmlWebpackPlugin.options.title %>
          title: "Your Web For PC",
          // 在這個頁面中包含的塊，默認(rèn)情況下會包含
          // 提取出來的通用 chunk 和 vendor chunk。
        //   chunks: ["chunk-vendors", "chunk-common", "index"]
        },
        // 當(dāng)使用只有入口的字符串格式時，
        // 模板會被推導(dǎo)為 `public/subpage.html`
        // 并且如果找不到的話，就回退到 `public/index.html`。
        // 輸出文件名會被推導(dǎo)為 `subpage.html`。
        // subpage: "src/subpage/main.js"
    },
}
6.如何配置自定義環(huán)境變量

你可以替換你的項目根目錄中的下列文件來指定環(huán)境變量：

.env                # 在所有的環(huán)境中被載入
.env.local          # 在所有的環(huán)境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

如下：

// .env.local
APPID=123
VUE_APP_SECRET=secret

如果你想在客戶端側(cè)代碼中使用環(huán)境變量，變量名因以 VUE_APP_開頭，如下可獲取定義的環(huán)境變量：

console.log(process.env.VUE_APP_SECRET)
7.如何在vue.config.js定制自己的webpack

我們可以使用cli支持的鏈?zhǔn)秸{(diào)用，或者自定義調(diào)用：

// vue-cli內(nèi)部webpack配置
    chainWebpack: config => {
        // 設(shè)置快捷目錄別名
        config.resolve.alias.set("utils",resolve("../utils"))

        // 修改靜態(tài)資源打包方式，下例為超過10k才用文件導(dǎo)入的方式，否則為base64.默認(rèn)為4k
        // config.module
        // .rule("images")
        //     .use("url-loader")
        //     .loader("url-loader")
        //     .tap(options => Object.assign(options, { limit: 10240 }))
    },
    // webpack自定義配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
          // 為生產(chǎn)環(huán)境修改配置...
        } else {
          // 為開發(fā)環(huán)境修改配置...
        }
    }
7.vue項目部署

這里我們使用shell腳本部署，當(dāng)然大家也可以使用自己熟悉的方式部署：

#!/usr/bin/env sh

# 當(dāng)發(fā)生錯誤時中止腳本
set -e

# 構(gòu)建
npm run build

# cd 到構(gòu)建輸出的目錄
cd dist

git init
git add -A
git commit -m "deploy"

git push -f git@bitbucket.org:/.bitbucket.io.git master

cd -
最后，上一張相對完整的配置清單： 
// vue.config.js
// 自定義vue配置
const path = require("path");
const resolve = dir => path.join(__dirname, dir);
// mock數(shù)據(jù)
const mockData = require("./mock/test.json");

module.exports = {
    // 基本路徑
    publicPath: "./",

    // 輸出文件目錄
    // outputDir: "dist",

    // eslint-loader 是否在保存的時候檢查
    // lintOnSave: true,

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

    // css相關(guān)配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: true,
        // 開啟 CSS source maps?
        sourceMap: false,
        // css預(yù)設(shè)器配置項
        loaderOptions: {
            // stylus: {
            //     // @/ 是 src/ 的別名
            //     // 所以這里假設(shè)你有 `src/variables.stylus` 這個文件, 不過目前測試無效
            //     data: `@import "~@/style/variables.styl";`
            //   }
        },
        // 啟用 CSS modules for all css / pre-processor files.
        modules: false
   },


    pluginOptions: {
        // 共享變量
        "style-resources-loader": {
            preProcessor: "stylus",
            patterns: [
                //這個是加上自己的路徑，
                //注意：試過不能使用別名路徑
                resolve("src/style/variables.styl"),
            ]
        }
    },

    devServer: {
        // 端口
        port: 3000,

        // 配置代理
        proxy: {
            "^/api": {
              target: "http://localhost:8081",
              ws: true,
              changeOrigin: true
            },
            "^/data": {
              target: "http://localhost:3000"
            }
        },

        // mock
        before(app){
            app.get("/api/getUser",(req,res,next)=>{
                res.json(mockData);
            })
        }
    },
    // vue-cli內(nèi)部webpack配置
    chainWebpack: config => {
        // 設(shè)置快捷目錄別名
        config.resolve.alias.set("utils",resolve("../utils"))

        // 修改靜態(tài)資源打包方式，下例為超過10k才用文件導(dǎo)入的方式，否則為base64.默認(rèn)為4k
        // config.module
        // .rule("images")
        //     .use("url-loader")
        //     .loader("url-loader")
        //     .tap(options => Object.assign(options, { limit: 10240 }))
    },
    // webpack配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
          // 為生產(chǎn)環(huán)境修改配置...
        } else {
          // 為開發(fā)環(huán)境修改配置...
        }
    }
}

// babel.config.js
module.exports = {
  presets: [
    "@vue/app",
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

// .browserslistrc
> 1%
last 2 versions

// package.json
{
  "name": "pc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:serve": "serve -s dist",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "clipboard": "^2.0.4",
    "core-js": "^2.6.5",
    "element-ui": "^2.9.1",
    "register-service-worker": "^1.6.2",
    "serve": "^11.0.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-pwa": "^3.8.0",
    "@vue/cli-plugin-unit-mocha": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "chai": "^4.1.2",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "style-resources-loader": "^1.2.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-style-resources-loader": "^0.1.3",
    "vue-template-compiler": "^2.6.10"
  }
}

本文梳理了一個最基本的cli3項目配置流程，我們可以根據(jù)這個思維導(dǎo)圖，去搭建自己的項目。

本文參考vue-cli官網(wǎng)

如想獲取思維導(dǎo)圖高清源文件，請掃描下方公眾號：

在公眾號點擊進群，可以加入vue學(xué)習(xí)小組，一起學(xué)習(xí)前端技術(shù)

更多推薦

歡迎關(guān)注后續(xù)推文

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

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

相關(guān)文章

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • 2017文章總結(jié)

    摘要：歡迎來我的個人站點性能優(yōu)化其他優(yōu)化瀏覽器關(guān)鍵渲染路徑開啟性能優(yōu)化之旅高性能滾動及頁面渲染優(yōu)化理論寫法對壓縮率的影響唯快不破應(yīng)用的個優(yōu)化步驟進階鵝廠大神用直出實現(xiàn)網(wǎng)頁瞬開緩存網(wǎng)頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優(yōu)化動 歡迎來我的個人站點 性能優(yōu)化 其他 優(yōu)化瀏覽器關(guān)鍵渲染路徑 - 開啟性能優(yōu)化之旅 高性能滾動 scroll 及頁面渲染優(yōu)化 理論 | HTML寫法...

    dailybird 評論0 收藏0

發(fā)表評論

0條評論

chaosx110

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<