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

文档介绍：-
. z.
框架介绍
本次前端框架采用Vue+Vue-router+Webpack来进展单页面Web应用的开发。Vue作为js框架，实现页面逻辑的控制和处理；Vue-router作为-
. z.
框架介绍
本次前端框架采用Vue+Vue-router+Webpack来进展单页面Web应用的开发。Vue作为js框架，实现页面逻辑的控制和处理；Vue-router作为路由，实现单页面应用的页面跳转；Webpack作为预编译和打包工具，，并对各模块下的js进展合并打包。可使用vue-cli脚手架工具，初始化工程
Notejs安装配置
vue-cli、Webpack依赖notejs环境进展安装和启动，需要先配置好nodeJs环境。
ftp路径：；
双击安装文件进展安装；
翻开命令行工具，输入node –version命令，出现版本号即为安装成功。
vue-cli使用
安装vue-cli
在命令行中执行：npm install -g vue-cli
执行vue init webpack my-vue命令初始化工程，my-vue为工程文件夹名称
进入工程目录下
安装依赖项：npm install
运行工程：npm run dev
-
. z.
修改文件打包后，html的引用路径：
打包工程：npm run build
生成后的工程目录构造如下所示：
WebStorm配置
为了开发的便利性，使用WebStorm作为前端的开发工具，想要支持Vue的开发需要对开发工具做如下设置：
ftp路径：；
为了支持webpack自动编译的功能，需要关闭WebStorm的“Safe Write〞模式。
翻开File >> Settings >> Appearance&Behavior >> System Setting
，以及ES6的语法，需要修改相关的设置：
翻开File >> Settings >> Languages&Frameworks >> JavaScript
翻开File >> Settings >> Editor >> File Types
配置完以上设置之后，即可导入工程进展开发了。
vue-router配置
前端框架使用单页面应用的开发模式，需要依赖vue-router路由，实现页面的跳转。vue-cli脚手架工具生成的前端工程中，没有vue-router的依赖，需要手动加载。
点击编辑器左下角的“Terminal〞，翻开命令行窗口
输入命令加载路由依赖库：npm i vue-router --save
注：--