Vue从零开发SPA项目

所谓SPA(Single Page Application)，就是单页面应用的意思。
vue的亮点就是我们只需要关注数据的变化，下面演示一下从零开始创建一个独立项目，并且能自定义路由，提交表单。

目录

• 一、命令行创建项目
  • 使用vue-cli
  • 创建webpack项目
• 二、自定义路由
  • 绝对路由
  • 带参数的路由
  • 嵌套路由
• 三、表单交互示例

一、命令行创建项目

使用vue-cli

安装

npm install vue-cli -g

界面创建项目
安装完成后运行

vue ui

打开http://localhost:8000，会看到如下界面

*创建项目

下一步，我选择了默认

创建完后目录如下

也可以直接用命令行创建

vue create qionghe

启动项目，更多请查看cli使用文档

我们进入目录chenqionghe，执行npm run serve

 cd chenqionghe
npm run serve

打开界面如下http://localhost:8080/

创建webpack项目

安装

npm i -g @vue/cli-init

创建项目

vue init webpack chenqionghe

一路回车

安装完成目录如下

启动

npm run dev

打开http://localhost:8080/#/如下

二、自定义路由

关于路由的使用可以参考查看：router文档

绝对路由

新建路由文件Cqh.vue

router/index.js引入这个新路由，并指定一个自己的路由

访问：http://localhost:8080/#/cqh，看到如下结果

这样我们就可以自定义路由了

带参数的路由

比如在后面加上:id，如下

使用{{ $route.params.键名}}获取，如下

运行结果

可以看到，id已经能正常的获取和渲染了

嵌套路由

就是一个分组路由的概念，我们把component/Cqh.vue修改一下

<template>
  <div class="hello">
    <router-link to="/cqh/testA">TestA</router-link>
    <router-link to="/cqh/testB">TestB</router-link>
    <router-view/>
  </div>
</template>

这个router-link就是使用路由的方式，这里我加了两上新路由/cqh/testA,/cqh/testB
这个<router-view/>就是子路由要渲染的地方，再添加一个对应的子路由，如下

访问http://localhost:8080/#/cqh，如下

分别点击TestA和TestB，

这里的页面切换非常平常，体验相当好！

三、表单交互示例

有路由了，咱们后端关注的还是数据交互，少不了表单，下面来个简单的示例TestForm，代码如下

<template>
  <div class="hello">
    <h1>{{ name }}</h1>

    名字：<input type="text" v-model="form.name"/><br>
    年龄：<input type="text" v-model="form.age"/><br>
    性别：<input type="text" v-model="form.sex"/><br>

    <button @click="mySubmit">提交</button>

    <p>{{form.msg}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: '雪山飞猪',
        form: {},
      }
    },
    methods: {
      mySubmit() {
        let msg = "您提交的数据是：" + JSON.stringify(this.form);
        this.$set(this.form, 'msg', msg)
      }
    }
  }
</script>

运行如下

再提交一下数据，测试一下

可以看到已经能拿到表单的数据了，有了表单数据，就可以自行请求接口了。

正式项目可以考虑使用ElementUI来创建好看一点的页面