运用vue做app

Vue是一款轻量级的JavaScript框架，用于构建用户界面。Vue具有简单易用、轻量级、高效等特点，适合开发Web应用、移动端应用等。本文将介绍如何运用Vue来制作一个App，以下是具体步骤。

一、安装Vue和Vue-cli

1.安装Vue

Vue可以通过CDN直接引入，也可以通过NPM安装。使用NPM安装比较常见，可以在命令行中输入以下指令完成安装：

```

npm install vue

```

2.安装Vue-cli

Vue-cli是一个Vue.js的脚手架工具，可以帮助快速创建Vue项目。

打开命令行，输入以下指令完成安装：

```

npm install -g vue-cli

```

二、创建Vue App

使用Vue-cli可以快速创建一个Vue项目，在命令行中输入以下指令完成创建：

```

vue init webpack myapp

```

其中，myapp是项目名称，可以自定义。

三、运行Vue App

在创建好的Vue项目中，可以通过以下指令在命令行中运行项目：

```

cd myapp

npm run dev

```

四、配置App路由

使用Vue Router可以配置App的路由。在命令行中输入以下指令安装Vue Router：

```

npm install vue-router

```

打开src目录下的main.js文件，在文件中引入Vue Router，创建路由对象并将其挂载到Vue实例中。代码如下：

```

import Vue from 'vue'

import VueRouter from 'vue-router'

import App from './App.vue'

import Home from './components/Home.vue'

import About from './components/About.vue'

Vue.use(VueRouter)

const routes = [

{ path: '/home', component: Home },

{ path: '/about', component: About }

]

const router = new VueRouter({

routes

})

new Vue({

el: '#app',

router,

render: h => h(App)

})

```

在以上代码中，通过Vue.use()方法安装Vue Router插件，创建一个路由数组，并且将路由数组传递给VueRouter实例，最后在Vue实例中挂载路由。

五、编写App页面

在src目录下创建一个名为components的文件夹，用于存放App所需的组件。在components文件夹中创建Home.vue和About.vue两个组件，用于展示App的页面。

六、运行App

在命令行中输入以下指令启动App：

```

npm run dev

```

在浏览器中访问http://localhost:8080/，可以看到App已经成功运行。

以上是使用Vue制作App的基本步骤。在实际开发中，还需要通过Vue组件、样式、插件等来进行页面的设计和优化。