Vue+Element UIフレッシュ管理システムの導入とプロジェクト構築、ページレイアウト(1)

について話す

今の会社に入ってからはフロントエンドの仕事は一切任せていないのですが、前の会社ではフロントエンドもバックエンドも書けたのですが、今ではVueのコードが全く合わなくなってしまいました。数日前にフロントエンドの友人とフロントエンドの知識を交換したところ、私の頭の中にあるフロントエンドのコードが盗まれたようだったので、すぐに練習できるプロジェクトを見つけました。今は Java ですが、まだやりたいです将来的にはフルスタックを実行する予定です ( ^▽ ) (ははは、私はまだスプレーしないように努めています)、知識ポイントに関するコードとメモについては正しいです。学びたい友達はすぐに学びましょう! ！！このプロジェクトは同社のプロジェクトとよく似ています。

1. 背景

シンプルなバックグラウンド管理。プロジェクトの技術的なポイントをすべて理解していれば、プロジェクトの種類は重要ではありません。

一般的に副業求人が多い会社ですが、それをより詳しく知るためにゼロから構築した制度です。私には Vue の基礎が少しあるので、いくつかの項目は単純にスキップされる可能性がありますが、理解できない人でも議論を始めることができます。

2、構築する

vueプロジェクトを作成する

vue create vue-project
私のバージョンが低いため、create コマンドは使用できません。

笑、ずっと使ってなかったバージョンが追いつかないのでついでにアップデートしましょう
npm uninstall -g vue-cli
npm install -g @vue/cli

この質問がない場合は、直接スキップしてください。vueプロジェクトを作成しました。

Vue プロジェクト構造の概要

package.jsonプロジェクトに必要なさまざまな構成ファイルは、 Java の pom ファイルに似ています。

package-lock.jsonファイルは、npm install の実行時に自動的に生成され、現在の状態で実際にインストールされている各依存パッケージの特定のソースとバージョン番号、およびこのモジュールが依存する依存関係を記録するために使用されます。これは、package.json 内の依存関係と devDependency の正確な説明として単純に理解できます。

babel.config.js Babel は、新しい構文や API をサポートしていない古い環境や環境で JavaScript コードを正常に実行できるようにするための変換ツールとして使用されます。そして、このファイルは babel 設定に使用されます。通常、ターゲット環境に含まれる構文を変換して 1 つずつ設定するほど詳しくは行いませんが、@babel/preset-env パッケージを使用して「スマート」な事前設定を実行します。プリセットのセットアップ。

src src ディレクトリには実際の「ソース コード」が含まれており、開発の主戦場でもあります。つまり、プロジェクトに関係するページ、スタイル、スクリプトはすべてここに記述されます。

src配下のファイル:
main.js : デフォルトはプロジェクト全体のエントリーファイルです。
App.vue : プロジェクトの主要コンポーネントであり、ページのエントリ ファイルです。
assets : 静的リソース格納ディレクトリ。このディレクトリはパッケージ化され、相対パスを使用して参照する必要があるという点でパブリック ディレクトリとは異なります。
コンポーネント: プロジェクトのパブリック コンポーネントを他の場所で使用するために保存できるコンポーネント ストレージ ディレクトリ。

public public フォルダーに配置された静的リソースはすべて、webpack (vue-cli が依存するパッケージ化ツール) を経由せずに単純にコピーされます。絶対パスで参照する必要があります。

通常、public/index.html ファイルに注意するだけで済みます。このファイルには、構築プロセス中に処理された JavaScript や CSS などのリソース リンクが挿入されます。同時に、Vue インスタンスをマウントするターゲットも提供します。

前に述べたように、node_modules は現在のプロジェクトが依存するストレージ ディレクトリです。

Element UI ライブラリをインストールする

プロジェクトが作成されたら、ファイルを入力し、
vue add element
必要に応じて install:import します。これは element の公式 Web サイトでも紹介されています。

npm install babel-plugin-component -D
これは実際には問題ではなく、すべての import で問題ありません。

axiosをインストールする

npm i axios -S

インストールクエリ文字列

npm i querystring -S

Normalize.cssをインストールする

npm i normalize.css -S

eチャートをインストールする

npm i echarts -S

走る

試しに走らせてみると、npm run serve

古いアイアンには何の問題もありません。

無駄なコンポーネントを削除する

helloword.vue の削除

app.vue はデモ データをクリアし、シェルフを残します。

基本的な CSS スタイルのインポート

Base.css は新しいファイルです。いくつかのスタイルを記述するだけです。

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;
}

Alibaba ベクター アイコン ライブラリを導入して


アイコンの使いやすさをテストする

icon-icon_baitian-taiyang

プロジェクトを再起動してください

。太陽が出てきました。問題は大きくありません。

3. ページレイアウト

ルーティングを構成する

プロジェクトを作成したときに vue-router を選択しなかったため、次の内容を追加しました:
最新の vue-router をインストールします:npm install vue-router -S
注:

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

間違ったバージョンをインストールし、最初にエラーが報告されたため、注意してアンインストール コマンドを実行してください。

この互換性のないルーティング バージョンをアンインストールし、対応するバージョンを再インストールします:
npm uninstall vue-router
バージョン 3 をインストールします:
npm install [email protected]

新しいフォルダールーターを作成する

インデックス.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 は、

ルート内の基本的なログイン ページとレイアウト ページを構成するために追加されます。

/デフォルトでは app.vue ページに入るようにルーティング出口を App.vue に追加します。router-view を追加すると、設定されたルーティングページにジャンプします。

実行ダウン:
レポートの名前にエラーがある可能性があります。

これは、新しいバージョンではファイル名の監視がより厳密になっているためです
。package.json に追加できます。

"no-unused-vars": "off", // 定義されているが使用されていない変数がある場合、エラーをオフにします。
"vue/multi-word-component-names": "off", // ファイル名がそうでない場合標準化され、エラーをオフにします
"vue/no-unused-components": "off" // 未使用のコンポーネントが定義されている場合のエラー報告をオフにします

再実行

知らせ：
ルーティングを設定するときに、アクセス ベルトがルート パスから検索されるため

、リストから取得できない場合/product/list//

レイアウト

この形式のレイアウト

インストールを減らす
npm install -D [email protected]
場合はバージョンの問題に注意してください

レイアウトコンポーネントとして使用するために、レイアウト内にいくつかの新しいページを作成します。

フレックスレイアウト（エラスティックボックス）

レイアウトのインデックス内のレイアウト:

<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>

得られた効果は次のとおりです。

固定レイアウト

<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>

固定レイアウト構成ルーティング

全体的に見てみましょう。

このようにして、/パスにアクセスするとき、コンテンツ領域のセカンダリ ルートは home.vue ページのみを指します。

次の内容については、ホームページ列の次の記事を参照してください。