資訊專欄INFORMATION COLUMN
摘要：在年月份發(fā)布了版本，經(jīng)過重構(gòu)之后，可以說是一個(gè)船心版本在項(xiàng)目都落地之后，就想升級(jí)一下版本，嘗一嘗帶來的舒適，也是為后面項(xiàng)目的開展做一個(gè)準(zhǔn)備。選了之后會(huì)詢問是否開啟模式，以及選擇預(yù)處理器，這里根據(jù)個(gè)人情況選用。
vue-cli在2018年8月份發(fā)布了3.0版本，經(jīng)過重構(gòu)之后，可以說是一個(gè)船心版本！
在項(xiàng)目都落地之后，就想升級(jí)一下cli版本，嘗一嘗3.0帶來的舒適，也是為后面項(xiàng)目的開展做一個(gè)準(zhǔn)備。
首先，如果電腦已經(jīng)安裝了vue-cli2.0，需先進(jìn)行卸載操作
# npm npm uninstall vue-cli -g # yarn yarn global remove vue-cli
卸載后進(jìn)行安裝操作
# npm npm install @vue/cli -g # yarn yarn global add @vue/cli
安裝成功后，敲入以下命令行創(chuàng)建項(xiàng)目
vue create test-cli3
這跟2.0的vue init webpack命令不一樣，如想保持一致的輸入效果，請(qǐng)自行安裝
npm install @vue/cli-init -g
那么下面就跟著創(chuàng)建步驟一步一步來吧！
在上面敲入創(chuàng)建項(xiàng)目的命令之后，就會(huì)出現(xiàn)下面的選擇：
? Please pick a preset: (Use arrow keys) > first_test (vue-router, less, babel, eslint) default (babel, eslint) Manually select features
選擇插件，默認(rèn)的只有babel和eslint，這里選擇Manually select featrues，后面通過手動(dòng)配置自己所需要的插件
? Check the features needed for your project: (Pressto select, to toggle all, to invert selection) >(*) Babel // 預(yù)編譯 ( ) TypeScript //TS ( ) Progressive Web App (PWA) Support (*) Router // 路由 (*) Vuex // 數(shù)據(jù)倉庫 (*) CSS Pre-processors // css預(yù)處理器 (*) Linter / Formatter // 代碼格式化 ( ) Unit Testing // 單元測(cè)試 ( ) E2E Testing // e2e測(cè)試
上面的插件根據(jù)項(xiàng)目情況需要，使用空格選中。上面帶*號(hào)的就是我這一次選中的。
選了router之后會(huì)詢問是否開啟history模式，以及選擇css預(yù)處理器，這里根據(jù)個(gè)人情況選用。
接下來就是eslint選用規(guī)則，個(gè)人推薦第一或者第四種
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier
選擇完eslint規(guī)則之后，再選擇Lint on save配置當(dāng)保存代碼時(shí)使用校驗(yàn)規(guī)則。
下一步就是詢問要將babel、eslint這些配置多帶帶配置成文件還是放在package.json文件，這里為了不讓package.json文件顯得太混亂，把配置多帶帶弄成文件，也方便配置
Where do you prefer placing config for Babel, PostCSS, ESLint, etc. > In dedicated config files > In package.json
配置完這些之后，就會(huì)詢問你是否將剛剛這些配置保存，方便以后創(chuàng)建項(xiàng)目的時(shí)候直接使用
Save this as a preset for future projects? (y/N)
這里敲y保存，并給這個(gè)配置命名，然后就開始下載模板啦
上面就是下載完的項(xiàng)目結(jié)構(gòu)，比2.0少了很多文件夾，也沒有一大堆webpack的配置文件，這對(duì)于很多小白來說，不用一開始就需要理解很多配置，看起來比較清爽。
下面就開始安裝element-ui
在cli3.0安裝插件也有一些差異，具體請(qǐng)移步官網(wǎng)查看詳細(xì)文檔
這里使用vue add element命令安裝element-ui
再選擇Fully import
PS：這里需要注意一點(diǎn)，使用vue add安裝插件時(shí)，應(yīng)確保當(dāng)前項(xiàng)目提交最新，因?yàn)橛锌赡軙?huì)覆蓋掉app.vue這個(gè)文件的部分內(nèi)容，比如安裝element，就會(huì)將app.vue的內(nèi)容增加多一個(gè)按鈕的顯示，如圖
那看到這個(gè)圖，也就說明element-ui安裝成功啦，然后就可以在各個(gè)組件里面，跟以前一樣使用element了！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103190.html
摘要：小白的全棧開發(fā)一簡(jiǎn)介從新手的角度對(duì)有了解，對(duì)和有了解。希望能夠幫助和我一樣是全棧小白的你看過很多關(guān)于怎么搭建全棧的文章，部分可能有借鑒。因?yàn)橐约邯?dú)立完成，所以開始自己的全棧之旅。分享出來我的全棧經(jīng)歷，并記錄我的畢設(shè)進(jìn)度逃。 小白的全棧開發(fā) 一 簡(jiǎn)介 從新手的角度（對(duì)vue有了解，對(duì)Koa和Express有了解。）從0開始搭建一個(gè)通過RESTful API提供數(shù)據(jù)，vue組成的單頁面的...
摘要：同時(shí)增加了單元測(cè)試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測(cè)試的，但正好滿足了我們的需求。它會(huì)重寫瀏覽器的對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。 前言 vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來，維護(hù)至今已經(jīng)有兩年多的時(shí)間了了，發(fā)布了四十多個(gè)版本，...
摘要：同時(shí)增加了單元測(cè)試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測(cè)試的，但正好滿足了我們的需求。它會(huì)重寫瀏覽器的對(duì)象，從而才能攔截所有請(qǐng)求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個(gè) commit 以來，維護(hù)至今已經(jīng)有兩年多的時(shí)間了了，發(fā)布了四十多個(gè)版本，收獲了三...
摘要：安裝完成之后，打開命令行工具，然后輸入，輸入和，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。 先說點(diǎn)什么 剛從坑里爬出來,來和大家分享一下,也許我寫的東西大部分文章都有,但是也有些新的東西,小白仔細(xì)看哦,大牛來了也請(qǐng)指點(diǎn)一二,也幫助我進(jìn)步! 進(jìn)入正題 Vue 2.0 項(xiàng)目的基本創(chuàng)建 一.Vue 2.0 的環(huán)境搭建 1.node.js安裝 安裝原因:Node.js 是一個(gè)服務(wù)器...
閱讀 3534·2023-04-25 18:14
閱讀 1681·2021-11-24 09:38
閱讀 3352·2021-09-22 14:59
閱讀 3147·2021-08-09 13:43
閱讀 2676·2019-08-30 15:54
閱讀 640·2019-08-30 13:06
閱讀 1650·2019-08-30 12:52
閱讀 2796·2019-08-30 11:13
