在VUE-CLI 3下的第一個Element-ui項目（菜鳥專用）

1、
今天第一次試用了vue-cli 3 來寫個人第一個基於Element-ui的項目，我會從項目的建立到項目的運行儘量詳細的給你們講一遍。
2、安裝及建立
1.可使用下列的命令進行安裝

npm install -g @vue/cli

yarn global add @vue/cli  #mac推薦使用

應爲沒用過yarn,我在這裏使用的是經常使用的npm,若是安裝速度過慢，能夠選擇使用淘寶鏡像進行安裝。

npm install -g @vue/cli cnpm --registry=https://registry.npm.taobao.org

---

2.完成以上步驟以後，就能夠開始建立項目了

F:\>vue create aha-wts-test

而後出現如下信息

Vue CLI v3.0.5
? Please pick a preset:

mock ( vue-router, vuex, sass, babel, typescript, eslint, unit-jest, e2e-cypress) # 這是我以前建立的項目並保存它的配置，詳情可看 這裏
default (babel, eslint) # 默認建立。由於不太清楚它是否具有了該有的功能和組件，因此我選擇了下面那個
Manually select features # 自定義建立

---

按空格進行勾選

1. Bable 預編譯 勾選
2. TypeScript 微軟作的，用到的勾選
3. Progressive Web App (PWA) Support 優化用的，用到的勾選
4. Router 路由 勾選
5. Vuex 勾選
6. CSS Pre-processors CSS預處理器 勾選
7. Linter/Formatter 代碼格式化
8. Unit Testing 單元測試
9. E2E Testing E2E測試

---

這是檢驗標準，配合VScode
我的推薦第一種和第四種

---

接下來選擇

1. lint on save
2. in package.json (我的習慣)
3. 選擇是否保存本身的習慣
4. 等待建立

---

3、引用基於vue-cli@3的Element組件
在這裏要使用到vue-cli@3下的Element的組件
特別方便
建立好項目後輸入

vue add element

會出現如下提示

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

爲了方便，選擇第一個全局引用：fully import

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

到這一步以後，就能夠開始開荒了

的確精簡了許多

npm run serve

目錄結構可參考：點擊這裏