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

一、命令行创建项目

使用vue-cli

安装

npm install vue-cli -g

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

vue ui

打开http://localhost:8000,会看到如下界面
Vue从零开发SPA项目-LMLPHP

*创建项目
Vue从零开发SPA项目-LMLPHP

下一步,我选择了默认
Vue从零开发SPA项目-LMLPHP

创建完后目录如下
Vue从零开发SPA项目-LMLPHP

也可以直接用命令行创建

vue create qionghe

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

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

 cd chenqionghe
npm run serve

Vue从零开发SPA项目-LMLPHP

打开界面如下http://localhost:8080/
Vue从零开发SPA项目-LMLPHP

创建webpack项目

安装

npm i -g @vue/cli-init

创建项目

vue init webpack chenqionghe

一路回车
Vue从零开发SPA项目-LMLPHP

安装完成目录如下
Vue从零开发SPA项目-LMLPHP

启动

npm run dev

Vue从零开发SPA项目-LMLPHP

打开http://localhost:8080/#/如下
Vue从零开发SPA项目-LMLPHP

二、自定义路由

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

绝对路由

新建路由文件Cqh.vue
Vue从零开发SPA项目-LMLPHP

router/index.js引入这个新路由,并指定一个自己的路由
Vue从零开发SPA项目-LMLPHP

访问:http://localhost:8080/#/cqh,看到如下结果
Vue从零开发SPA项目-LMLPHP

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

带参数的路由

比如在后面加上:id,如下
Vue从零开发SPA项目-LMLPHP

使用{{ $route.params.键名}}获取,如下
Vue从零开发SPA项目-LMLPHP

运行结果
Vue从零开发SPA项目-LMLPHP
可以看到,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,如下
Vue从零开发SPA项目-LMLPHP

分别点击TestA和TestB,
Vue从零开发SPA项目-LMLPHP

Vue从零开发SPA项目-LMLPHP

这里的页面切换非常平常,体验相当好!

三、表单交互示例

有路由了,咱们后端关注的还是数据交互,少不了表单,下面来个简单的示例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>

运行如下
Vue从零开发SPA项目-LMLPHP

再提交一下数据,测试一下
Vue从零开发SPA项目-LMLPHP

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

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

vue的使用也太简单了吧,太感人了,只需要关注数据的变化!giao~

01-01 02:30