使用vue.js创建移动端页面demo

Vue.js 是一款轻量级的前端框架，非常适合构建响应式的移动端页面。以下是一个简单的 Vue.js 创建移动端页面的步骤：

1. **安装 Vue**：
首先，你需要通过npm或yarn来安装Vue CLI（命令行工具）。打开终端，运行：

   npm install -g @vue/cli

2. **创建项目**：
然后创建一个新的Vue项目：

   vue create my-mobile-app

按照提示选择默认配置。

3. **进入项目目录**：
完成安装后，进入新创建的项目目录：

   cd my-mobile-app

4. **准备移动端组件**：
在`src/components`下创建一个名为`MyMobileComponent.vue`的文件，添加基础的移动端布局：

   <template>
     <div class="mobile-view">
       <router-view></router-view>
     </div>
   </template>

   <script>
   export default {
     name: 'MyMobileComponent',
   }
   </script>

   <style scoped>
   .mobile-view {
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }
   </style>

5. **路由设置**：
如果需要，可以配置路由以管理不同的页面。在`src/router/index.js`中添加相应的路由配置。

6. **开发并测试**：
使用`npm run serve`启动开发服务器，然后在浏览器的移动端查看效果，并使用Vue的响应式特性更新内容。

7. **运行应用**：
对于生产环境部署，记得运行`npm run build`打包项目，然后将dist文件夹的内容部署到服务器上。