Vue+Element 构建前端项目

Vue+Element 构建前端项目

前言

需要了解的基本知识

• node.js

Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。总结一下，node,js提供了javascript在浏览器以外的一个执行环境，满足一些特定的场景需求。

• npm

npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

• webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。

• vue

是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件系统和vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。在开发中vue会把使用vue语法修饰的html标签与js对象进行绑定，从而使html值变化时可以同步修改js对象，js对象值变化时可以在页面暂时，使开发从复杂的document操作中解脱出来。

• vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

• element-ui

Element 是由饿了就吃热的饿了么的饿了么出品的样式组件库，使用方便，和 Vue 实现完全融合，而且组件种类多样，基本能满足大多数的业务场景。

一.环境搭建

Node.js安装

http://nodejs.cn/download/

下载安装包，傻瓜式安装，一直下一步，安装中自带着也会把npm服务也安装了，并会自动添加环境变量。新手阶段不推荐自定义安装目录，自定义安装需要修改环境变量，在不懂相关知识的情况下会增加学习成本。安装完成后，通过node -v 查看nodejs版本信息，通过npm -v查看npm版本信息，可以查看即安装成功。