vue實戰，一步步實現vue購物車功能的過程記錄，課程與素材來自慕課網，自己搭建了express本地服務器來請求數據
作者：狐狸家的魚
本文鏈接：vue實戰-實現購物車功能（一）
GitHub：sueRimn
一、前提准備
1、vue基礎
- 指令的使用：v-model 、v-text、v-show、v-if、v-bind、v-for、v-on
- 過濾器filter
- 組件component
2、購物車實現
- 創建Vue實例
- 通過v-for渲染產品
- 使用filter對金額和圖片進行格式化
- 使用v-on實現產品金額的動態計算
二、搭建本地服務器
為了解決Chrome服務器跨域問題，使用node.js+express搭建本地服務器來請求本地數據。
1、安裝node.js
2、安裝express框架
打開window命令提示符窗口，輸入以下命令：
npm install express -g
npm install express-generator -g
3、初始化項目
我選擇的是 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框架模式。
4、運行
可以按住CTRL+shift+Y在vs code打開終端，輸入以下命令啟動服務：
node www
然后在瀏覽器中輸入http://localhost:3000/，這是本地服務器的地址，訪問后頁面是這樣的：
這代表一個基於express的本地服務器搭建成功了(～￣▽￣)～