vue+vue-router+webpack框架搭建

《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、：