vue做简单app

Vue（读音为 /vjuː/，类似于 view）是一套用于构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的核心库只关注视图层，仅仅是一个用于构建用户界面的渐进式框架。在搭建具体项目时，我们还需要加入其他的库和插件，比如 Vue Router、Vuex、Axios等等，才能进行全面的开发。Vue Router是Vue的官方路由插件，主要用于处理页面跳转和数据传递，而Vuex则是一种状态管理方案，用于管理Vue应用的所有组件的状态，共享数据。

简单的App可以使用Vue通过前端技术来实现，主要核心技术有Vue和后端API接口调用。首先我们需要了解一下相关的技术准备：

1. Vue.js：作为一门前端JavaScript框架，Vue.js提供了一个响应式系统，使构建UI界面更加简单易用。因此，Vue.js是用于构建单页WEB应用程序的完美选择。

2. vue-router：我们通过该库使应用程序能够进行原生移动路由和页面切换。

3. axios：我们使用axios库来从任意类型的后端服务器API进行数据交互。

4. Element UI：Element UI是一套UI库，用于快速且简便地创建UI元素和页面布局。

接下来我们将深入了解如何实现简单的Vue App。

第一步：创建Vue实例

我们需要引入Vue库，并在index.html中创建一个Vue实例。在index.html的body标签中添加如下代码：

```

```

我们创建了一个id为“app”的DIV元素，将其作为Vue实例的目标DOM元素（通过el属性指定）。在这个div中，我们将Vue实例传递给路由器，以便在应用程序中导航到页面。

第二步：创建路由器

现在，我们需要创建一个Vue路由器，以便我们可以在应用程序中导航到不同的页面。在router.js中添加如下代码:

```

import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'home',

component: Home

},

{

path: '/about',

name: 'about',

component: () => import('./views/About.vue')

}

]

})

```

我们先用import语句将Vue和Router库引入到文件中，使用Vue.use()方法安装Vue路由器。我们创建了两个路由页面：Home和About，这些路由页面将被导入到Vue组件中。

第三步：创建组件

现在，我们需要创建Vue组件用于处理路由路径。在src/views文件夹中，可以创建Home.vue和About.vue文件。

Home.vue文件如下：

```

```

About.vue文件如下：

```

```

在上述代码中，我们在两个.vue文件中分别创建了一个div元素，以便在应用程序中显示。这些元素将包含我们想要显示的页面内容。

第四步：编写路由器与组件的映射

我们现在需要将Vue路由器与组件相连，以便在单页应用程序中导航到相应的页面。

在App.vue文件中添加如下代码：

```

```

在上述代码中，我们将路由器与组件进行了映射，在render函数中，我们使用标签来标记应该呈现哪个组件。通过路由至不同的页面，我们能够根据需要切换该标记的内容。

第五步：运行应用程序

我们完成了所有的编程工作，现在运行应用程序，并通过以下命令启动本地服务器：

```

npm run serve

```

在浏览器中浏览localhost:8080/ ，看下应用程序是否正常运行，能否正确呈现不同的页面。

综合上述步骤，我们通过简单的代码实现了一个可运行的Vue App。但实际上App开发过程不仅于此，根据实际需求还需要加入响应式的数据传递、页面公共资源管理、API接口通信和事件交互等等。总之，Vue已成为了前端开发领域中的No.1选择，能够帮助开发人员构建稳定、高效、封装的App应用。