用vue-cli脚手架开发APP的步骤

前言

本文主要记录vue-cli脚手架开发app的步骤，如果还未安装vue-cli的请查看vue-cli官方文档有详细过程。

项目地址：vue-cli-demo
项目预览：预览

效果

点击链接实现界面跳转，下方底部可以改成导航栏，中间内容自己修改。

步骤

1.创建模板

运行以下命令来创建一个新项目(项目名自己随意)：

vue create test3

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。这里直接回车即可。

等待下载，下载完会看到看到如下图所示，根据提示，cd hello-world进入目录，然后npm run serve启动

启动好，默认8080端口，用浏览器打开网址，就可以看到vue-cli的模板启动成功

2.删除无用文件

用编辑器打开项目文件，看到目录结构如下：

src/assets下面图片就是打开页面的logo图片没用可以连带着assets目录一起删除。

src/components下面有一个HelloWorld.vue文件就是刚才浏览器打开的页面可以删除。

src下面的App.vue文件修改如下：
只留下简单框架，内容都删了

public/index.html修改如下：
也只留下简单模板

然后浏览器页面一片空白，可以开始写代码

3.写代码

components下面随意写几个页面，目录结构如下：


然后实现路由跳转使用vue-router,首先npm install vue-router --save安装

在src下建src/router/router.js文件管理路由，注册路由

然后在src下面的main.js里面引用，并且挂载

最后一步，修改App.vue文件
只是加了一行代码，router-view 可以当做是一个容器，它渲染的组件是你使用 vue-router 指定的。