成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

從零開始做Vue前端架構(gòu)（2）

Brenner / 2400人閱讀

摘要：前言這一篇，我們將接著上篇來完成配置。開發(fā)一配置我們采用的方式來創(chuàng)建。對了，前提我們需要全局安裝。三配置創(chuàng)建文件，上配置配置總結(jié)這篇不多，就做了三件事，。下一篇我們將創(chuàng)建項(xiàng)目文件目錄架構(gòu)從零開始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻

前言

這一篇，我們將接著上篇來完成配置eslint、babel、postcss。

開發(fā) 一、配置eslint

我們采用eslint --init的方式來創(chuàng)建eslintrc.js。
對了，前提我們需要全局安裝eslint：npm i -g eslint。
安裝完全局eslint以后，我們在項(xiàng)目根目錄使用eslint --init，我選擇自定義的方式來規(guī)定eslint規(guī)則：

?  vue-construct git:(master) ? eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? (Use arrow keys)
? JavaScript

當(dāng)然，你可以按照自己喜歡，選擇自己想要的方式，比如How would you like to configure ESLint? 這個(gè)問題的時(shí)候，可以選擇popular的規(guī)則，有Google、standard等規(guī)則，選擇你想要的就好。

我po下我的配置吧：

// 創(chuàng)建這個(gè)文件的話，本王推薦用eslint --init創(chuàng)建
module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    // https://stackoverflow.com/questions/38296761/how-to-support-es7-in-eslint
    // 為了讓eslint支持es7或更高的語法
    "parser": "babel-eslint",
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "plugins": [
        // https://github.com/BenoitZugmeyer/eslint-plugin-html
        // 支持 *.vue lint
        "html"
    ],
    // https://eslint.org/docs/rules/
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ],
        // https://eslint.org/docs/user-guide/configuring#using-configuration-files
        // "off" or 0 - turn the rule off
        // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
        // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
        "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
        "no-console": 0,
    }
};
二、配置babel

創(chuàng)建.babelrc文件，直接上配置：

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "ie >= 10"
          ]
        },
        "modules": false,
        "useBuiltIns": true
      }
    ]
  ],
  "plugins": [
    "transform-object-rest-spread",
    "syntax-dynamic-import"
  ]
}

配合webpack配置：

{
    test: /.js$/,
    include: [resolve("app")],
    use: [
      "babel-loader",
      "eslint-loader"
    ]
},

我們使用的是babel-preset-env，我們知道，babel只是轉(zhuǎn)譯了高級(jí)語法，比如lambda，class，async等，并不會(huì)支持高級(jí)的api，所以需要babel-polyfill的幫忙。方便的是，我們只需要"useBuiltIns": true，然后npm安裝babel-polyfill，再在webpack配置中的entry帶上babel-polyfill就好了。

babel-preset-env的優(yōu)點(diǎn)：

通過targets來決定支持到那個(gè)哪些版本的語法就夠了，不會(huì)過渡轉(zhuǎn)譯，可控性強(qiáng)

通過useBuiltIns來支持babel-polyfill的按需加載，而不是一口氣把整個(gè)包打入，因?yàn)槠鋵?shí)我們只用到了很小一部分

transform-object-rest-spread是為了支持const a = {name: kitty, age: 7}; const b = { ...a }這種es7語法。

syntax-dynamic-import是為了支持const Home = () => import("../views/home")這種語法，達(dá)到按需分割、加載的目的。

三、配置postcss

創(chuàng)建postcss.config.js文件，上配置：

module.exports = {
  plugins: [
    require("autoprefixer")
  ],
  // 配置autoprefix
  browsers: [
    "> 1%",
    "last 2 versions",
    "ie >= 10"
  ]
}
總結(jié)

這篇不多，就做了三件事，eslint、babel、postcss。

下一篇我們將創(chuàng)建項(xiàng)目文件、目錄架構(gòu) - 從零開始做Vue前端架構(gòu)（3）

項(xiàng)目完整代碼

Vue前端架構(gòu)-by 子咻

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107154.html

相關(guān)文章

  • 從零開始做Vue前端架構(gòu)（3）

    摘要：前言這一篇，我們將接著上篇來完成創(chuàng)建項(xiàng)目文件目錄架構(gòu)?？偨Y(jié)這篇主要是文件和目錄架構(gòu)的東西，讀者務(wù)必運(yùn)行一下完整的項(xiàng)目。因此，下一篇，我們將通過實(shí)現(xiàn)本地?cái)?shù)據(jù)接口模擬從零開始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻 前言 這一篇，我們將接著上篇來完成創(chuàng)建項(xiàng)目文件、目錄架構(gòu)。 回顧 先回顧一下現(xiàn)在項(xiàng)目有哪些東西了： . ├── app │?? ├── app.vue │?? ├── common ...

    dinfer 評論0 收藏0

  • 從零開始做Vue前端架構(gòu)（2）

    摘要：前言這一篇，我們將接著上篇來完成配置。開發(fā)一配置我們采用的方式來創(chuàng)建。對了，前提我們需要全局安裝。三配置創(chuàng)建文件，上配置配置總結(jié)這篇不多，就做了三件事，。下一篇我們將創(chuàng)建項(xiàng)目文件目錄架構(gòu)從零開始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻 前言 這一篇，我們將接著上篇來完成配置eslint、babel、postcss。 開發(fā) 一、配置eslint 我們采用eslint --init的方式來創(chuàng)建e...

    YanceyOfficial 評論0 收藏0

  • 從零開始做Vue前端架構(gòu)（1）

    摘要：前言想想也已經(jīng)做過不少架構(gòu)的項(xiàng)目了，有基于，基于，基于，基于的。好了，介紹完畢，接下來，我就從零開始，一步一步建起前后端完全分離的前端架構(gòu)了。 前言 想想也已經(jīng)做過不少架構(gòu)的項(xiàng)目了，有基于vue，基于react，基于thinkPHP，基于laravel的。 做多了，也就對現(xiàn)有的架構(gòu)有各種想法，有好的，有壞的，總之，用起來還是不爽。vue-cli雖然可以很快地構(gòu)建并使用，尤其是vue-c...

    frolc 評論0 收藏0

  • 從零開始做Vue前端架構(gòu)（4）

    摘要：前言上一篇我們遇到少年，是不是忘了的警告，這一篇我們就來解決這個(gè)問題。總結(jié)通過實(shí)現(xiàn)前后端分離，并且使用來更方便的模擬數(shù)據(jù)。下一篇，我們創(chuàng)建發(fā)布環(huán)境下的配置文件，并且看看怎么優(yōu)化產(chǎn)出的代碼的從零開始做前端架構(gòu)項(xiàng)目完整代碼前端架構(gòu)子咻 前言 上一篇我們遇到少年，是不是忘了npm run mock?的警告，這一篇我們就來解決這個(gè)問題。 開發(fā) 一、安裝包 安裝koa和一系列的包（我們用的是ko...

    xuweijian 評論0 收藏0

  • 從零開始做Vue前端架構(gòu)（9）

    摘要：那該怎么管理這兩個(gè)不同的項(xiàng)目呢解決子模塊用的的同學(xué)肯定一下子就想到子模塊的知識(shí)了。最后，也希望有想法的同學(xué)還有大佬多多留言，給點(diǎn)建議原文地址從零開始做前端架構(gòu)腳手架參考資料官方文檔使用定制前端腳手架別人寫的腳手架文件操作相關(guān)文檔子模塊 前言 相信很多人都用過vue-cli或create-react-app或者類似的腳手架。腳手架方便我們復(fù)制，粘貼，或者clone代碼庫，而且還可以更具用...

    Vicky 評論0 收藏0

發(fā)表評論

0條評論

Brenner

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<