189 8069 5689
这篇文章将为大家详细讲解有关vue如何构建单页面应用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联是专业的朝阳网站建设公司，朝阳接单;提供成都网站设计、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行朝阳网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
1. 为什么要 SPA？
SPA： 就是俗称的单页应用（Single Page Web Application）。
在移动端，特别是 hybrid 方式的H5应用中，性能问题一直是痛点。 使用 SPA，没有页面切换，就没有白屏阻塞，可以大大提高 H5 的性能，达到接近原生的流畅体验。
2. 为什么选择 vue？
在选择 vue 之前，使用 reactjs 也做过一个小 Demo，虽然两者都是面向组件的开发思路，但是 reactjs 的全家桶方式，实在太过强势，而自己定义的 JSX 规范，揉和在 JS 的组件框架里，导致如果后期发生页面改版工作，工作量将会巨大。
vue 相对来说，就轻量的多，他的view层，还是原来的 dom 结构，除了一些自定义的 vue 指令作为自定义标签以外，只要学会写组件就可以了，学习成本也比较低。
3. 环境配置
初始化工程，需要 node 环境使用 npm 安装相应的依赖包。
先创建一个测试目录，在里面依次输入以下命令。
//初始化package.json npm init //安装vue的依赖 npm install vue --save npm install vue-router --save //安装webpack的开发依赖 npm install webpack --save-dev //安装babel的ES6 Loader 的开发依赖 npm install babel --save-dev npm install babel-core --save-dev npm install babel-loader --save-dev npm install babel-preset-es2015 --save-dev //安装html loacer 的开发依赖 npm install html-loader --save-dev
4. 目录结构
src 为开发目录，其中 components 为组件子目录，templates 为模板子目录。
dist 为构建出的文件目录。
index.html 为入口文件。
package.json 为项目描述文件，是刚才 npm init 所建立。
webpack.config.js 是 webpack 的构建配置文件
5. Webpack 配置
下面是 webpack 的配置文件，如何使用 webpack，请移步 webpack 的官网。
var webpack= require("webpack");
module.exports={
entry:{
bundle:[ "./src/app.js"]
},
output:{
path:__dirname,
publicPath:"/",
filename:"dist/[name].js"
},
module:{
loaders:[
{test: /\.html$/, loaders: ['html']},
{test: /(\.js)$/, loader:["babel"] ,exclude:/node_modules/,
query:{
presets:["es2015"]
}
}
]
},
resolve:{
},
plugins:[
/*
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
*/
]
}6. 入口文件
index.html