資訊專欄INFORMATION COLUMN
摘要：在年月份發(fā)布了版本，經(jīng)過重構(gòu)之后，可以說是一個船心版本在項目都落地之后，就想升級一下版本，嘗一嘗帶來的舒適，也是為后面項目的開展做一個準(zhǔn)備。選了之后會詢問是否開啟模式，以及選擇預(yù)處理器，這里根據(jù)個人情況選用。
vue-cli在2018年8月份發(fā)布了3.0版本，經(jīng)過重構(gòu)之后，可以說是一個船心版本！
在項目都落地之后，就想升級一下cli版本，嘗一嘗3.0帶來的舒適，也是為后面項目的開展做一個準(zhǔn)備。
首先，如果電腦已經(jīng)安裝了vue-cli2.0，需先進行卸載操作
# npm npm uninstall vue-cli -g # yarn yarn global remove vue-cli
卸載后進行安裝操作
# npm npm install @vue/cli -g # yarn yarn global add @vue/cli
安裝成功后，敲入以下命令行創(chuàng)建項目
vue create test-cli3
這跟2.0的vue init webpack命令不一樣，如想保持一致的輸入效果，請自行安裝
npm install @vue/cli-init -g
那么下面就跟著創(chuàng)建步驟一步一步來吧！
在上面敲入創(chuàng)建項目的命令之后，就會出現(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，后面通過手動配置自己所需要的插件
? 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 // 單元測試 ( ) E2E Testing // e2e測試
上面的插件根據(jù)項目情況需要，使用空格選中。上面帶*號的就是我這一次選中的。
選了router之后會詢問是否開啟history模式，以及選擇css預(yù)處理器，這里根據(jù)個人情況選用。
接下來就是eslint選用規(guī)則，個人推薦第一或者第四種
? 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)保存代碼時使用校驗規(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
配置完這些之后，就會詢問你是否將剛剛這些配置保存，方便以后創(chuàng)建項目的時候直接使用
Save this as a preset for future projects? (y/N)
這里敲y保存，并給這個配置命名，然后就開始下載模板啦
上面就是下載完的項目結(jié)構(gòu)，比2.0少了很多文件夾，也沒有一大堆webpack的配置文件，這對于很多小白來說，不用一開始就需要理解很多配置，看起來比較清爽。
下面就開始安裝element-ui
在cli3.0安裝插件也有一些差異，具體請移步官網(wǎng)查看詳細(xì)文檔
這里使用vue add element命令安裝element-ui
再選擇Fully import
PS：這里需要注意一點，使用vue add安裝插件時，應(yīng)確保當(dāng)前項目提交最新，因為有可能會覆蓋掉app.vue這個文件的部分內(nèi)容，比如安裝element，就會將app.vue的內(nèi)容增加多一個按鈕的顯示，如圖
那看到這個圖，也就說明element-ui安裝成功啦，然后就可以在各個組件里面，跟以前一樣使用element了！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103190.html
摘要：小白的全棧開發(fā)一簡介從新手的角度對有了解，對和有了解。希望能夠幫助和我一樣是全棧小白的你看過很多關(guān)于怎么搭建全棧的文章，部分可能有借鑒。因為要自己獨立完成，所以開始自己的全棧之旅。分享出來我的全棧經(jīng)歷，并記錄我的畢設(shè)進度逃。 小白的全棧開發(fā) 一 簡介 從新手的角度（對vue有了解，對Koa和Express有了解。）從0開始搭建一個通過RESTful API提供數(shù)據(jù)，vue組成的單頁面的...
摘要：同時增加了單元測試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。 前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護至今已經(jīng)有兩年多的時間了了，發(fā)布了四十多個版本，...
摘要：同時增加了單元測試，使用了，增加了可視化配置權(quán)限，增加了自定義布局等等，優(yōu)化了原先的權(quán)限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護至今已經(jīng)有兩年多的時間了了，發(fā)布了四十多個版本，收獲了三...
摘要：安裝完成之后，打開命令行工具，然后輸入，輸入和，如下圖，如果出現(xiàn)相應(yīng)的版本號，則說明安裝成功。 先說點什么 剛從坑里爬出來,來和大家分享一下,也許我寫的東西大部分文章都有,但是也有些新的東西,小白仔細(xì)看哦,大牛來了也請指點一二,也幫助我進步! 進入正題 Vue 2.0 項目的基本創(chuàng)建 一.Vue 2.0 的環(huán)境搭建 1.node.js安裝 安裝原因:Node.js 是一個服務(wù)器...
閱讀 3440·2023-04-25 18:14
閱讀 1538·2021-11-24 09:38
閱讀 3255·2021-09-22 14:59
閱讀 3070·2021-08-09 13:43
閱讀 2574·2019-08-30 15:54
閱讀 573·2019-08-30 13:06
閱讀 1555·2019-08-30 12:52
閱讀 2726·2019-08-30 11:13
