准备工作 在本地用vue-cli新建一个项目，首先安装vue-cil，命令： {代码...} 新建一个vue项目,创建一个基于"webpack"的项目,项目名为vuedemo： {代码...} 这里有一个地方需要改一下，在执行npm install命令之前，在package.json里添加一个依赖,后面会用到。 修改webpack配置 项目目录 {代码...} 在这一步里我们需要改动...

运行”npm run dev”：执行build/dev-server.js文件运行”npm run build”：执行build/build.js文件

前言 使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。 其主要功能是： 基于数据模板生成模拟数据。 基于HTML模板生成模拟数据。 拦截并模拟 ajax 请求。 语法规范 Mock.js 的语法规范包括两部分： 1.数据模板定义规范（Data Templa...

资源相对引用路径 问题描述 一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。 但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。 解决办法 打开webpack.prod.conf.js 找到output：增加 publicPath: './...

通过前面几章的实战，我们已经顺利的构建项目，并且从API接口获取到数据并且渲染出来了。制作更多的页面，更复杂的应用，就是各位自己根据自己的项目去调整的事情了。

通过前面几篇教程，我们已经顺利搭建起来了，并且已经组建好路由了。本章节，我们需要做一个列表页面，然后利用获取 [链接] 的公开API，渲染出来。 我们打开src/page/index.vue文件，在这里写入下面的代码： {代码...} 通过浏览器，我们可以看到如图所示的渲染结果： 使用scss写样式 新建文件， src/style/scss/_index.s...

我们还是利用 [链接] 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有分页等，内容页面展示。

通过上一篇博文《Vue2+VueRouter2+webpack 构建项目实战（一）：准备工作》,我们已经新建好了一个基于vue+webpack的项目。本篇文章详细介绍下项目的结构。 项目目录以及文件结构 如图所示： 如上图所示，自动构建的vue项目的结构就是这样。 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里，在开发阶...

环境准备 首先，要开始工作之前，还是需要把环境搭建好。需要的环境是nodejs+npm，当然现在安装node都自带了npm。 在终端下面输入命令node -v会有版本号出来。就说明安装成功了。输入npm -v也会有版本号出来，就说明，npm也已经安装好了。 vue-cil构建项目 vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来...