淺談

自從入了這家公司，就沒(méi)分配過(guò)前端的工作了，在上一家還能前后端都寫(xiě)寫(xiě)，現(xiàn)在真是對(duì)vue的代碼真是望塵莫及哇，前幾天跟前端朋友交流前端知識(shí)的時(shí)候，發(fā)現(xiàn)自己腦子里面的前端代碼好像被偷了一樣，趕緊找個(gè)項(xiàng)目練練，雖然現(xiàn)在是java,以后還是想要做全棧呢(^▽)（哈哈哈還在努力勿噴），一下就是對(duì)代碼及知識(shí)點(diǎn)的筆記哦，想學(xué)習(xí)的小伙伴快學(xué)起來(lái)?。?！這個(gè)項(xiàng)目和公司的還是比較類(lèi)似的。

一、背景

簡(jiǎn)單的后臺(tái)管理，項(xiàng)目類(lèi)型不重要，能做到里面技術(shù)點(diǎn)都熟悉就好。

在公司一般二開(kāi)比較多，這個(gè)系統(tǒng)從頭搭建的，為的就是多多了解嘛。因?yàn)槲矣悬c(diǎn)vue基礎(chǔ)，所以可能有些東西簡(jiǎn)單就略過(guò)，不懂得大家都可以發(fā)起討論哈。

二、搭建

創(chuàng)建vue項(xiàng)目

vue create vue-project
因?yàn)槲业陌姹镜停琧reate命令無(wú)法使用:

笑了，好久沒(méi)用版本都跟不上了，那就順便更新下吧，
npm uninstall -g vue-cli
npm install -g @vue/cli

沒(méi)有這個(gè)問(wèn)題的可直接跳過(guò)。我創(chuàng)建的是vue的項(xiàng)目。

vue項(xiàng)目結(jié)構(gòu)簡(jiǎn)介

package.json 項(xiàng)目所需要的各種配置文件，類(lèi)似java中的pom文件。

package-lock.json 這個(gè)文件是在執(zhí)行在npm install的時(shí)候自動(dòng)生成，用以記錄當(dāng)前狀態(tài)下實(shí)際安裝的各個(gè)依賴包的具體來(lái)源和版本號(hào)以及這個(gè)模塊又依賴了哪些依賴。你可以簡(jiǎn)單的理解為對(duì) package.json 里 dependencies 和 devDependencies 的精確描述。

babel.config.js babel作為轉(zhuǎn)譯工具使我們的 JavaScript 代碼正常運(yùn)行在舊的或不支持新語(yǔ)法和api的環(huán)境。而這個(gè)文件就是用來(lái)進(jìn)行 babel 配置的，通常我們不會(huì)過(guò)于細(xì)節(jié)的對(duì)目標(biāo)環(huán)境會(huì)涉及的哪些語(yǔ)法進(jìn)行轉(zhuǎn)換而進(jìn)行一一配置，而是通過(guò)@babel/preset-env這個(gè)包進(jìn)行“智能”預(yù)設(shè)。

src src目錄包含的算是我們真正的“源代碼”了，也是我們開(kāi)發(fā)的主戰(zhàn)場(chǎng)即項(xiàng)目涉及到的頁(yè)面、樣式、腳本都集中在此編寫(xiě)。

src下的文件：
main.js：默認(rèn)為整個(gè)項(xiàng)目的入口文件。
App.vue：是項(xiàng)目的主組件，頁(yè)面的入口文件。
assets：靜態(tài)資源存放目錄，和 public 目錄不同的是這個(gè)目錄會(huì)被打包處理，需要使用相對(duì)路徑進(jìn)行引用。
components：組件存放目錄，項(xiàng)目的公共組件可以存放在此供其他地方使用。

public 任何放置在 public 文件夾的靜態(tài)資源都會(huì)被簡(jiǎn)單的復(fù)制，而不經(jīng)過(guò) webpack（vue-cli依賴的打包工具）。你需要通過(guò)絕對(duì)路徑來(lái)引用它們。

通常，我們只需要關(guān)注public/index.html這個(gè)文件，它會(huì)在構(gòu)建過(guò)程中被注入處理后的 JavaScript 和 CSS 等的資源鏈接。同時(shí)，它也提供了 Vue 實(shí)例掛載的目標(biāo)。

node_modules 之前提到過(guò)，當(dāng)前項(xiàng)目所需依賴的保存目錄。

安裝Element UI庫(kù)

項(xiàng)目創(chuàng)建完成后進(jìn)入文件，安裝：
vue add element
按需引入,在element官網(wǎng)也有介紹：

npm install babel-plugin-component -D
這個(gè)其實(shí)無(wú)所謂，全導(dǎo)入也行。

安裝axios

npm i axios -S

安裝querystring

npm i querystring -S

安裝normalize.css

npm i normalize.css -S

安裝echarts

npm i echarts -S

運(yùn)行

運(yùn)行下試試吶，npm run serve

老鐵沒(méi)毛病。

刪除無(wú)用組件

helloword.vue刪除

app.vue清除demo數(shù)據(jù)，留個(gè)架子。

基礎(chǔ)css樣式導(dǎo)入

base.css為新建的文件，樣式我就是隨便寫(xiě)幾個(gè)：

h1,h2,h3,h4,p,ul,li {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    /* 下劃線 */
    text-decoration: none; 
}
img {
    /* 垂直方向居中 */
    vertical-align: middle;
}
body {
    font-size: 14px;
    font-family:'微軟雅黑', 'Arial Narrow', Arial, sans-serif;
}

引入阿里巴巴矢量圖標(biāo)庫(kù)


測(cè)試圖標(biāo)可用性

icon-icon_baitian-taiyang

重啟項(xiàng)目

ok我的太陽(yáng)出來(lái)了，問(wèn)題不大。

三、頁(yè)面布局

配置路由

我創(chuàng)建項(xiàng)目的時(shí)候是沒(méi)有選擇vue-router的 所以我加下：
安裝最新vue-router：npm install vue-router -S
注意：

vue2搭配vue-router3
vue3搭配vue-router4

我一開(kāi)始 裝錯(cuò)了版本報(bào)錯(cuò)，所以要注意下，以及卸載命令

卸載這個(gè)不兼容的路由版本，重新安裝對(duì)應(yīng)的版本：
npm uninstall vue-router
安裝3版本：
npm install vue-router@3.5.2

新建文件夾router

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/index.vue' 
import Login from '@/views/login/index.vue'

Vue.use(VueRouter)

const routes = [
    {
        path:'/',
        component:Layout
    },{
        path:'/login',
        name:'login',
        component:Login
    }
]


const router = new VueRouter({
    mode: 'history',
    //base: process.env.BASE.URL,
    routes
})

export default router

main.js加入

在路由中配置了基本的登錄頁(yè)面和布局頁(yè)面：

在App.vue加上路由出口,因?yàn)槟J(rèn)是進(jìn)入app.vue頁(yè)面，加上router-view之后會(huì)跳轉(zhuǎn)到所配置的路由的/頁(yè)面

跑下：
可能會(huì)有報(bào)名稱(chēng)不規(guī)范的錯(cuò)誤情況

這是因?yàn)樾掳鎸?duì)文件名監(jiān)測(cè)比較嚴(yán)格：
可以在package.json加入

“no-unused-vars”: “off”, // 當(dāng)存在定義而未使用的變量時(shí)，關(guān)閉報(bào)錯(cuò)
“vue/multi-word-component-names”: “off”, //文件名不規(guī)范關(guān)閉報(bào)錯(cuò)
“vue/no-unused-components”: “off” // 當(dāng)存在定義而未使用的組件時(shí)，關(guān)閉報(bào)錯(cuò)

重新運(yùn)行

注意：
配置路由時(shí)

訪問(wèn)/product/list如果帶/是從根路徑開(kāi)始尋找，所以list不能帶/

布局

按照這個(gè)格式進(jìn)行布局

安裝less
npm install -D less-loader@6.x
也要注意版本問(wèn)題

在layout中新建幾個(gè)頁(yè)面，用來(lái)作為布局的組件

flex布局（彈性盒子）

在layout的index中進(jìn)行布局：

<template>
  <div class="layout">
      <div class="menu">
      <Menu></Menu>
    </div>
    <div class="content">
      <Content></Content>
    </div>
  </div>
  
</template>

<script>
import Menu from './menu/index.vue'
import Content from './content/index.vue'
export default {
    components:{
      Menu,
      Content
    }
}
</script>
<style lang="less" scoped>
  .layout{
    display: flex;
    .menu {
      width: 200px; //左邊200px
      background: gainsboro;
    }
    .content {
      flex: 1;//占滿剩余 
      background: rebeccapurple;
    }
  }
</style>

呈現(xiàn)的效果：

固定布局

<template>
  <div class="layout">
      <div class="menu">
      <Menu></Menu>
    </div>
    <div class="content">
      <Content></Content>
    </div>
  </div>
  
</template>

<script>
import Menu from './menu/index.vue'
import Content from './content/index.vue'
export default {
    components:{
      Menu,
      Content
    }
}
</script>

<style lang="less" scoped>
  .layout{
    // display: flex;
    .menu {
      width: 200px; //左邊200px
      background: gainsboro;
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
    }
    .content {
      // flex: 1;//占滿剩余 
      background: rebeccapurple;
    }
  }
</style>

固定布局配置路由

整體捋一遍哈：

這樣在訪問(wèn)/路徑時(shí)，內(nèi)容區(qū)二級(jí)路由就只指向home.vue頁(yè)面：

后面內(nèi)容看主頁(yè)專(zhuān)欄下一篇文章文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-502393.html

到了這里，關(guān)于Vue+Element UI 生鮮管理系統(tǒng)簡(jiǎn)介及項(xiàng)目搭建，頁(yè)面布局（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！