mac下搭建基於vue-cli 3.0的Element UI 項目


1.安裝yarn管理工具(包含node.js);

2.安裝全局vue-cli全家桶:

yarn global add @vue/cli

3.創建、測試一個vue-cli項目:

vue create admin

默認會提示選擇那些安裝:

Vue CLI v3.3.0
? Please pick a preset: (Use arrow keys)
❯ project1 (vue-router, vuex, sass, babel, pwa, eslint) #這里是我之前創建項目並保持了他的配置(Save preset as: xxxx)
  default (babel, eslint) #默認創建,因為不太清楚它是否具備了該有的功能和組件,索引自己選擇了下面自定義安裝 
  Manually select features #自定義創建

自定義創建1

按空個進行勾選:

  • Bable 預編譯
  • TypeScript
  • Progressive Web App (PWA) Support 優化用的
  • Router 路由
  • Vuex
  • CSS Pre-processors CSS預處理器
  • Linter/Formatter 代碼格式化
  • Unit Testing 單元測試
  • E2E Testing E2E測試

接着是一些細化的選擇,詳情可以看上圖,其中最后一步提示是否作為一個默認候選創建包,可以結合自己需要設定作為一個創建模板(即前面提及的project1);

4.基於vue-cli@3引入element組件
創建好項目之后,切換到目錄內:

vue add element 

會出現以下提示:

? How do you want to import Element? (Use arrow keys)

為了方便,可以選擇全局引用:full import

1. ? Do you wish to overwrite Element's SCSS variables? Yes
2. Choose the locale you want to load zh-CN

之后就可以通過命令yarn serve編譯、運行網站了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM