vue-cli3.0 + element-ui框架搭建，手把手教你搭框架
vue-cli3.0 + element-ui 框架搭建
從源頭開始
下載/安裝 node
node.js 官網下載 node 並安裝。
兩個版本都可以使用，左側為穩定版，右側為最新版- 1
接下來直接全部選擇下一步就好（我使用的是MAC版介面稍有不同）
到這node就安裝成功了。然後就可以開始框架的搭建了（要使用git也可以把git安裝好，這裡就不多說了）
vue-cli3.0初始化
開啟 CMD 找到希望存放 vue專案的目錄，先安裝 vue/cli3.0。
執行 npm i -g @vue/cli(MAC系統的需要在前面加 sudo，Windows系統需要以管理員模式開啟CMD)
這樣 vue/cli3.0 就安裝成功了。接下來就可以開始 Vue專案的初始化
使用 vue create [專案名稱] 初始化專案例：
vue create vue-product- 1
進入 Vue/cli3.0 專案初始化介面
請選擇預設:（使用↑↓方向鍵控制，回車選擇）
備註：圖片中的 Vue 為我的個人預設，後期新增的
選擇預設 default 預設預設
最基礎的 Vue/cli 框架就搭建好了。
這時就可以
cd [專案名] 進入你的專案
npm run serve 啟動專案- 1
- 2
根據圖中地址就可以訪問專案了。
然後在編輯器中開啟建立的專案
安裝/配置 element-ui
讓我們繼續安裝 element-ui node-sass
cmd 中輸入
npm i -save element-ui npm i -save node-sass npm i -save sass-loader
- 1
- 2
- 3
然後需要在 main.js 中引入 element-ui 的元件
在 src 下建立 plugins 資料夾，再在 plugins 下建立 element-ui.js 檔案檔案內容如下：
使用 import {} from 引入 element-ui 的元件並使用 Vue.use() 引用，並配置 Vue 中的 element元件（可根據個人喜好更改，引入方式參考地址：https://element.eleme.cn/#/zh-CN/component/quickstart）
然後在 main.js 中引入 element-ui.js
在 assets 資料夾下引入 element-ui.scss 檔案
建立資料夾、檔案、檔案內容如下圖所示：
然後在 main.js 引入appliction.scss
配置 vue.config.js
在最外層目錄下，建立 vue.config.js 檔案並配置如下：
到此 Vue + Element-ui 的框架就基本搭建完畢了。下圖就是使用該框架完成的頁面導航