vue+vue-router+webpack框架搭建.doc

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/nodejs/node-v6.9.0-x64.msi；2. 双击安装文件进行安装；3. 打开命令行工具，输入node version命令，出现版本号即为安装成功。3. vue-cli使用1. 安装vue-cli在命令行中执行：npm install -g vue-cli2. 执行vue init webpack my-vue命令初始化项目，my-vue为项目文件夹名称3. 进入项目目录下4. 安装依赖项：npm install5. 运行项目：npm run dev6. 修改文件打包后，html的引用路径：7. 打包项目：npm run build生成后的项目目录结构如下所示：4. WebStorm配置为了开发的便利性，使用WebStorm作为前端的开发工具，想要支持Vue的开发需要对开发工具做如下设置：1. ftp路径：devoptsofts/webstorm/WebStorm-2016.3.2.exe；2. 为了支持webpack自动编译的功能，需要关闭WebStorm的“Safe Write”模式。打开File Settings Appearance&Behavior System Setting3. 为了支持.vue文件中的代码提示，以及ES6的语法，需要修改相关的设置：打开File Settings Languages&Frameworks JavaScript打开File Settings Editor File Types4. 配置完以上设置之后，即可导入项目进行开发了。5. vue-router配置前端框架使用单页面应用的开发模式，需要依赖vue-router路由，实现页面的跳转。vue-cli脚手架工具生成的前端项目中，没有vue-router的依赖，需要手动加载。1. 点击编辑器左下角的“Terminal”，打开命令行窗口2. 输入命令加载路由依赖库：npm i vue-router -save注：-save命令会将依赖添加到package.json文件中的dependencies中，生产模式下使用，-save-dev命令会将依赖添加到package.json文件中的devDependencies中,只在开发模式下使用，webpack不会将该依赖打包。3. 添加完依赖之后，即可使用vue-router来创建路由。在src文件中添加config/routers.js文件来配置路由地址。4. 在main.js文件中，添加路由的配置。5. 分模块按需加载的配置：6. 路由功能简单使用示例：直接使用标签，通过to属性设置路由到的页面在js中使编程式的导航路由：6. vue-resource配置Vue不提供后端资源请求的功能，需要依赖vue-resource模块，实现后端接口的调用，使用前需要添加vue-resource依赖。1. 在编辑器的“Terminal”窗口中，执行加载依赖命令：npm i vue-resource -save2. 在main.js中添加vu