扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下vue构建单页面应用的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
成都创新互联长期为成百上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为惠城企业提供专业的成都网站制作、网站设计，惠城网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
具体如下
步骤：
1.使用vue-cli创建项目
2.使用vue-router实现单页路由
3.用vuex管理我们的数据流
4.使用vue-resource请求我们的node服务端
5.使用.vue文件进行组件化的开发
一、目录结构：
二、搭建项目
先安装 vue-cli： sudo npm install -g vue-cli
使用vue-cli构建初始化项目：vue init webpack project（创建webpack项目并下载依赖）
输入命令进入项目： cd my-project
安装依赖： npm install
npm i
开始运行： npm run dev (或输入http://localhost:8080)，在热加载中运行我们的应用
它会去找到package.json的scripts对象，执行node bulid/dev-server.js
在这文件里，配置了Webpack，会让它去编译项目文件，并且运行服务器。
这些都准备好后，我们需要为我们的路由、XHR请求、数据管理下载三个库，我们可以从vue的官网中找到他们。另外我们使用bootstrap作为我的UI库：
npm i vue-resource vue-router vuex bootstrap --save
三、项目开始
初始化项目（main.js）
查看我们的应用文件，我们可以在src目录下找到App.vue和main.js文件中，我们引入Vue和App，且创建了一个vue的实例（因为在router这行引入了App组件router.start(App,'#app')）
import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: 'index.html
App.vue