使用Vue腳手架編寫乙個後台管理系統頁面

2021-10-03 23:32:09 字數 1779 閱讀 2168

首先我們要先安裝vue腳手架,vue-cli。開啟cmd命令列輸入下面的指令安裝。

npm install -g @vue/cli

# or

yarn global add @vue/cli

然後輸入 vue ui 指令開啟建立vue腳手架的圖形介面。在自己指定的目錄下建立乙個新的專案,然後輸入 init -y 初始化專案。

然後選擇手動配置專案,根據自己的需求安裝響應的外掛程式(我安裝了babel、router、linter和使用配置檔案),然後配置如下

然後等待專案建立就行了。專案安裝完成之後我們還要安裝相關的外掛程式和依賴,比如(element-ui插架、依賴和axios依賴,依賴安裝在執行依賴下面),安裝element外掛程式的時候我們只好選擇按需匯入我們需要的模組,這樣可以使我們的專案更加小。

然後我們在components資料夾中建立乙個login.vue檔案,用來編寫登入的介面,然後再router資料夾中的index.js檔案中匯入這個單檔案元件,然後宣告它的路由規則,然後我們把跟路由重定向登入介面上,使用redirect關鍵字。如果實在乙個路由中巢狀子路由,則需要使用children關鍵字。

然後我們的login.vue中使用element-ui中的form表單,但是由於之前我們安裝element外掛程式時是按需匯入,所以我們要到plugins資料夾中的element.js資料夾中匯入我們的form表單,不然會報錯。

然後我們的樣式使用 帶scope關鍵字的less樣式,然後我們要回到我們的腳手架圖形介面中,在開發依賴中安裝less和less-loader依賴。

然後就是無論我們要匯入任何的外部檔案,我們都必須要在根目錄下的main.js入口檔案中生命。

接下來就是關於axios的使用。我們必須先要在main.js中匯入並宣告才可以使用,我們還可以自定義使用的關鍵字。

然後我們為了防止別人不登入直接通過路徑直接訪問我們的後台頁面,我們根據後台返回來的token設定乙個axios***。在每次對後台資料進行互動的時候,先要進行判斷是否已經登入,如果沒有則把頁面重定向到登入頁面。在main.js中設定***,人後早router的index.js中掛載路由守衛。

Vue腳手架使用

安裝 1.全域性安裝腳手架 cnpm install g vue cli 使用 2.新建資料夾,在當前目錄執行命令 vue create 專案名稱 3.配置 選擇manually select feautures 空格選擇babel和css pre procesors 選擇sass scss wit...

使用vue cli腳手架建立乙個vue專案

環境配置 配置node環境 方法可以去網上查詢按照步驟來,安裝完成之後執行命令 npm v 顯示版本號就可以了。記得設定映象環境,不然會很慢 安裝vue 執行命令npm i g vue cli 安裝最新版本的vue,完成後執行vue v顯示版本號就成功了。安裝成功以後,後面就不需要再安裝了 以下是專...

vue 使用腳手架搭建乙個專案備用

為了方便後面做一些vue的小專案,這邊構建乙個簡單點的vue腳手架專案 乙個基於vue腳手架的移動端基礎專案 vue檔案路徑 src utils axios.js思路 直接在檔案中建立乙個axios,然後對它做出攔截,封裝等操作,隨後丟擲乙個已經完成封裝的axios作用 介面封裝檔案路徑 src u...