Vue项目入门

第一个Vue项目

vue

Vue开发是基于Node.js实际开发中采用vue-cli脚手架开发，vue-router路由，vuex做状态管理，页面采用ElementUI来搭建前端项目。vue-cli是官方提供的一个脚手架，用于快速生成vue的项目模板；它有自己预先定义好的目录结构及基础代码，类似于idea在创建maven项目时可以选择创建一个骨架项目(脚手架)，能够提高我们的开发效率

vital function

• 统一的目录结构
• 可进行本地调试，单元测试，集成打包上线
• 支持热部署(实现资源实时动态更新)

环境搭建

• Node.js 运行JavaScript的环境，进入node官网
• npm是一个软件包管理工具

Webpack

• 随着互联网的大潮，越来越多的网站已经 从网页模式进化(evolution)到WebApp模式,webApp通常是一个SPA(单页面应用)，每个页面都通过异步的方式进行加载，这就导致页面初始化和使用过程中会加载 越来越多的JS代码，这无疑是给前端开发带来了巨大的挑战。而前端工作与后端开发不同的是，多语言，多层次的编码和组织工作，而前端产品是基于浏览器的，这些资源是通过增量的方式加载到浏览器端的，那么如何在开发环境中 组织好这些碎片化的代码和资源，并且保证其在浏览器端快速的加载和更新，此时就需要一个模块化系统。

• webpack是一个现代JavaScript应用程序的静态模块打包器(model bundler)。它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。当webpack处理程序时，它会递归的构建一个依赖关系图(dependency graph)，类似于JavaWeb中的maven打包工具。webpack是一款模块化加载的打包工具，能够将各种资源(js,html,css,图片等)都作为模块来处理和使用。

• Install

npm install webpack -g //global：全局安装
npm install webpack-cli -g

• Test

webpack -v
webpack cli -v