基于vue-cli网上商城项目实战开发——搭建一个完整的SPA项目开发框架（一）

基于vue-cli脚手架，结合实际项目经验，搭建一个完整的SPA项目框架。

安装vue-cli脚手架

先贴出官方的命令行工具使用方法 官方命令行工具

鉴于此过程比较缓慢，我这里推荐使用淘宝镜像来安装。依次执行以下步骤 (本人mac，需要sudo获取管理员权限)

安装淘宝镜像，通过cnpm使用

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

全局安装 vue-cli脚手架

sudo cnpm install --global vue-cli

创建一个基于 webpack 模板的新项目, 此步骤需要注意的地方：前面会让你确定项目名，作者，是否安装路由等等，全部按 ENTER 键即可，最后一部问你是否要安装好模版立即执行

npm install

。此处选择

no

, 否则超级慢。

vue init webpack vue-cli-test

进入刚才创建的项目目录、通过cnpm安装依赖、尝试运行项目

cd vue-cli-test/
cnpm install
cnpm run dev

启动服务成功后，便可以访问localhost:8080。成功启动展示如下图所示：

安装各种项目依赖

在前面执行

cnpm install

的时候，我们就已经安装好了很多插件，例如vue-router、babel、webpack、eslint 等等等等，可以在package.json文件中看到。但是在实际开发中，这些还不够。我们需要进行数据请求、数据管理、以及根据页面需求决定是否引用组件化库等。这里我们使用：

数据请求 axios 使用教程

cnpm install axios --save

数据仓库管理 vuex 使用教程

cnpm install vuex --save

页面组件化库 vux 使用教程

cnpm install vux --save

提示：关于

--save

的作用是安装到生产版本，项目打包后依然起作用。

--save-dev

是安装到开发版本，仅仅在项目本地开发有效，不存在于

cnpm run build

打包后的文件中，例如热加载、babel转码等。

搭建项目目录结构

不同的公司都有自己的一套框架，这里是目前我公司搭建的架构。给大家一个借鉴





这样我们一个基本的项目架构就搭建完成了，但是真正的项目开发，少不了配置文件的修改，以及各种插件的具体安装使用。我会在下一次博客中详细分析一下整个项目流程