vue-cli3.0 + element-ui框架搭建,手把手教你搭框架

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 的框架就基本搭建完畢了。下圖就是使用該框架完成的頁面導航
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章