Vue从零开发SPA项目
所谓SPA(Single Page Application)，就是单页面应用的意思。
vue的亮点就是我们只需要关注数据的变化，下面演示一下从零开始创建一个独立项目，并且能自定义路由，提交表单。
一、命令行创建项目
使用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来创建好看一点的页面
vue的使用也太简单了吧，太感人了，只需要关注数据的变化！giao~
