v scodeインストールgitとプロジェクト開発過程

7758 ワード

プロジェクト開発
プロジェクト作成とgithub委託
1.ダウンロードgitリンク
2.nextが終わったら、vscodeを開いて、ファイル->>設定->ユーザー構成にgitインストール経路下のGitフォルダ下のcmdのgit.exeを追加します。
在这里插入图片描述

3.github.comに行ってアカウントを登録し、新しいプロジェクトを作成し、プロジェクト名を書いて他のデフォルトを作成すればいいです。
在这里插入图片描述

4.vscodeを再起動すると、git cloneを使うことができます。


git clone https://github.com/cnhkkat/vuedemomall.git

そしてvscodeにこのフォルダが現れます。このプロジェクトは空いていますので、一つのlicenseしかありません。
在这里插入图片描述

！今はデフォルトのvue cliは4.0.5バージョンです。後で問題が解決できないことがあります。
例えば、「export‘default’（importas‘Vue’）was not found in‘vue’
同様に、端末が間違っていないことを解決することができますが、ホームページを開くかそれともcannot findと言いますか？
このプロジェクトを完成するために
それとも3のバージョンに戻しますか？
だから先に


npm install -g @vue/[email protected]

5.そしてvue create supermallでプロジェクトを作成する
6.supermallの端末の下で
まずgit init生成を行います。gitフォルダ


git init

そしてこの時あるファイルは以下のように赤くなります。
git statusで見る
在这里插入图片描述

ヒントに従ってgit addですべてのファイルを追加します。
再び緑になりました。
在这里插入图片描述

gitはインストール済みではないので、ここにグローバルデフォルトIDを配置します。


git config --global user.email "[email protected]"
 git config --global user.name "Your Name"

そしてまた


git commit -m '     '
git remote add origin https://github.com/cnhkkat/vuedemomall.git 
git push -u origin master

彼はログインするgithubを飛び出すことができます。登録すればいいです。
在这里插入图片描述

フラッシュはマスターに入りました
masterでview codeを見れます。
在这里插入图片描述

ディレクトリ構造を分割
新しいフォルダを作成
astesは資源のスタイルを放します。たとえば、css、cssファイルの下でnormalize.css初期化の基礎スタイルです。
commonは一般的なjsコードのようなものです。
componentsはコンポーネントを置いてまたcomonフォルダとcontentフォルダに分けます。主に業務関連のコードです。例えばMainTabbarは常にコードを変更する必要があります。
networkネットワーク関連
ルート
storeはvuexを放します
ビュービューを置くと、例えば私の分类/ショッピングカート/トップページがあります。
在这里插入图片描述

CSSファイルの導入
cssでも変数Cを定義できます。
在这里插入图片描述

エイリアスの設定
@srcに相当する
在这里插入图片描述

tabbarコンポーネント
前に書いたtabbarフォルダからコピーします。
在这里插入图片描述

contentは業務に関するものです。つまりアイコン文字はここで変えられます。だからMainTabBar.vueを入れます。
commonは公共の普通のファイルをコンポーネントに置くのです。
前に書いたviewをコピーしてトップページ/分類/ショッピングカート/私のはvueファイルを作成しただけで、何も書いていません。
次にrouter-viewを描画しますので、routerをインストールします。
npm install vue-router--save
次にrouterファイルの下でindex.jsを作成します。
関連コードをここに設定します。
vueインポートvue-router
Vuer Routerを使う
VueRouterを作成した例のrouterはここにroutesを置いて、ついでにmodeをhistoryに変えます。
routesを引き出しますので、routers=[]ルートを定義してください。つまり、経路とコンポーネントです。
前に書いたものをコピーします
在这里插入图片描述

最後のステップはmain.jsにrouterをマウントします。
在这里插入图片描述

これでApp.vueでrouter-viewが使えます。
ここにMainTabBarを導入し、MainTabBarを登録し、man-tab-barを使用します。
経路の問題に注意する
在这里插入图片描述

MainTabBarではコピーですので、経路にも注意してください。
在这里插入图片描述

ここでは二つのパスを使っています。一つは別名@/
一つは絶対パスです。プラグインをインストールするとヒントがありますので、両者の違いはあまり感じられません。
大きなプロジェクトの中にたくさんのフォルダがあるかもしれません。ずっと続けば……／優雅ではないので別名を使います。
また別名でここにアイコンが表示されていません。なんだか変です。ここにイメージビューが設置されています。アイコンが表示されます。
同じように、導入の経路問題に注意します。
在这里插入图片描述

そして、ico logoアイコンをコピーします。
在这里插入图片描述

トップページの開発
最初のページのナビゲーションバー
各ページにナビゲーションバーがありますので、monフォルダの下でnavbarフォルダを作成します。
NavBar.vue（一般フォルダ小文字vueファイル大文字）を作成します。
このスタイルを実現したいです。
在这里插入图片描述

左と中、右に分かれています。
なので、スロット外注のdiv設定スタイルには、具体名スロットを使用します。
在这里插入图片描述

父使用flexレイアウトflex:1均等高さは44 pxです。
在这里插入图片描述

ここで作ったのはトップページのナビゲーションバーです。
だからHome.vueにNavBarを導入して登録します。
在这里插入图片描述

トップページのナビゲーションバーだけですので、背景色はピンクです。他のナビゲーションバーは白かもしれません。
だからホームに設置します。NavBarではなく、ホームに設置します。
nav-barにクラスを作ると単独でスタイルを設定できます。
そしてスロット名を使ってセンターと言います。
在这里插入图片描述

var（Ccolor-tint）は変数の背景色がピンクで白です。
在这里插入图片描述

トップページの複数のデータを要求します。
前に書いたaxiosをコピーします。
つまり、networkファイルのrequest.jsです。
そしてトップページの複数のデータを要求するために
urlを便利に管理するためにもう一回包装します。つまりnetworkの下でhome.jsを作ります。
request.jsは自分のパッケージの一つのフレームですので、これらのコンポーネントに向かってhome.jsはhome.vueに向いています。
在这里插入图片描述