Ape Creation エッセイ | [Vue 5 分] プロジェクトを作成するための Vue Cli の足場

2 番目のステップに従ってファイルを作成するときにエラーが報告された場合: VSCode がエラーを報告しました: vue : このシステムではスクリプト作成が禁止されているため、ファイル E:\nodejs\node_global\vue.ps1 を追加できません。次に、私の解決策に従ってコマンドを段階的に実行することで解決できます. これは、誰もが確認できるエラーのデモンストレーションです. 間違ったパートナーがない場合, ルート番号はルート番号です. エラーがある場合,あなたは私の方法に従うことができます。

変更が完了すると、次の構成項目が表示されます。

ここにある構成オプションは、以前に作成したプロジェクトによって保存された構成です. 上下のキーを使用して、既存の構成を選択できます. 一般に、手動の自動構成が使用されます. プロジェクトのニーズに応じて構成できます. 私はここでブロガーを使用します. 「機能を手動で選択する」手動カスタム構成. 次に、これを選択すると、次の画面が表示されます。

各機能の詳細な紹介を行います。バイドゥを翻訳することもできます。多くの方法があります。

ここでは 3 つの機能オプションを使用するだけで、[Enter] を選択すると、次のプロンプトインターフェイスに入ります。

クリックすると、次のインターフェイスに入ります。

ルーティングモードを選択

ここでは「履歴」モードになっています。Enter キーを押すか、大文字の Y を入力してから、次のインターフェイスに入ります。

CSSプリコンパイラを選択

さまざまな修正を行うことができます. 使用する必要がある CSS の事前コンパイルを選択できます. ここで [Less] を選択し、選択して Enter キーを押して次のインターフェイスに進みます。

構成の保存方法を選択する

選択した構成は、上の図に示すように、package.json 形式のファイルに保存することです。[In package.json] をクリックすると、次のインターフェイスに入ることができます。

上の図は、後で使用するために現在の構成を保存するかどうかを意味します。現在の構成が選択されている場合、この構成は、後で作成された同じ構成を持つプロジェクトで使用できます。もちろん、保存することもできません。保存する場合は「Y」を入力し、保存する場合はファイル名を入力します。次のように：

次に、ここでダウンロードを待ちます。

プロジェクトに必要なパッケージファイルを自動的にダウンロードする

vue プラグインがダウンロードされ、正常にインストールされるのを待った後、次のインターフェイスが表示され、プロンプト「cd qit」は、ルートディレクトリに入ることができることを意味し、コマンド「npm run serve」を実行できます。私たちのプロジェクト。

2. vue プロジェクトを開始する

1. プロジェクトディレクトリ

上記の操作に従って、構成ファイルは既にダウンロードされており、vue はこれらのファイルをフォルダーにダウンロードしました。

2. プロジェクトを開始する

ターミナルからコマンド「npm run serve」を実行し、ソフトウェアの変更が完了するのを待つと、実行中の当社 Web サイトの URL が表示されます。以下に示すように：

3. ブラウザーがプロジェクトのホームページインターフェイスを開きます。

「Ctrl + クリック」で Web サイトをクリックします: http://localhost:8080/、それだけです。次のように、vue の既定のインスタンスプロジェクトのインターフェイスを表示できます。

この時点で、デフォルトのインスタンスプロジェクトが開始され、完了します。

3. プロジェクト構成ディレクトリとファイル

コマンドライン "vue create qbt" を実行した後、E ディスクに新しいディレクトリ "qbt" が作成され、このプロジェクトの下に多くの構成ディレクトリとファイルがあります。次の図に示すように、これらのファイルの意味とその機能を説明できます。

以下の説明を入力すると、みんなが読むのが面倒になるし、私が書くのも面倒なので、スクリーンショットに直接書き込むだけで、みんなが読むのに便利で、私も理解しています.

1.公開ディレクトリ

public ディレクトリの下には、さらに 2 つのファイルがあります。

1 つは、プロジェクトのアイコンファイルである favicon.ico ファイルです。

もう一つは、プロジェクトのエントリーファイルを生成できるテンプレートファイルであるindex.htmlで、webpackでパッケージ化されたjsやcssもこのファイルに入ります。ブラウザーがプロジェクトにアクセスすると、生成された index.hrtml ファイルがデフォルトで開かれます。このファイルの内容は次のとおりです。

2.src ディレクトリ

また、src ディレクトリの下にディレクトリの簡単な説明を付けるか、単にスクリーンショットにマークを付けます.次のようにシーンをはっきりと見ることができます:

assets: css、画像など、ディレクトリが使用する必要があるリソースファイルを保存します。
components: vue 開発でいくつかの公開コンポーネントを保存します
ルーター: ルーティング構成ファイルを保存します
ビュー: 開発プロセスの login.vue (ログインインターフェース) などのページレベルのコンポーネントと、前に見たインスタンスの 2 つのコンポーネント (about.vue と home.vue) を格納します。

main と js で作成する場合は、設定も行う必要があります. 設定が完了した後の効果は次のようになります。

import { createApp } from 'vue'  //引入你生成的文件
import App from './App.vue'   //引入生成的顶级组件
import router from './router'   //引入路由
import Vue from 'vue'     //引入vue

createApp(App).use(router).mount('#app')  
new Vue({    //创vue实例
    router,   //传入路由
    render:h=>h(App)  //传入顶级组件
}).$mount('#app')  //挂载DOM

3. ルーターディレクトリ

ルーターディレクトリをクリックすると、index.js ファイルが表示されます。これは、ルーティング構成用のファイルです。クリックしてコードを構成します。構成されたコード例は次のとおりです (コメントは既にコード内にあります)。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue' //引入组件
import VueRouter from 'vue-router'   //引入路由
Vue.use(VueRouter)  //注册路由
import Vue from 'vue'   //引入vue文件

//进行我们路由的配置
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

//创建路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),//模式
  routes
})

export default router  //导出路由

4. プロジェクト例のエフェクト表示

ここで公開環境の構築が完了し、準備作業が完全に完了したので、小さな開発実験の羨望を開始します。ナビゲーションバーの機能をクリックして、対応する機能のコンテンツインターフェイスに接続するなど、インスタンスを試すことができます。

まず、このインターフェイスを試してみたいと思います. まず、ビューフォルダー全体とコンポーネントフォルダー内の .vue ファイルを含む、vue の既定のインスタンスコード内のすべてのコンポーネントを削除してから、以下の手順に従って完了します。新しいプロジェクトの開発。

1. 新しい単一ファイルを作成する

削除されたビューフォルダーに、対応する機能を持つ 3 つの新しい .vue コンポーネントを作成します.これら 3 つのコンポーネントは実験に使用されます.これら 3 つの名前は、エディターが設計を完了したときのモジュール名ですので、これを記念として使用してください! 次に、これら 3 つの新しいファイルコンポーネントのコードをそれぞれ次のように記述します。コードは次のようになります。

3 つのモジュールのテンプレートのコードは、分割画面で見ることができます。

2. ルーティング構成

上記と同じ router ディレクトリ下の index.js ファイルでプロジェクトのルーティングを構成します. まず、元のインスタンスのデフォルトのルーティング構成を削除してから、独自のコードを記述します. コードは次のとおりです. :

//import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home.vue' //引入组件
import VueRouter from 'vue-router'   //引入路由
Vue.use(VueRouter)  //注册路由
import Vue from 'vue'   //引入vue文件

//进行我们路由的配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/News',
    name: 'News',
    component: () => import('../views/News.vue')
    //这个方式根据自己的需要进行加载的
  },
  {
    path: '/Remote',
    name: 'Remote',
    component: () => import('../views/Remote.vue')
    //这个方式根据自己的需要进行加载的
  }
]

//创建路由实例
const router = new VueRouter({
  mode: 'history',
  base:process.env.BASE_URL,
  routes
})

export default router//导出路由

3. App.vue でルーティングナビゲーションを構成する

ルーティングを構成したら、App.vue コンポーネントでナビゲーションとルーティングエントリも構成する必要があります。そうしないと、正常にジャンプできません。変更したコードは次のとおりです。

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">首页</router-link>|
      <router-link to="/News">信息</router-link>|
      <router-link to="/Remote">远程</router-link>

    </div>
    <router-view/>
  </div>
</template>

<style lang="less">

#nav {
  padding: 30px;

a {
  font-size: 20px;
}
}
h1 {
  font-size: 40px;
}
</style>

終了！