一、介绍
vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点
并且提供了很多的周边配套工具 如vue-router 、vue-resource 、vuex等等
通过他们我们可以很轻松的构建一个大型单页应用
目前Vue版本为Vue2.0
官网地址http://vuejs.org.cn/
查看API文档https://vuefe.cn/v2/api/
对比其他框架http://vuejs.org.cn/guide/comparison.html
二、环境搭建
我们使用vue-cli脚手架工具构建
#安装 vue-cli
npm install -g vue-cli
#使用vue-cli初始化项目
vue init webpack vue-vuerouter-demo
#进到目录
cd vue-vuerouter-demo
#安装依赖
npm install
#开始运行
npm run dev
浏览器访问http://localhost:8080
构建完成之后基本目录结构如下:
流程说明:
1、首先会打开首页 也就是我们看到的index.html文件
2、使用webpack打包之后默认加载main.js文件并将其引入到index.html文件中
三、开发
我们在main.js文件中引入相关模块以及组件
import Vue from 'vue'import App from'./App'import router from'./router' //这里引入的是router目录,会默认识别里面的index.js文件(不能是其他名字)
//引入并使用vue-resource网络请求模块
import VueResource from 'vue-resource'Vue.use(VueResource)
实例化vue对象配置选项路由及渲染App组件
newVue({
el:'#app', //这里绑定的是index.html中的id为app的div元素
router,
render: h=>h(App)//这里的render: h => h(App)是es6的写法
//转换过来就是: 暂且可理解为是渲染App组件
//render:(function(h){
//return h(App);
//});
})
App.vue文件是我们的组件入口,之后所有的开发在这里面进行
- Home
- About