vue-cli中实现响应式布局的方法

当我们使用Vue-cli构建一个项目时，可以选择一些预设好的模板，比如使用vue-init webpack模板，就会得到一个默认的项目结构。我们可以在此基础上选择性的添加我们需要的库和工具，比如Sass﹑Stylus等CSS预处理器来实现响应式布局。

以下是一些实现响应式布局的方法：

1. 使用css@media查询

media queries是css3最强大、最常用的响应式布局技术。它可以根据不同的屏幕宽度，应用不同的CSS规则。下面是关于如何在Vue-cli中使用CSS media queries的示例。

• 在vue-cli生成的项目中，找到/src/assets/文件夹，创建一个新的CSS文件，例如style.css；
• 在style.css中，我们可以为需要作响应式设计的元素编写样式。如下面的示例，我们为子元素添加了一个自适应宽度和固定的高度。在@media查询中，我们调整了自适应宽度和高度值，使页面元素能够根据不同的屏幕宽度做出响应。

.child {
  width: 100%;
  height: 100px;
}

@media only screen and (min-width: 768px) {
  .child {
    width: 50%;
    height: 200px;
  }
}

@media only screen and (min-width: 1024px) {
  .child {
    width: 33.33%;
    height: 300px;
  }
}

1. 使用Vue.js中提供的组件

Vue提供了很多有助于实现响应式设计的组件。我们可以利用这些组件来快速搭建响应式布局。例如，使用VueCli中的vue-router插件，我们可以在项目中快速定义路由，实现页面跳转和动态加载组件。

以下是一个利用Vue Router实现响应式布局的示例：

• 安装vue-router

npm install vue-router --save

• 在项目的入口文件中引入vue-router

import VueRouter from 'vue-router'

• 定义两个组件作为页面，其中Home组件和About组件分别代表响应式布局下的两个页面。

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

• 定义路由

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]

• 将定义好的路由映射至Vue实例上，并将router设置为true

``
const router = new VueRouter({
routes // short forroutes: routes`
})

new Vue({
router,
template: '

'
}).$mount('#app')
```

通过以上配置后，我们可以在响应式布局下，根据不同屏幕宽度，显示不同的页面内容。

以上两种方法是在Vue-cli中实现响应式布局的方法的示例说明。希望对你有所帮助。