俗話說,紙上學來終覺淺,絕知此事要躬行,最近兩天學習了下Vue2.0,想做個項目練下手,順便寫個文章方便複習回顧~
1.使用cue-cli創建vue項目
- 進入指定目錄,右擊Git Bash Here打開git命令行,vue init webpack 項目名稱,創建基於webpack的vue項目
- 根據命令行的提示,選擇是否安裝vue-router,是否添加單元測試等,此處均選擇"n",創建一個最基本的項目
- 項目創建完成後使用webstorm打開(樓主的webstorm中沒法創建vue項目,其實上面兩步也可以再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文件的模板
<template>
</template>
<script>
export default {
name: "${NAME}"
}
</script>
<style scoped>
</style>
- 在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和數據定義表格
<div id="table">
<table class="table table-striped table-bordered">
<thead>
<tr>
<td>序號</td>
<td>書名</td>
<td>作者</td>
<td>價格</td>
</tr>
</thead>
<tbody>
<tr v-for="book in books">
<td>{{ book.id }}</td>
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
</div>
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: '<myTable/>'
})
4.稍微調整樣式後,瀏覽器顯示結果如圖: