タイトル
環境
前提条件として環境がありnode.js、webpackVUE-CLI がインストールされている必要があります。私のバージョンは@vue/cli 5.0.8
Vue CLI は、開発者が Vue.js プロジェクトを迅速に作成できるようにする、Vue.js に基づく迅速な開発ツールです。Vue CLI プロジェクトを実行するには、次の手順があります。
1. Vue CLI のインストール: npm または Yarn を使用して Vue CLI をインストールします。次のコマンドを使用できます。
npm install -g @vue/cli
2. Vue プロジェクトの作成: Vue CLI を使用して、新しい Vue プロジェクトを作成します。次のコマンドを使用できます。
vue create app
このうち、app はプロジェクト名です。
3. Vue プロジェクトを実行します。プロジェクト ディレクトリに入り、次のコマンドを使用して Vue プロジェクトを実行します。
cd app
npm run serve
4. Vue アプリケーションにアクセスします。ブラウザで実行中の Vue プロジェクトのアドレスにアクセスします。これはターミナルに表示されます。デフォルトでは、アプリケーションのアドレスは http://localhost:8080/ です。
プロジェクトをパッケージ化する必要がある場合は、次のコマンドを使用できます。
npm run build
これにより、パッケージ化されたアプリケーションを含む dist ディレクトリが生成されます。具体的なインストール手順については、vue-cliを参照してください。
ロードされたディレクトリ:
VUE2ディレクトリ
公共
静的リソース ファイルを配置します。このフォルダー内の静的ファイル リソースは、webpack がパッケージ化するときに、そのままの状態で dist フォルダーにパッケージ化されます。
資産
各コンポーネントに共通の静的リソースを配置し、パッケージ化する際はモジュールとして扱い、JSファイルにパッケージ化します。
コンポーネント
グローバル コンポーネントである非配線コンポーネントを配置します。
main.js
プログラム エントリ ファイルが最初に実行されます。
babel.config.js
バベル設定ファイル。Babel は JavaScript コンパイラーです。
パッケージ.json
プロジェクトによって導入された依存関係情報の構成は、vue-cli-service serve --openブラウザーを直接開くことで開始できます。
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
view.config.js
自動的にロードされるオプションの VUE 構成ファイル。プロジェクトの開始時にロードされます。eslintmodule.exports検出をオフにするなど、公開された構成を使用します。
module.exports = defineConfig({
// 关闭eslint检测
lintOnSave: false
})
詳細については、vue-config-jsを参照してください。
プロジェクトルーティング分析
VUE ではルーティングがvue-router実装されており、コアはルーティング アドレスに基づいてルーティング コンポーネントを見つけます。これはkey-value操作に相当します。このプロジェクトは上中下構造になっており、上と下のスタイルはそのままで途中で変化しますが、真ん中の検索部分は共通コンポーネントとして分離することができます。
上部：
底：
これら 2 つの部分はそのまま共通コンポーネントにすることができます。
ヘッダーと下部コンポーネント: ヘッダーとフッターは非ルーティング コンポーネントとして使用され、ホーム (ホームページ) と検索 (検索)、およびログインはルーティング コンポーネントとして使用されます。
ヘッダーとフッターの非配線コンポーネントが完了しました
VUE プロジェクトのロジックを完成するには、まずページを描画し、コンポーネントを分割し、データを動的に表示し、動的データ ビジネスを処理します。コンポーネントを作成するときは、その構造、スタイル、静的リソースを調べる必要があります。
ヘッダーの例
css スタイルを制御するためにlessを使用するプロジェクトでは、less and low-loaderをインストールし、コマンドを直接実行するnpm install --save less less-loader@5かpackage.json、依存関係をファイルに直接追加してからnpm installダウンロードする必要があります。
componentsフォルダーの下に新しいディレクトリ ヘッダーを作成します。
less スタイルを識別するには、以下を追加する必要があることに注意してください。lang="less"
<style scoped lang="less">
.footer {
background-color: #eaeaea;
.footer-container {
width: 1200px;
margin: 0 auto;
padding: 0 15px;
.footerList {
padding: 20px;
border-bottom: 1px solid #e4e1e1;
border-top: 1px solid #e4e1e1;
overflow: hidden;
padding-left: 40px;
.footerItem {
width: 16.6666667%;
float: left;
h4 {
font-size: 14px;
}
.footerItemCon {
li {
line-height: 18px;
}
}
&:last-child img {
width: 121px;
}
}
}
.copyright {
padding: 20px;
.helpLink {
text-align: center;
li {
display: inline;
.space {
border-left: 1px solid #666;
width: 1px;
height: 13px;
background: #666;
margin: 8px 10px;
}
}
}
p {
margin: 10px 0;
text-align: center;
}
}
}
}
</style>
しかし、スタイルがめちゃくちゃになっていることがわかり、reset.css を使用して以前のデフォルト スタイルをクリアする必要がありました。
リセット.css
@import "./iconfont.css";
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
margin: 0;
padding: 0;
}
/* 设置默认字体 */
body,
button, input, select, textarea {
/* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
color: #333;
}
h1 {
font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 {
font-size: 16px; }
h3 {
font-size: 14px; }
h4, h5, h6 {
font-size: 100%; }
address, cite, dfn, em, var, i{
font-style: normal; } /* 将斜体扶正 */
b, strong{
font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt {
font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small {
font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */
ul, ol {
list-style: none; }
/* 重置文本格式元素 */
a {
text-decoration: none; color: #666;}
/* 重置表单元素 */
legend {
color: #000; } /* for ie6 */
fieldset, img {
border: none; }
button, input, select, textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 重置 hr */
hr {
border: none;
height: 1px;
}
.clearFix::after{
content:"";
display: block;
clear:both;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html {
overflow-y: scroll; }
a:link:hover{
color : rgb(79, 76, 212) !important;
text-decoration: underline;
}
/* 清除浮动 */
.clearfix::after {
display: block;
height: 0;
content: "";
clear: both;
visibility: hidden;
}
次に、index.html ページで次のようにします。<link rel="stylesheet" href="./reset.css">
ヘッダーコンポーネントを使用する
App.vueこのコンポーネントを登録するには、次を使用します。
App.vue コード:
<template>
<div>
<!--使用组件-->
<Header></Header>
<router-view></router-view>
<Footer v-show="$route.meta.show"></Footer>
</div>
</template>
<script>
// 导入组件
import Header from './components/Header';
import Footer from './components/Footer';
export default {
name: 'App',
components: {
Header,
Footer
},
mounted(){
// 只发一次
this.$store.dispatch('categoryList');
}
}
</script>
<style>
</style>
フッターコンポーネントの操作手順はヘッダーの場合と同じです。
ルーティングコンポーネントの構築
プロジェクトのルーティングコンポーネントはHome、Search、Login、Registerの 4 つに分かれており、vue-routerルーティングをインストールする必要がありますnpm install --save vue-router。ルーティング コンポーネントは通常、ページ フォルダーまたはビューフォルダーの下に配置されます。
ルーターの Index.js は、これらのルーティング コンポーネントを導入し、外部に公開する必要があります。
// 导入路由组件
import Vue from 'vue';
import VueRouter from 'vue-router';
// 使用插件
Vue.use(VueRouter);
// 引入路由组件
import Home from '@/pages/Home';
import Search from '@/pages/Search';
import Login from '@/pages/Login';
import Register from '@/pages/Register';
// 配置路由
export default new VueRouter({
// 配置路由
routes: [
{
path: "/home",
component: Home,
meta: {
show: true
}
},
{
path: "/search/:keyword?",
component: Search,
meta: {
show: true
},
name: 'search'
},
{
path: "/login",
component: Login,
meta: {
show: false
}
},
{
path: "/register",
component: Register,
meta: {
show: false
}
},
{
// 页面重定向，访问/重定向到首页
path: "*",
redirect: "/home"
},
]
});
上記ではこれらのコンポーネントのみが公開されており、これらのコンポーネントは以下main.jsに登録する必要があります。
ルータを宣言した後、コンポーネントが登録されている限り、コンポーネントは$route属性を持ち、主にルートによって運ばれるパラメータ情報を受け取ります (たとえば$router、$routerルートジャンプを実行したり、パラメータを運ぶために使用されます)。
ルーティングの詳細については、vue-router 公式 Web サイトを参照してください。
最後に、ルーティングを有効にしたい場合は、それを App.vue に追加する必要があります。<router-view/>
宣言型ナビゲーション
画像内の 3 つのリンクを宣言型ナビゲーションの例として使用します。画像をクリックしてホームページに入るなど、対応するリンクをクリックして対応するページに移動します。
具体的な実装:ルートジャンプでrouter-linktoタグを使用します。
プログラムによるナビゲーション
プログラムによるナビゲーションは、主にパラメーター ジャンプを伴うルーティングに使用されます。たとえば、キーワード検索:
検索ボタンで定義したgoSearch()メソッド
このメソッドを実装します。内部実装については後で詳しく説明します。
フッターコンポーネントの表示と非表示を切り替える
ログインまたは登録時に下部コンポーネントを非表示にしたい場合は、ルーティング メタ情報を使用して、metaルーティング構成ファイル Index.js で構成できます。
このフッター コンポーネントが適用される場所で get 値を使用するだけです$route.meta.show。
パラメータを渡すルート
ルーティングパラメータの書き方は主に2通りあり、その違いは公式サイトで詳しく解説されていますが、要はスペースを占有することはできるがparamsスペースを占有することはできないということです。queryparamsquery
上記ではプログラム ナビゲーションについて簡単に説明しましたが、次にプログラム ナビゲーションがパラメーターを転送する方法を見てみましょう。
キーワードクエリを例に挙げます。
文字列の受け渡しはテンプレートのパラメーターの受け渡しに参加します
// 字符串传参
this.$router.push("/search/"+this.keyword+"?k="+this.keyword.toUpperCase())
.catch(err => err)
// 模板传参
this.$router.push(`/search/${
this.keyword}?k=${
this.keyword.toUpperCase()}`)
.catch(err => err)
パラメータを渡すオブジェクト
パラメータを渡す最も一般的な方法は、オブジェクトを使用することです。
// 对象传参
this.$router.push({
name: "search",
params: {
keyword: this.keyword
},
query: {
k: this.keyword.toUpperCase()
}
})
name: "search"このルートを識別するには、対応するルートでパラメータを宣言する必要があり/search、直接使用することはできませんpath。
指定した値を取得するには$route.params.keywordwith を使用します。$route.query.k
プッシュを書き換えて置換する
Vue に付属の Push または Repalce メソッドを直接使用します。同じルートを複数回クリックすると、コンソールにエラーが報告されます。NavigationDuplicatedコードの機能には影響しませんが、赤色のエラーは許容できません。
これは一般的に固定された書き込み方法であり、上記の問題を解決するために使用できます。
// 先把VueRouter原型对象的push,先保存一份
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;
// 重写push|replace
// 第一个参数：告诉原来push方法，你往哪里跳转（传递哪些参数）
// 第二个参数：成功的回调
// 第三个参数：失败的回调
// call || apply区别
// 相同点，都可以调用函数一次，都可以篡改函数的上下文一次
// 不同点：call与apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组
VueRouter.prototype.push = function (location, resolve, reject) {
if (resolve && reject) {
originPush.call(this, location, resolve, reject);
} else {
originPush.call(this, location, () => {
}, () => {
})
}
}
VueRouter.prototype.replace = function (location, resole, reject) {
if (resole && reject) {
originReplace.call(this, location, resole, reject);
} else {
originReplace.call(this, location, () => {
}, () => {
})
}
}
3 レベルの連携コンポーネントの分割
第 3 レベルのリンケージ コンポーネントは、ホーム、検索、詳細などのコンポーネントで使用され、パブリック グローバル コンポーネントにすることができますTypeNav。
Header コンポーネントを参照して静的リソースをインポートした後、それをmain.jsグローバル コンポーネントとして登録します。利点は、importプロジェクト内のどこでも必要なく使用できることです。Header はmain.jsグローバル コンポーネントとして登録されていなかったため、以前にインポートされました。
// 三级联动全局组件
import TypeNav from '@/components/TypeNav';
// 注册为全局组件 arg1: 组件名称 arg2: 当前组件
Vue.component(TypeNav.name,TypeNav)
次に、<TypeNav/>それを Home コンポーネントの Index.vue に登録します。
次に、前の手順に従って、ホームページの残りのページを登録用のコンポーネントに分割します。
これらのコンポーネントをインポートして登録します。
付録
最後に表示されたスクリーンショット情報は次のとおりです。
