vue-cli3.0 + element-ui 框架搭建
從源頭開始
下載/安裝 node
node.js 官網下載 node 並安裝。
兩個版本都可以使用,左側爲穩定版,右側爲最新版
接下來直接全部選擇下一步就好(我使用的是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
進入 Vue/cli3.0 項目初始化界面
請選擇預設:(使用↑↓方向鍵控制,回車選擇)
備註:圖片中的 Vue 爲我的個人預設,後期添加的
選擇默認 default 默認預設
最基礎的 Vue/cli 框架就搭建好了。
這時就可以
cd [項目名] 進入你的項目
npm run serve 啓動項目
根據圖中地址就可以訪問項目了。
然後在編輯器中打開創建的項目
安裝/配置 element-ui
讓我們繼續安裝 element-ui node-sass
cmd 中輸入
npm i -save element-ui
npm i -save node-sass
npm i -save sass-loader
然後需要在 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 的框架就基本搭建完畢了。下圖就是使用該框架完成的頁面導航