Vue2.x 快速入门实例项目

本项目是在使用 Vue-cli 生成的脚手架程序基础上,综合运用Vue的各项特性开发的一个快速入门实例项目。

使用 Vue-cli 生成脚手架程序

# install vue-cli
npm install -g vue-cli

# init project
vue init webpack my-project

# entry into the file directory
cd my-project

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

详细操作可参考:https://blog.csdn.net/hwhsong/article/details/79282251

项目目录结构

本项目为使用 webpack 脚手架类型生成的标准目录结构 ,但exercises 文件夹除外,该文件夹是额外添加进项目,用于放置Vue特性使用示例程序。
Vue2.x 快速入门实例项目_第1张图片

exercises 文件夹下的单独示例程序
Vue2.x 快速入门实例项目_第2张图片

项目功能说明

本项目综合运用Vue的组件、指令、过滤器、计算属性、CSS&Style增强、事件、钩子函数、路由、异步请求等基本所有的常用特性,来实现一个简单的添加商品到购物车的功能,共有商品列表购物车 两个页面。

商品列表
Vue2.x 快速入门实例项目_第3张图片

购物车
Vue2.x 快速入门实例项目_第4张图片

项目Git地址:https://github.com/yyhsong/iVue
项目演示:http://ivue.prajnax.cn/

你可能感兴趣的:(Front-End,前端框架入门)