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

資訊專欄INFORMATION COLUMN

初探vue-cli 3.0

superPershing / 3059人閱讀

摘要：當(dāng)你將一系列的特性選擇完畢后最后回提示你是否將已選項(xiàng)保存成一個快速將來可復(fù)用的當(dāng)你選擇保存時，被保存的將會存在用戶的目錄下一個名為的文件里。

準(zhǔn)備工作 
npm install -g @vue/cli or yarn global add @vue/cli

安裝需要Node.js8.9以上版本，安裝完成后可以通過vue --version來驗(yàn)證是否安裝成功

項(xiàng)目創(chuàng)建 vue create

可以通過在命令中輸入vue create demo 命令直接創(chuàng)建一個項(xiàng)目，你將會被提示選取一個preset

你可以選擇默認(rèn)的只包含Babel + ESLint設(shè)置的preset，也可以手動選擇項(xiàng)目中需要集成的特性

如圖所示，包含babel轉(zhuǎn)碼，ts編寫vue,vue-router路由，vuex狀態(tài)管理，css預(yù)處理，eslint代碼格式管理，單元測試。
當(dāng)你將一系列的特性選擇完畢后最后回提示你是否將已選項(xiàng)保存成一個快速將來可復(fù)用的preset

當(dāng)你選擇保存時，被保存的 preset 將會存在用戶的 home 目錄下一個名為 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 選項(xiàng)，可以編輯這個文件
同時，在下次再次vue create創(chuàng)建項(xiàng)目時，這已保存的preset將會成為一個選項(xiàng)，可以依據(jù)之前設(shè)定的特性快速生成項(xiàng)目，后面會詳細(xì)介紹preset作用

ui界面創(chuàng)建

vue-cli 3.0提供了圖形界面來管理項(xiàng)目，同時也可以通過圖形界面創(chuàng)建項(xiàng)目，在命令行中輸入 vue ui 即可進(jìn)入項(xiàng)目管理界面：

preset作用及配置 preset作用

vue create 命令有一些可配置的選項(xiàng)

  -p, --preset        忽略提示符并使用已保存的或遠(yuǎn)程的預(yù)設(shè)選項(xiàng)
  -d, --default                   忽略提示符并使用默認(rèn)預(yù)設(shè)選項(xiàng)
  -i, --inlinePreset        忽略提示符并使用內(nèi)聯(lián)的 JSON 字符串預(yù)設(shè)選項(xiàng)
  -m, --packageManager   在安裝依賴時使用指定的 npm 客戶端
  -r, --registry             在安裝依賴時使用指定的 npm registry (僅用于 npm 客戶端)
  -g, --git [message]             強(qiáng)制 / 跳過 git 初始化，并可選的指定初始化提交信息
  -n, --no-git                    跳過 git 初始化
  -f, --force                     覆寫目標(biāo)目錄可能存在的配置
  -c, --clone                     使用 git clone 獲取遠(yuǎn)程預(yù)設(shè)選項(xiàng)
  -x, --proxy                     使用指定的代理創(chuàng)建項(xiàng)目
  -b, --bare                      創(chuàng)建項(xiàng)目時省略默認(rèn)組件中的新手指導(dǎo)信息
  -h, --help                      輸出使用幫助信息

其中通過vue create -p 可以使用已保存的或遠(yuǎn)程的預(yù)設(shè)選項(xiàng)，一種是之前手選特性時自己保存在本地的preset，還有一種遠(yuǎn)程代碼倉庫上的，可以是GitHub、GitLab或者BitBucket

vue create --preset username/repo my-project
vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

遠(yuǎn)程代碼倉庫上的preset必須包含以下文件：

preset.json: 包含 preset 數(shù)據(jù)的主要文件

generator.js: 一個可以注入或是修改項(xiàng)目中文件的 Generator

prompts.js 一個可以通過命令行對話為 generator 收集選項(xiàng)的 prompts 文件

preset配置 
{
  "packageManager": "npm", // 包管理工具 可以是npm或者yarn
  "useTaobaoRegistry": true, // 是否使用淘寶源
  "presets": {
    "vuePresets": {
      "useConfigFiles": true, // 是否生成多帶帶的配置文件
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-pwa": {},
        "@vue/cli-plugin-eslint": { //eslint配置
          "config": "standard", // eslint規(guī)則
          "lintOn": [
            "save" // 在保存是校驗(yàn)eslint規(guī)則
          ]
        },
        "@vue/cli-plugin-unit-jest": {},
        "@vue/cli-plugin-e2e-nightwatch": {}
      },
      "router": true,
      "routerHistoryMode": true,
      "vuex": true,
      "cssPreprocessor": "sass"
    }
  }
}

以上是簡單preset配置，沒有包含configs字段，如果該項(xiàng)存在并包含 vue 字段，會在項(xiàng)目根目錄生成 vue.config.js 文件，用作整個項(xiàng)目的配置文件，vue.config.js 是一個可選的配置文件，如果項(xiàng)目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載.

環(huán)境變量

vue cli2.0的環(huán)境變量都是通過webpack.DefinePlugin將process.env嵌入到客戶端中,但是在3.0中是根據(jù)項(xiàng)目根目錄中的文件來指定環(huán)境變量

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

在編譯時通過傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式，決定編譯時加載對應(yīng)文件的環(huán)境變量，如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量，請?jiān)谀愕?package.json 腳本中加入：

"dev-build": "vue-cli-service build --mode development",

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

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

相關(guān)文章

  • vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建

    摘要：因?yàn)轫?xiàng)目技術(shù)架構(gòu)需要，要用進(jìn)行搭建，所以簡單的分享下如何優(yōu)雅的開始。第三步創(chuàng)建項(xiàng)目相對，創(chuàng)建就不是之前一大堆了。直接，是項(xiàng)目名字。但是個人建議，進(jìn)行多選，根據(jù)自己需要進(jìn)行選擇。根據(jù)提示，運(yùn)行一把一下，跑起來的感覺很棒。 因?yàn)轫?xiàng)目技術(shù)架構(gòu)需要，要用vue-cli 3.0進(jìn)行搭建，所以簡單的分享下3.0如何優(yōu)雅的開始。下面做一下簡單的介紹，希望可以幫到有需要的朋友。 vue-cli 3.0...

    Zhuxy 評論0 收藏0

  • 記vue-cli@3.0和之前版本的差異

    摘要：記使用方式和之前版本的差異的使用下載和安裝項(xiàng)目生成的目錄結(jié)構(gòu)以上，目前版本的使用下載和安裝項(xiàng)目生成的目錄結(jié)構(gòu)新的目錄結(jié)構(gòu)，隱藏了配置文件，封裝了細(xì)節(jié)對比個區(qū)別區(qū)別下載包的包命變化。貌似是之前的版本有點(diǎn)問題 記vue-cli@3.0使用方式和之前版本的差異 @2.9.3的使用 1.下載vue-cli和安裝項(xiàng)目 cnpm i -g vue-cli#2.9.3 vue init webpa...

    wow_worktile 評論0 收藏0

  • vue-cli 3.0 源碼分析

    摘要：寫在前面其實(shí)最開始不是特意來研究的源碼，只是想了解下的命令，如果想要了解命令的話，那么繞不開寫的。通過分析發(fā)現(xiàn)與相比，變化太大了，通過引入插件系統(tǒng)，可以讓開發(fā)者利用其暴露的對項(xiàng)目進(jìn)行擴(kuò)展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 寫在前面 其實(shí)最開始不是特意來研究 vue-cli 的源碼，只是想了解下 n...

    yiliang 評論0 收藏0

  • vue-cli 3.0

    摘要：配置環(huán)境變量參考打包后項(xiàng)目的啟動發(fā)生了變化，之前可以直接打開，現(xiàn)在需要參數(shù)的意思是將其架設(shè)在模式下這個模式會處理即將提到的路由問題 (第一章)學(xué)習(xí)vue-cli 3.0腳手架構(gòu)建vue項(xiàng)目 vue學(xué)習(xí)鞏固及遇到的問題 首先這次使用的vue腳手架為vue-cli 3.0，它跟之前的腳手架改變了很多，這里我也沒去細(xì)細(xì)的研究，也只懂得了最基本的用法，參考: vue-cli 3 地址：http...

    April 評論0 收藏0

發(fā)表評論

0條評論

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