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 #自定義創建
按空個進行勾選:
- 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編譯、運行網站了