前后端分离之Vue项目构建测试打包发布

准备环境

在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

安装Node.js以及npm包管理器：https://nodejs.org/en/

国外网址可能有点卡，可以看点比的，慢慢等待就是了， 下载成功后，与安装普通软件一样下一步就可以。

安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

1.png

由于npm资源是国外的，对于国内用户来说，你懂的，速度慢并且会导致npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm：https://npm.taobao.org/

安装cnpm：

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

持久使用：

npm config set registry http://registry.npm.taobao.org

// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info express

安装webpack：

cnpm install webpack -g

安装vue-cli脚手架构建工具：

 cnpm install --global vue-cli

Vue项目

执行一下命令：

vue init webpack first_vue

命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。first_vue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。

安装项目所需的依赖(项目下会多出一个node_modules文件夹)：

cnpm install 

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

cnpm install vue-router vue-resource --save

运行测试项目：

 npm run dev

打包项目(项目下会多出一个dist文件夹)：

npm run build

切换到dist目录我们会发现有一个static文件夹和index.html文件，这时候我们可以直接访问index.html页面的，但是由于路径问题可能会导致访问不成功。

建议下载一个MyWebServer3621小型web服务器进行测试：

2.png

浏览器中输入：http://localhost/