前后端分离之Vue环境搭建与项目构建

环境准备

1.安装Node.js
首先需要安装node环境,到node.js官网下载http://nodejs.cn/下载安装包,安装完成后打开命令行输入node -v,如下图则说明安装成功.

image.png

2.安装NPM
在使用Vue构建大型应用时推荐使用NPM安装,NPM能很好的和诸如webpack或browserify模块打包器配合使用,同时vue也提供配套工具来开发单文件组件.由于新版的Node.js已经集成了NPM,所以无需另外安装,使用npm -v测试是否已经安装.

image.png

3.安装cnpm
由于npm是下载的国外资源,速度慢而且安装依赖包经常失败,所以需要重新安装npm的国内淘宝镜像cnpm,用cnpm代替npm,依赖全 速度快

npm install -g cnpm --registry=http://registry.npm.taobao.org

4.安装webpack

cnpm install webpack -g

5.安装Vue脚手架Vue-cli
Vue提供了一个官方的CLI,为单页面应用快速搭建SPA脚手架,它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。

cnpm install vue-cli -g

测试vue是否已安装成功

image.png

项目构建

1.在本地系统盘创建一个目录:E:\front,在命令行模式下进入到此目录,使用命令来创建项目模板

vue init webpack myfront

创建过程大致如下图

image.png

其中webpack是项目构建工具,myfront是项目名称.
2.安装项目依赖

cnpm install

执行此命令之后,就安装完所有的项目依赖了,在项目目录中会生成一个node_modules文件夹

image.png

3.安装vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

4.安装jQuery

cnpm install jquery --save

image.png

5.启动项目

npm run dev

image.png

6.打包项目

npm run build

项目下会生成一个dist文件夹
7.打开浏览器输入http://localhost:8080/

image.png