PC-side web pages use vue and implement responsive vue+bootstrap-vue

1. Create a new vue project in hbuilder

Use npm to load dependencies in the project folder (or open the command in hbuilder)
2. Configure routing
Create a new router folder in src, create a new

index.

Configure routing in main.js

import router from '@/router/index.js'
new Vue({
    
    
  render: h => h(App),
  router
}).$mount('#app')

3. Change the jump in APP.vue (you can browse to the home page normally)

4. Introduce bootstrap-vue
in the project folder, and use hbuilder to specify the directory to run the command

npm install vue bootstrap-vue bootstrap

After loading, configure in main.js

import {
    
     BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

5. Use in the page

<b-container>
	<div class="case-list">
		<b-row>
			<b-col sm="12" md="12" lg="6">
				<div class="item">
					<div class="img-top">
						<img src="@/assets/img/img01.png" alt=""></div>
					<div class="info">
						<div class="more-btn">
							<img src="@/assets/img/read-more.png" alt=""></div>
						<div class="time-box">
							<div class="time-icon">
								<img src="@/assets/img/date.png" alt=""></div>
							<div class="time">2023-8-8</div>
						</div>
					</div>
				</div>
			</b-col>
			<b-col sm="12" md="12" lg="6">
				<div class="item">
					<div class="img-top">
						<img src="@/assets/img/img01.png" alt=""></div>
					<div class="info">
						<div class="more-btn">
							<img src="@/assets/img/read-more.png" alt=""></div>
						<div class="time-box">
							<div class="time-icon">
								<img src="@/assets/img/date.png" alt=""></div>
							<div class="time">2023-8-8</div>
						</div>
					</div>
				</div>
			</b-col>
		</b-row>
	</div>
</b-container>