vue實戰記錄(一)- vue實現購物車功能以前提準備

vue實戰,一步步實現vue購物車功能的過程記錄,課程與素材來自慕課網,本身搭建了express本地服務器來請求數據css

做者:狐狸家的魚html

本文連接:vue實戰-實現購物車功能(一)vue

GitHub:sueRimnnode

1、前提準備

一、vue基礎git

  • 指令的使用:v-model 、v-text、v-show、v-if、v-bind、v-for、v-on
  • 過濾器filter
  • 組件component

二、購物車實現github

  • 建立Vue實例
  • 經過v-for渲染產品
  • 使用filter對金額和圖片進行格式化
  • 使用v-on實現產品金額的動態計算

2、搭建本地服務器

爲了解決Chrome服務器跨域問題,使用node.js+express搭建本地服務器來請求本地數據。shell

一、安裝node.jsexpress

二、安裝express框架npm

打開window命令提示符窗口,輸入如下命令:windows

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

相關文章
相關標籤/搜索