vue3的安裝及項目建立

1.安裝

 npm install -g @vue/cli

使用淘寶鏡像安裝

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

2.建立項目

 vue create vue3demo

輸出以下信息：

 Vue CLI v4.0.4
 ┌─────────────────────────────────────────┐
 │                                         │
 │   New version available 4.0.4 → 4.0.5   │
 │   Run npm i -g @vue/cli to update!     │
 │                                         │
 └─────────────────────────────────────────┘
 ​
 ? Please pick a preset:
  firstConfig (stylus, babel, router, vuex)
  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測試

選好後回車

這一步，是選擇路由的模式，y選擇history模式，n 選擇hash模式（url路徑帶#號）

選擇css預編譯器，根據我的喜愛選擇

設置配置信息存放文件

是否保存本次選擇的特性，方便下次直接建立

回車開始安裝

進入 vue3demo目錄

npm run serve 運行項目

打開網址： http://localhost:8082/

項目初始化成功！

用vsCode打開項目,項目已經幫咱們導入了store,router等基本組件

引用基於vue-cli@3的Element組件

這裏要引用vue-cli@3下的element-ui組件

 vue add element

會出現如下提示

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

爲了方便使用，選擇第一個fully import

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

至此回車開始安裝

 npm run serve