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