015 VUEプロジェクト

A：プロジェクトをビルドします

1.フレーム

　　元に基づいて

　　SRC：

2.index.html

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>ドキュメント</ TITLE> 
</ HEAD> 
<BODY> 
    の<divのid = "アプリ"> 
        <P> 222 </ P > 
    </ div> 

</ BODY> 
</ HTML>

3.main.js

// JS正面玄関
はconsole.log（ "OK"）

//インポートVUE 
インポートVueの'VUE'から

// App.vueが組み込ま
アプリケーション'./App.vue'からインポート]を

ミント-MIの//輸入需要聞き手の
{ヘッダ'ミント-UI'からインポート}; 
Vue.component（Header.name、ヘッダ）; 

//インポートMUIスタイル
「./lib/mui/css/mui.min.css'インポート

//インスタンスを作成ヴュー
VUE新しい新しいヴューはVAR =（{ 
    EL： '＃アプリ'、
    レンダリング：C => C（APP）
}）

4.App.js

<テンプレート> 
  の<divクラス= "アプリ-コンテナ"> 
    <！ -顶部ヘッダー区域- > 
    <！ -使用ミント-UI - > 
    <MT-ヘッダ固定タイトル= "程序员的项目"> </ MT-ヘッダ> 

    <！ -中间的路由ルータビュー区域- > 

    <！ -底部タブバー区域- > 
    <NAVクラス= "MUI-バーMUI-バータブ"> 
      <クラス= "mui-タブ項目のMUI-アクティブ」のhref = "＃のタブバー"> 
        <スパンクラス= "MUI-アイコンMUI-アイコン-ホーム"> </ span>の
        <スパンクラス= "MUI-タブラベル">首页</ span>の
      </a>の
      <a class="mui-tab-item" href="#tabbar-with-chat"> 
        <スパンクラス= "MUI-アイコンMUI-アイコンメール"> 
          <スパンクラス= "MUI-バッジ"> 9 </ span>を
        </ span>の
        <スパンクラス= "MUI-タブラベル">消息</ span>の 
      </a>の
      <a class="mui-tab-item" href="#tabbar-with-contact"> 
        <スパンクラス= "MUI-アイコンMUI-アイコン接触"> </ span>の
        <スパンクラス= "MUI-タブ-ラベル">通讯录</ span>の
      </a>の
      <a class="mui-tab-item" href="#tabbar-with-map"> 
        <スパンクラス=" MUI-アイコンMUI-アイコン・ギア」> </ span>の
        <スパンクラス= "MUI-タブラベル">设置</ span>を
      </a>の
    </ NAV> 
  </ div> 
</テンプレート> 

<スクリプト> 
</ SCRIPT> 


<スタイルLANG = "SCSS 「スコープ> 
.APP容器{ 
  パディングトップ：40ピクセル。
  オーバーフロー-X：隠されました; 
} 
</スタイル>

5.効果

II：フレーム部の他の修飾

1..gitignore

node_modules 
.idea 
.vscode 
.git

2.README.md

＃これは、テストプロジェクトである
##のVUEプロジェクト
CJ ###

3.コピーLincese

3：Gitの

1.初期化

2.アイテムを追加します。

　　地元で提出

3。

おすすめ