Vue2 x 快速入門例項專案

2021-08-18 12:41:28 字數 1145 閱讀 3818

本專案是在使用vue-cli生成的腳手架程式基礎上,綜合運用vue的各項特性開發的乙個快速入門例項專案。

# install vue-cli

npm install -g vue-cli

# init project

vue init webpack my-project

# entry into the file directory

cd my-project

# install dependencies

npm install

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

# build for production and view the bundle analyzer report

npm run build --report

詳細操作可參考:

本專案為使用webpack腳手架型別生成的標準目錄結構 ,但exercises資料夾除外,該資料夾是額外新增進專案,用於放置vue特性使用示例程式。

exercises資料夾下的單獨示例程式

本專案綜合運用vue的元件、指令、過濾器、計算屬性、css&style增強、事件、鉤子函式、路由、非同步請求等基本所有的常用特性,來實現乙個簡單的新增商品到購物車的功能,共有商品列表 和 購物車 兩個頁面。

商品列表

購物車

Vue 2 x系列之快速搭建Vue專案

2017年,系統的學習過vue框架,但是在隨後的工作中一直再使用react,已經把vue相關知識忘了個七七八八,目前公司有專案需要使用vue,在這裡記錄一下學習過程。本文章主要記錄一下使用 vue cli快速搭建vue專案 hello world window系統,需要以管理員身份執行cmd進行安裝...

Vue2 X的入門學習

由於前幾天跟那位技術聊了一會,深感自己目前所學知識的淺薄以及實戰經驗的缺失。今天初步了解了一下前端的vue.js 時間不長,只是看了一些基本內容,肯定也是做不了什麼大專案的,這裡回憶一下所學知識。1.引入vue 此處利用script直接引用,另外呢,vue官網是給了很多教程的,對新手是很友好的 官網...

vue3建立vue2 x專案

因為一些原因更新了node,再次安裝vue時,莫名的就vue3了。好吧,但是以前的專案還是vue2的,所以順便嘗試了下vue3建立vue2專案。首先是建立,以前是使用vue init建立,現在是vue create,然後在建立時,可以選擇2還是3 如果選擇3還有一些其它選項 比如是否安裝vue ro...