資訊專欄INFORMATION COLUMN
摘要：當你將一系列的特性選擇完畢后最后回提示你是否將已選項保存成一個快速將來可復用的當你選擇保存時，被保存的將會存在用戶的目錄下一個名為的文件里。
準備工作
npm install -g @vue/cli or yarn global add @vue/cli
安裝需要Node.js8.9以上版本，安裝完成后可以通過vue --version來驗證是否安裝成功
項目創(chuàng)建 vue create可以通過在命令中輸入vue create demo 命令直接創(chuàng)建一個項目，你將會被提示選取一個preset
你可以選擇默認的只包含Babel + ESLint設置的preset，也可以手動選擇項目中需要集成的特性
如圖所示，包含babel轉碼，ts編寫vue,vue-router路由，vuex狀態(tài)管理，css預處理，eslint代碼格式管理，單元測試。
當你將一系列的特性選擇完畢后最后回提示你是否將已選項保存成一個快速將來可復用的preset
當你選擇保存時，被保存的 preset 將會存在用戶的 home 目錄下一個名為 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 選項，可以編輯這個文件
同時，在下次再次vue create創(chuàng)建項目時，這已保存的preset將會成為一個選項，可以依據(jù)之前設定的特性快速生成項目，后面會詳細介紹preset作用
vue-cli 3.0提供了圖形界面來管理項目，同時也可以通過圖形界面創(chuàng)建項目，在命令行中輸入 vue ui 即可進入項目管理界面：
preset作用及配置 preset作用vue create 命令有一些可配置的選項
-p, --preset忽略提示符并使用已保存的或遠程的預設選項 -d, --default 忽略提示符并使用默認預設選項 -i, --inlinePreset 忽略提示符并使用內聯(lián)的 JSON 字符串預設選項 -m, --packageManager 在安裝依賴時使用指定的 npm 客戶端 -r, --registry 在安裝依賴時使用指定的 npm registry (僅用于 npm 客戶端) -g, --git [message] 強制 / 跳過 git 初始化，并可選的指定初始化提交信息 -n, --no-git 跳過 git 初始化 -f, --force 覆寫目標目錄可能存在的配置 -c, --clone 使用 git clone 獲取遠程預設選項 -x, --proxy 使用指定的代理創(chuàng)建項目 -b, --bare 創(chuàng)建項目時省略默認組件中的新手指導信息 -h, --help 輸出使用幫助信息
其中通過vue create -p 可以使用已保存的或遠程的預設選項，一種是之前手選特性時自己保存在本地的preset，還有一種遠程代碼倉庫上的，可以是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
遠程代碼倉庫上的preset必須包含以下文件：
preset.json: 包含 preset 數(shù)據(jù)的主要文件
generator.js: 一個可以注入或是修改項目中文件的 Generator
prompts.js 一個可以通過命令行對話為 generator 收集選項的 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" // 在保存是校驗eslint規(guī)則
]
},
"@vue/cli-plugin-unit-jest": {},
"@vue/cli-plugin-e2e-nightwatch": {}
},
"router": true,
"routerHistoryMode": true,
"vuex": true,
"cssPreprocessor": "sass"
}
}
}
以上是簡單preset配置，沒有包含configs字段，如果該項存在并包含 vue 字段，會在項目根目錄生成 vue.config.js 文件，用作整個項目的配置文件，vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載.
環(huán)境變量vue cli2.0的環(huán)境變量都是通過webpack.DefinePlugin將process.env嵌入到客戶端中,但是在3.0中是根據(jù)項目根目錄中的文件來指定環(huán)境變量
.env # 在所有的環(huán)境中被載入 .env.local # 在所有的環(huán)境中被載入，但會被 git 忽略 .env.[mode] # 只在指定的模式中被載入 .env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
在編譯時通過傳遞 --mode 選項參數(shù)為命令行覆寫默認的模式，決定編譯時加載對應文件的環(huán)境變量，如果你想要在構建命令中使用開發(fā)環(huán)境變量，請在你的 package.json 腳本中加入：
"dev-build": "vue-cli-service build --mode development",
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/98414.html
摘要：因為項目技術架構需要，要用進行搭建，所以簡單的分享下如何優(yōu)雅的開始。第三步創(chuàng)建項目相對，創(chuàng)建就不是之前一大堆了。直接，是項目名字。但是個人建議，進行多選，根據(jù)自己需要進行選擇。根據(jù)提示，運行一把一下，跑起來的感覺很棒。 因為項目技術架構需要，要用vue-cli 3.0進行搭建，所以簡單的分享下3.0如何優(yōu)雅的開始。下面做一下簡單的介紹，希望可以幫到有需要的朋友。 vue-cli 3.0...
摘要：記使用方式和之前版本的差異的使用下載和安裝項目生成的目錄結構以上，目前版本的使用下載和安裝項目生成的目錄結構新的目錄結構，隱藏了配置文件，封裝了細節(jié)對比個區(qū)別區(qū)別下載包的包命變化。貌似是之前的版本有點問題 記vue-cli@3.0使用方式和之前版本的差異 @2.9.3的使用 1.下載vue-cli和安裝項目 cnpm i -g vue-cli#2.9.3 vue init webpa...
摘要：寫在前面其實最開始不是特意來研究的源碼，只是想了解下的命令，如果想要了解命令的話，那么繞不開寫的。通過分析發(fā)現(xiàn)與相比，變化太大了，通過引入插件系統(tǒng)，可以讓開發(fā)者利用其暴露的對項目進行擴展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 寫在前面 其實最開始不是特意來研究 vue-cli 的源碼，只是想了解下 n...
摘要：配置環(huán)境變量參考打包后項目的啟動發(fā)生了變化，之前可以直接打開，現(xiàn)在需要參數(shù)的意思是將其架設在模式下這個模式會處理即將提到的路由問題 (第一章)學習vue-cli 3.0腳手架構建vue項目 vue學習鞏固及遇到的問題 首先這次使用的vue腳手架為vue-cli 3.0，它跟之前的腳手架改變了很多，這里我也沒去細細的研究，也只懂得了最基本的用法，參考: vue-cli 3 地址：http...
閱讀 2603·2023-04-25 19:31
閱讀 2329·2021-11-04 16:11
閱讀 2884·2021-10-08 10:05
閱讀 1596·2021-09-30 09:48
閱讀 2422·2019-08-30 15:56
閱讀 2475·2019-08-30 15:56
閱讀 2235·2019-08-30 15:53
閱讀 2342·2019-08-30 15:44
