Byte Ebi's Logo

Byte Ebi 🍤

每天一小口,蝦米變鯨魚

[Express+Vue 搭建電商網站] 01- 初始設定

使用 Express + Vue 搭建一個電商網站 - 初始設定

Ray

本篇將使用 vue-ui 建立專案,並且安裝 vue-router

安裝所需要的環境

在這個練習中我們首先需要的是安裝 npm 以及node
這部分教學太多了,總之就先去裝起來吧!裝好後使用

npm -v

# 確定安裝結果
node -v

接著要安裝我們前端所要使用的 vue

npm install -g vue-cli

安裝完成後在 terminal 確認安裝結果

vue --version

新建 vue 專案

這次嘗試使用 Vue-cli 新出的 vue ui 來建立專案,在終端機輸入

vue ui

就可以起動,根據提示我們開啟 vue-ui 的畫面 按下新增之後選擇指定的位置,根據畫面上提示來建立新專案

vue-ui

接著就是等待他執行完成,在終端機進到剛剛建立專案的資料夾下會發現一個 vue 專案已經被建立

根據 README 的說明執行以下指令後,可以打開 http://localhost:8080/ 來預覽執行結果

npm install
npm run serve

hello-vue

安裝 vue-router

接著還要安裝一個我們會用上的東西:vue-router

可以選擇下指令,或是同樣的使用 vue-ui 來完成,既然剛剛使用 vue-ui 建立專案,這邊繼續使用 vue-ui 安裝 vue-router

打開 vue-ui 頁面,最上方搜尋欄的左邊看「新增 vue-router」給他按下去就會開始安裝了 vue-router-install

安裝好之後可以進入 main.js 查看,友善的自動安裝已經幫我們引入了呢!
如此就完成了我們前端 vue 專案的初始設定


專案範例程式碼 GitHub 網址:ray247k/mini-E-commerce

最新文章

Category

Tag