高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。
Vue-cli
Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻松地创建新的应用程序而且可用于自动生成Vue和Webpack的项目模板。
Vue-cli是一个基于Vue.js进行快速开发的完整系统,其提供以下功能:
(1)通过@vue/cli实现交互式的项目脚手架。
(2)通过@vue/cli+@vue/cli-service-global实现零配置原型开发。
(3)一个运行时的依赖(@vue/cli-service),该依赖:
· 可升级。
· 基于Webpack构建,并带有合理的默认配置。
· 可以通过项目内的配置文件进行配置。
· 可以通过插件进行扩展。
(4)一个丰富的官方插件集合,集成了前端生态中最好的工具。
(5)一套完全图形化的创建和管理Vue.js项目的用户界面。
Vue-cli致力于将Vue生态中的工具基础标准化。它确保各种构建工具能够基于智能的默认配置即可平稳衔接,这样开发者可以专注在撰写应用上,而不必花费好几天时间去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,而无须eject。
利用Vue-cli脚手架构建Vue项目需要先安装Node.js和NPM环境。
Node.js
1.什么是Node.js
Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型。
Node是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。
Node对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行JavaScript的速度非常快,性能非常好。Node是一个基于Chrome JavaScript运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node使用事件驱动,采用非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。
2.Node.js的安装
Node.js的安装比较简单,大家需要在Node.js官网(https://nodejs.org/en/download/)下载并安装Node.js环境,Windows系统推荐下载Windows Installer(.msi)。同时,大家会得到一个附送的NPM工具。
(1)安装Node.js,双击下载好的node安装文件
安装过程比较简单,一直单击“下一步”按钮即可。
(2)环境变量配置。安装完成后需要设置环境变量,即在Path中添加安装目录(例如:D:\java\nodejs),如图
(3)单击“开始”按钮,然后单击“运行”按钮,在输入框内输入cmd命令,最后输入node-v,如图