Vue CLIは
、Vueエコシステムのツール基盤の標準化に取り組んでいます。これにより、さまざまなビルドツールをスマートなデフォルト構成に基づいてスムーズに接続できるため、構成の問題に何日も費やすのではなく、アプリケーションの作成に集中できます。同時に、
イジェクトせずに各ツールの構成を調整する柔軟性も提供します。
公式ドキュメントアドレス：https：//cli.vuejs.org/zh/guide/
1つは、Vue CLI4.5.7スキャフォールディングプロジェクトを作成することです。
1. Webstormnpxを使用して新しいVueCLIスキャフォールディングプロジェクトを作成します
2.デフォルトのディレクトリ構造を図に示します。
3.コマンドラインを開き、を使用しnpm ls --depth 0てプロジェクトのデフォルトの依存関係を表示します
4.npm run serve実行中のプロジェクトを使用します。デフォルトのポートは8080です。
2、Vueルーターの基本的な使用法
Vue Routerは、Vue.jsの公式ルートマネージャーです。Vue.jsのコアと緊密に統合されているため、単一ページのアプリケーションを簡単に構築できます。含まれている機能は次のとおりです。
- ネストされたルーティング/ビューテーブル
- モジュール式のコンポーネントベースのルーティング構成
- ルーティングパラメータ、クエリ、ワイルドカード
- Vue.js遷移システムに基づく遷移効果の表示
- きめ細かいナビゲーション制御
- 自動的にアクティブ化されたCSSクラスとリンクする
- HTML5履歴モードまたはハッシュモード、IE9で自動的にダウングレード
- カスタムスクロールバーの動作
公式ドキュメントアドレス：https：//router.vuejs.org/zh/
1.インストール Vue Router
npm install vue-router
2.新しいjsファイルを作成します
3.書き込みルーティング
import VueRouter from 'vue-router'
import Vue from 'vue'
import Login from "@/components/Login";
// 使用VueRouter
Vue.use(VueRouter);
// 定义路由
const routes = [
{
path: '/',
component: Login
}
];
// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes
});
// 暴露接口
export default router;
4.ルートをルートインスタンスにマウントします
編集main.js
import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
// 关闭生产模式下的提示
Vue.config.productionTip = false;
new Vue({
// 挂载里路由到根实例
router,
render: h => h(App),
}).$mount('#app');
5.ルートコンポーネントApp.Vueを編集します
<template>
<div id="app">
<!-- 路由匹配到的组件将显示在这里 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>
<router-view>これはトップレベルの出口であり、コンポーネントをトップレベルのルーティングと一致させます。同様に、レンダリングされたコンポーネントにも独自のネストを含めることができます<router-view>。
ネストされた出口でコンポーネントをレンダリングするには、VueRouterのパラメーターで子構成を使用する必要があります。子構成はルート構成と同様のルーティング構成配列であるため、ルーティングの複数のレイヤーをネストできます。
import VueRouter from 'vue-router'
import Vue from 'vue'
import Login from "../components/Login";
import Home from "../components/Home";
import UserList from "../components/user/UserList";
import SensitiveWord from "../components/sensitive-word/SensitiveWord";
import Report from "../components/report/Report";
import FileInfo from "../components/file-info/FileInfo";
import Register from "../components/Register";
Vue.use(VueRouter);
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
},
{
path: '/home',
component: Home,
children: [
{
path: '/userList',
component: UserList
},
{
path: '/sensitiveWord',
component: SensitiveWord
},
{
path: '/report',
component: Report
},
{
path: '/fileInfo',
component: FileInfo
}
]
}
];
const router = new VueRouter({
routes
});
export default router
好き、フォロー、あなたのサポートが私の最大の動機です！