文档介绍：vue+vue-router+webpack框架搭建框架介绍 本次前端框架采用Vue+Vue-router+Webpack来进行单页面Web应用的开发。Vue作为js框架,实现页面逻辑的控制和处理;Vue-router作为路由,实现单页面应用的页面跳转;Webpack作为预编译和打包工具,,并对各模块下的js进行合并打包。可使用vue-cli脚手架工具,初始化项目Notejs安装配置vue-cli、Webpack依赖notejs环境进行安装和启动,需要先配置好nodeJs环境。ftp路径:devoptsofts/nodejs/node--;双击安装文件进行安装;打开命令行工具,输入node–version命令,出现版本号即为安装成功。vue-cli使用安装vue-cli在命令行中执行:npminstall-gvue-cli执行vueinitwebpackmy-vue命令初始化项目,my-vue为项目文件夹名称进入项目目录下安装依赖项:npminstall运行项目:npmrundev修改文件打包后,html的引用路径:打包项目:npmrunbuild生成后的项目目录结构如下所示:WebStorm配置为了开发的便利性,使用WebStorm作为前端的开发工具,想要支持Vue的开发需要对开发工具做如下设置:ftp路径:devoptsofts/webstorm/WebStorm-;为了支持webpack自动编译的功能,需要关闭WebStorm的“SafeWrite”模式。打开File>>Settings>>Appearance&Behavior>>,以及ES6的语法,需要修改相关的设置:打开File>>Settings>>Languages&Frameworks>>JavaScript 打开File>>Settings>>Editor>>FileTypes配置完以上设置之后,即可导入项目进行开发了。vue-router配置前端框架使用单页面应用的开发模式,需要依赖vue-router路由,实现页面的跳转。vue-cli脚手架工具生成的前端项目中,没有vue-router的依赖,需要手动加载。点击编辑器左下角的“Terminal”,打开命令行窗口输入命令加载路由依赖库:npmivue-router--save注:--,生产模式下使用,--save-,只在开发模式下使用,webpack不会将该依赖打包。添加完依赖之后,即可使用vue-router来创建路由。在src文件中添加config/。,添加路由的配置。分模块按需加载的配置: