Vueの最初のプロジェクトファイル構築ノート-すべてのステップが記録されます

Vueの初期化ファイル操作

このプロジェクトで使用できるテクノロジー：

        用的技术: vue, vue-router, axios, token, localStorage, ElementUI, echarts, 富文本编辑器

プロジェクトの初期化の目標：

• プロジェクトの作成（vue-cli）
• プロジェクトカタログを調整します（エンタープライズ開発に従います）
• gitコードホスティング（github、gitee）
• サードパーティのライブラリElementUIを導入する
• パッケージリクエストモジュール

vue-cliを使用してプロジェクトの作成を始めましょう

プロジェクトの作成コマンド：vue create project name

次に3つのオプションが表示されます。

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features //让我们选第三个自己选择初始项，这样可以更全面的开发

最初のアイテムが選択されますが、基本的にはこのように選択できます

あなたが選んだ後はそれだけです、素晴らしい、あなた自身に親指を上げてください！

次に、リリース直後に安定していないvueバージョン3.0を選択します。ここでは、2.0を選択します。

ここで履歴モードにするかどうかを選択します

履歴モードでは一部の操作を実行するためにバックグラウンドが必要になるため、ハッシュモードを選択するにはどうすればよいですか。

ここでcssの前処理を選択します（主流のLessとSass）

ここで標準を選択するには、Eslint（コード標準化）を選択します。

eslintを初めて使用する人が非常に満足できるオプションです。それ以降、私たちは本当にバグを書いています。もちろん、コードをより標準化することでもあります。

次に、次のプラグインとESLintルールテーブルhttps://cn.eslint.org/docs/rules/は、いくつかの単純なバグの解決にインテリジェントに役立ちます。

次に、検証のタイミングを選択します

構成ファイルのアップグレード方法を選択します（別のファイルに生成することを選択します）

最後にインストールを待ち、プロジェクトの初期化が完了します

行って、プロジェクトを開始します

npm run serve

プロジェクトの作成が完了したら、リモートウェアハウスに送信する必要があります。githubとgiteeの両方がここで利用できます。giteeコードクラウドを選択します。

VueCLIがプロジェクトを作成すると、vue-cliは自動的にGitリポジトリを初期化し、デフォルトで初期コードに基づいてコミットを実行しました。
リモートウェアハウスを作成し、ローカルウェアハウスをリモートウェアハウスにプッシュできます。

CodeCloudでリモートウェアハウスを作成しましょう

次に、コードをリモートウェアハウスにプッシュします

httpsとsshはどちらも問題なく、httpsはアカウントパスワードを1回入力する必要があり、sshを構成する必要があります

git remote add origin https和ssh路径
git push -u origin master//这里-u之后 以后git push 默认推送到名为origin master的远程仓库

-uは、プッシュコマンドを送信されたウェアハウスアドレスおよびウェアハウスブランチに関連付けることを意味し
ます。関連付けられると、今後はgit pushのみが必要になります。
エラーが表示されない場合は、コードクラウドに戻って、コードが送信されたかどうかを確認できます。成功

もちろん、次のエラーも表示される場合があります。解決策を見てみましょう

パスワードまたはユーザー名が間違って入力された場合、間違ったパスワードが記憶されているため送信できません。
解決策：コントロールパネル-"ユーザーアカウント="ウィンドウ資格情報の管理== "ローカル資格情報を削除し、ユーザー名とパスワードを再入力します。

sshを使用する場合は、公開鍵を構成する必要があります

githubとgiteeの公開キーは同じであるため、再度取得する必要はありません。そうでない場合は、githubも同期的に変更する必要があります。
-1。公開鍵と秘密鍵をローカルで生成します（再度生成する必要はありません）
-2。以前に公開鍵をgithubに貼り付ければ、準備が整います。CodeCloud
も構成する必要があります。2番目の手順は

、ローカル公開鍵を貼り付けることだけです。それはCodeyunのこの場所で行われます

次のステップは、初期化ディレクトリ全体の構造を調整することです

以下の操作をより適切に実装するために、全体的なディレクトリ構造にいくつかの調整を加えます。

目的：

1. 初期化されたいくつかのデフォルトファイルを削除します
2. 削除されていないファイルを変更する
3. 必要なディレクトリ構造を追加します

ファイルを変更する

router /index.jsを変更します

App.vueを変更する

以下の不要なファイルを削除してください

• src / views / About.vue
• src / views / Home.vue
• src / components / HelloWorld.vue
• src / assets / logo.png

次のディレクトリを追加します

• src / apiディレクトリ
  • ストレージインターフェイスモジュール（ajaxリクエストインターフェイスを送信するモジュール）
• src / utilsディレクトリ
  • いくつかのツールモジュールを保存します（自己パッケージ方式）
• src / stylesディレクトリ
  • base.lessファイルを追加し、グローバルスタイルを設定します
  • main.jsにグローバルスタイルインポート './styles/base.less'をロードします
    
• src / assetsディレクトリ
  • プロジェクトで使用される追加資料

カタログ効果は次のとおりです。

この時点で、私たちのプロジェクトは集合的に構築されています。私はあなたに毎日そして毎年以上の幸運を祈っています

                                                                             不见经传： 焦小布
                                                                                     
                                                               2020-10-25   星期日   晚9：00点