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的本地服務器搭建成功了(～￣▽￣)～