前端-SPA

SPA

Single Page Application.即单页应用。这个后台管理系统只会出现一个HTML页面，剩余一切页面的内容都是通过Vue组件来实现。

这些Vue组件其实就是许多的js文件，不过前端项目除了js，还有css,image,font等。甚至前端还开发出各种不同类型的扩展语言，这么多东西需要打包，构建。人工操作非常麻烦，因此就会有工具来辅助搭建前端项目。例如：webpack、vue-cli等

 

webpack

介绍：前端打包工具，它可以将js、image、css等资源当成一个模块进行打包。中文官方网站：https://www.webpackjs.com/

核心概念：

1. 入口（entry）webpack打包的启点，一个或者多个，一般为js文件。作为将来打包的原始数据。
2. 输出（output）出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹。以及文件的名称。目的地可以有多个。
3. 加载器（loader）webpack本身只识别js文件，如果要加载非js文件，必须指定一些额外的加载器loader，例如css-loader。然后将这些文件转换为webpack能处理的有效模块，最后利用webpack的打包能力去处理。
4. 插件（plugins）插件可以扩展webpack的功能。让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩、提高效率。

vue-cli

介绍和安装：vue官方提供了一个快速搭建vue项目的脚手架：vue-cli，使用它快速的构建一个web工程模板。
Git官网：https://github.com/vuejs/vue-cli
官网：https://cli.vuejs.org/zh/
安装命令：npm install -g vue-cli

• 允许安装命令前提条件

1）如果不确定自己是否安装了node,可以在命令行工具内执行： node -v  （检查一下 版本）；

 

2）如果 执行结果显示： xx 不是内部命令，说明你还没有安装node , node 安装地址：http://nodejs.cn/download/

注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上；

•  vue-cli 全局安装

   命令行执行 : npm install -g vue-cli    // 加-g是安装到全局

  安装完成以后 可以输入命令 ：vue 回车，可以看到针对vue的命令行；

• idea打开https://download.youkuaiyun.com/download/qq_24545959/12234755 该资源
  在Terminal输入：npm run dev 
  
  于此，即便是运行成功了，点击该链接查看网页端显示。