vue实战记录（一）- vue实现购物车功能以前提准备

vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，本身搭建了express本地服务器来请求数据

做者：狐狸家的鱼

本文连接：vue实战-实现购物车功能（一）

GitHub：sueRimn

1、前提准备

一、vue基础

• 指令的使用：v-model 、v-text、v-show、v-if、v-bind、v-for、v-on
• 过滤器filter
• 组件component

二、购物车实现

• 建立Vue实例
• 经过v-for渲染产品
• 使用filter对金额和图片进行格式化
• 使用v-on实现产品金额的动态计算

2、搭建本地服务器

为了解决Chrome服务器跨域问题，使用node.js+express搭建本地服务器来请求本地数据。

一、安装node.js

二、安装express框架

打开window命令提示符窗口，输入如下命令：

npm install express -g

npm install express-generator -g

三、初始化项目

 我选择的是 E:\learning\vue\demo这个文件夹位置初始化个人项目，在这个项目位置按住shift键右键打开windows powershell窗口，输入如下命令：

express vueCart

结果以下：

输入命令进入项目文件：

cd vueCart

而后安装项目依赖：

npm install

在vs code中打开，项目结构是这样的：

 

• bin：是项目的启动文件，配置以什么方式启动项目，默认为npm start，其中的www文件用于启动服务
• node_modules：项目所需模块
• public：项目静态文件夹，放置js、css、img等文件（能够本身放置、增长和修改）
• routes：项目的路由信息文件，控制地址路由
• views：视图文件，放置模板文件.ejs或.jade

以上是基于express的MVC框架模式。

四、运行

能够按住CTRL+shift+Y在vs code打开终端，输入如下命令启动服务：

node www

而后在浏览器中输入http://localhost:3000/，这是本地服务器的地址，访问后页面是这样的：

这表明一个基于express的本地服务器搭建成功了(～￣▽￣)～