vue 2.0+bootstrap実戦(一)

言叶によると、纸は学校に来て结局浅いと感じて、绝対にこの事を知ってお辞儀をして、最近2日Vue 2.0を学んで、プロジェクトをして手を练习したいと思って、ついでに文章を书いて复习して振り返ります~
1.cue-cliを使用してvueプロジェクトを作成する

指定ディレクトリに入り、Git Bash Hereを右クリックしてgitコマンドラインを開き、vue init webpackプロジェクト名、webpackベースのvueプロジェクト

を作成する

コマンドラインのヒントに従って、vue-routerをインストールするかどうか、ユニットテストを追加するかどうかなどを選択します.ここでは「n」を選択し、最も基本的なプロジェクト

を作成します.

プロジェクトの作成が完了したらwebstormを使用して開きます(ビル主のwebstormではvueプロジェクトは作成できませんが、実際には上記の2ステップでwebstormで操作することもできます)、webstormコマンドラインでnpm installまたはcnpm installインストール依存パッケージ

を実行します.

webstormでnpm run dev実行を実行した後、ブラウズで開くhttp://localhost:8081を選択すると、作成に成功したことを示すページが表示されます.
2.vueプロジェクトにbootstrapとjQueryを導入

プロジェクトルートディレクトリのpackage.jsonファイルにbootstrapとjquery依存を追加し、webstormコマンドラインでnpm installまたはcnpm installインストール依存パッケージ

を実行します.

main.jsにjqueryとbootstrapをインポートすると、リフレッシュブラウザはjQueryが正常に導入されていないことを示します.また、組み込みプラグインProvidePlugin自動ロードモジュール

を使用する必要があります.

build/webpack.base.conf.jsにプラグイン構成を追加して構成に追加する必要があります.この場合、プロジェクトではjQueryとBootstrapを使用できます.

3.bootstrapを使用して表コンポーネントを作成する

componentsフォルダの下に.vueファイルを新規作成します.ファイルの基本構造は以下の通りです..vueファイルのテンプレート

としてもよいです.

    export default {
        name: "${NAME}"
    }

scriptタグでテーブルに表示するデータ

を予め定義する.

data() {
      return {
        books: [
          {id: 1, name: '   ', author: '   ', price: 32},
          {id: 2, name: '   ', author: '   ', price: 30},
          {id: 3, name: '    ', author: '   ', price: 24},
          {id: 4, name: '   ', author: '   ', price: 20}
        ]
      }
    }

2.templateタブでbootstrapとデータ定義テーブルを参照する

  

    

      

      

        
  
        
  
        
  
        
  
      
      
      

      

        
{{ book.id }}
        
{{ book.name }}
        
{{ book.author }}
        
{{ book.price }}
      
      
    
  

3.main.jsにコンポーネントを導入し、Vueインスタンスにコンポーネントを埋め込む

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//  jquery bootstrap
import 'jquery/dist/jquery.min'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import myTable from './components/MyTable'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App,myTable },
  template: ''
})

4.スタイルを少し調整した後、ブラウザは結果を図のように表示します.