欢迎来到天天文库
浏览记录
ID:41286648
大小:827.54 KB
页数:10页
时间:2019-08-21
《vue+vue-router+webpack框架搭建》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
1、1.框架介绍本次前端框架采用Vue+Vue-router+Webpack来进行单页面Web应用的开发。Vue作为js框架,实现页面逻辑的控制和处理;Vue-router作为路由,实现单页面应用的页面跳转;Webpack作为预编译和打包工具,将.vue文件预编译为浏览器端可运行的js文件,并对各模块下的js进行合并打包。可使用vue-cli脚手架工具,初始化项目2.Notejs安装配置vue-cli、Webpack依赖notejs环境进行安装和启动,需要先配置好nodeJs环境。1.ftp路径:devoptsofts/no
2、dejs/node-v6.9.0-x64.msi;2.双击安装文件进行安装;3.打开命令行工具,输入node–version命令,出现版本号即为安装成功。3.vue-cli使用1.安装vue-cli在命令行中执行:npminstall-gvue-cli2.执行vueinitwebpackmy-vue命令初始化项目,my-vue为项目文件夹名称1.进入项目目录下2.安装依赖项:npminstall3.运行项目:npmrundev4.修改文件打包后,html的引用路径:5.打包项目:npmrunbuild生成后的项目目录结构
3、如下所示:1.WebStorm配置为了开发的便利性,使用WebStorm作为前端的开发工具,想要支持Vue的开发需要对开发工具做如下设置:1.ftp路径:devoptsofts/webstorm/WebStorm-2016.3.2.exe;2.为了支持webpack自动编译的功能,需要关闭WebStorm的“SafeWrite”模式。打开File>>Settings>>Appearance&Behavior>>SystemSetting3.为了支持.vue文件中的代码提示,以及ES6的语法,需要修改相关的设置:打开Fil
4、e>>Settings>>Languages&Frameworks>>JavaScript打开File>>Settings>>Editor>>FileTypes1.配置完以上设置之后,即可导入项目进行开发了。1.vue-router配置前端框架使用单页面应用的开发模式,需要依赖vue-router路由,实现页面的跳转。vue-cli脚手架工具生成的前端项目中,没有vue-router的依赖,需要手动加载。1.点击编辑器左下角的“Terminal”,打开命令行窗口2.输入命令加载路由依赖库:npmivue-router--
5、save注:--save命令会将依赖添加到package.json文件中的dependencies中,生产模式下使用,--save-dev命令会将依赖添加到package.json文件中的devDependencies中,只在开发模式下使用,webpack不会将该依赖打包。1.添加完依赖之后,即可使用vue-router来创建路由。在src文件中添加config/routers.js文件来配置路由地址。2.在main.js文件中,添加路由的配置。1.分模块按需加载的配置:1.路由功能简单使用示例:直接使用6、link>标签,通过to属性设置路由到的页面在js中使编程式的导航路由:1.vue-resource配置Vue不提供后端资源请求的功能,需要依赖vue-resource模块,实现后端接口的调用,使用前需要添加vue-resource依赖。1.在编辑器的“Terminal”窗口中,执行加载依赖命令:npmivue-resource--save2.在main.js中添加vue-resource的依赖1.引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。2.简单使用示例7、:
6、link>标签,通过to属性设置路由到的页面在js中使编程式的导航路由:1.vue-resource配置Vue不提供后端资源请求的功能,需要依赖vue-resource模块,实现后端接口的调用,使用前需要添加vue-resource依赖。1.在编辑器的“Terminal”窗口中,执行加载依赖命令:npmivue-resource--save2.在main.js中添加vue-resource的依赖1.引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。2.简单使用示例
7、:
此文档下载收益归作者所有