項目的創(chuàng)建和基本配置

創(chuàng)建項目

將vue-admin-template-master重命名為guli-admin

修改項目信息

package.json {"name": "admin",......"description": "后臺管理系統(tǒng)","author": "Helen <88888888@qq.com>",...... }

如果需要修改端口號

config/index.js中修改

port: 9528

項目的目錄結(jié)構(gòu)

. ├── build // 構(gòu)建腳本 ├── config // 全局配置 ├── node_modules // 項目依賴模塊 ├── src //項目源代碼 ├── static // 靜態(tài)資源 └── package.jspon // 項目信息和依賴配置 src ├── api // 各種接口 ├── assets // 圖片等資源 ├── components // 各種公共組件，非公共組件在各自view下維護(hù) ├── icons //svg icon ├── router // 路由表 ├── store // 存儲 ├── styles // 各種樣式 ├── utils // 公共工具，非公共工具，在各自view下維護(hù) ├── views // 各種layout ├── App.vue //***項目頂層組件*** ├── main.js //***項目入口文件*** └── permission.js //認(rèn)證入口

運行項目

npm run dev

登錄頁修改

src/views/login/index.vue（登錄組件）

4行

<h3 class="title">后臺管理系統(tǒng)</h3>

28行

<el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">登錄 </el-button>

頁面零星修改

1、標(biāo)題

index.html（項目的html入口）

<title>谷粒學(xué)院后臺管理系統(tǒng)</title>

修改后熱部署功能，瀏覽器自動刷新

?

國際化設(shè)置

打開 src/main.js（項目的js入口），第7行，修改語言為?zh-CN，使用中文語言環(huán)境，例如：日期時間組件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

icon

復(fù)制?favicon.ico 到根目錄

導(dǎo)航欄文字

src/views/layout/components（當(dāng)前項目的布局組件）

src/views/layout/components/Navbar.vue

13行

<el-dropdown-item>首頁 </el-dropdown-item> 17行 <span style="display:block;" @click="logout">退出</span>

面包屑文字

src/components（可以在很多項目中復(fù)用的通用組件）

src/components/Breadcrumb/index.vue

38行

meta: { title: '首頁' }

Eslint語法規(guī)范型檢查

ESLint簡介

JavaScript 是一個動態(tài)的弱類型語言，在開發(fā)中比較容易出錯。因為沒有編譯程序，為了尋找 JavaScript 代碼錯誤通常需要在執(zhí)行過程中不斷調(diào)適。

ESLint 是一個語法規(guī)則和代碼風(fēng)格的檢查工具，可以用來保證寫出語法正確、風(fēng)格統(tǒng)一的代碼。讓程序員在編碼的過程中發(fā)現(xiàn)問題而不是在執(zhí)行的過程中。

語法規(guī)則

ESLint 內(nèi)置了一些規(guī)則，也可以在使用過程中自定義規(guī)則。

本項目的語法規(guī)則包括：兩個字符縮進(jìn)，必須使用單引號，不能使用雙引號，語句后不可以寫分號，代碼段之間必須有一個空行等。

確認(rèn)開啟語法檢查

打開?config/index.js，配置是否開啟語法檢查

useEslint: true,

可以關(guān)閉語法檢查，建議開啟，養(yǎng)成良好的編程習(xí)慣。

?

總結(jié)

以上是生活随笔為你收集整理的项目前端页面框架介绍的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。