Vue學習之Vue結合 ElementUI 元件庫搭建Web工程項目

建立Vue項目

打開cmd指令行界面，建立一個全新的vue項目，我們命名為hello-vue，這裡附上ElementUI網址如下：ElementUI

# 使用 webpack 打包工具初始化一個名為 hello-vue 的工程
vue init webpack hello-vue
           

NPM 安裝相關元件依賴時可能會遇到權限問題，此時使用 PowerShell 管理者模式運作即可；開始菜單 -> 滑鼠右擊 -> Windows PowerShell (管理者)

安裝依賴

我們需要安裝 vue-router、element-ui、sass-loader 和 node-sass 四個插件

# 進入工程目錄
cd hello-vue
# 安裝 vue-router
npm install vue-router --save-dev
# 安裝 element-ui
npm i element-ui -S
# 安裝 SASS 加載器
npm install sass-loader node-sass --save-dev
           

安裝其他相關依賴

注意一定要先進入到hello-vue目錄中

npm install
           

啟動工程

npm run dev
           

啟動成功，浏覽器輸入：http://localhost:8080 如下圖：

經過整個，目前實作了登入的表單驗證功能，首頁顯示功能，路由轉發功能，以及VueX。

先将項目源碼發到這裡，提供大家下載下傳，免費的！！

Vue學習之Vue結合 ElementUI 元件庫搭建Web工程項目

這裡是一個真誠的***青年技術交流QQ群:761374713***，不管你是大學生、社畜、想學習變成的其他人員，歡迎大家加入我們，一起成長，一起進步，真誠的歡迎你，不管是技術，還是人生，還是學習方法。有道無術，術亦可求，有術無道，止于術。