vue學習日誌---搭建vue+vscode環境
阿新 • • 發佈：2020-12-14
vue學習日誌
參考文件
使用vscode開發vue
初始化vue專案
-
安裝node.js
-
使用taobao npm映象
npm install -g cnpm --registry=https://registry.npm.taobao.org -
安裝 vue-cli
npm install -g vue-cli -
初始化vue專案
vue init webpack {專案名}根據命令列提示繼續即可，注意最後選擇No，因為要通過cnpm下載專案依賴
-
cd至專案目錄並執行
cnpm install -
執行
cnpm run dev或npm run dev即可啟動專案結果如圖
在專案中整合bootstrap
由於有一定的bootstrap基礎，希望將bootstrap引入vue專案中，但由於bootstrap基於jquery，因此不能直接簡單粗暴的直接插入專案中，在這裡的解決方法是利用bootstrapVue包以解決bootstrap對jQuery的依賴
使用npm引入bootstrapvue
切換至專案根目錄後執行
cnpm install bootstrap-vue bootstrap axios
通過安裝bootstrap-vue包獲取BootstrapVue元件,bootstrap獲取css檔案m,axios幫助我們從themealdb API獲取程式所需的資料
使用cdn
通過將cdn新增至index.html檔案以引入cdn
<!-- public/index.html--> <!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section --> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"/> <!-- Add Vue and BootstrapVue scripts just before the closing </body> tag --> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
設定BootstrapVue
-
將BootstrapVue包匯入程式並註冊
將以下程式碼新增至
main.js//src/main.js import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue) -
匯入Bootstrap Css 檔案
將以下程式碼新增至
main.js//src/main.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
建立Bootstrap元件
結束設定後可以通過引入Bootstrap元件樣例驗證是否引入
//src/components/Navbar.vue
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="success">
<b-container>
<b-navbar-brand href="#">Mealzers</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input
size="sm"
class="mr-sm-2"
placeholder="Search for a meal"
v-model="meal"
></b-form-input>
<b-button
size="sm"
class="my-2 my-sm-0"
type="submit"
@click.prevent="getMeal"
>Search</b-button>
</b-nav-form>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template slot="button-content"><em>User</em></template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-container>
</b-navbar>
</div>
</template>
<script>
export default {
data () {
return {
meal: ''
}
},
methods: {
getMeal () {
}
}
}
</script>
//src/components/Cards.vue
<template>
<b-container>
<div v-if="meals.length">
<b-row>
<div v-bind:key="data.index" v-for="data in meals">
<b-col l="4">
<b-card
v-bind:title="data.strCategory"
v-bind:img-src="data.strCategoryThumb"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
<b-button href="#" variant="primary">View food</b-button>
</b-card>
</b-col>
</div>
</b-row>
</div>
<div v-else>
<h5>No meals available yet