1. 安裝vue
npm install vue -g
2. 安裝vue-cli腳手架
npm install vue-cli -g
3. 安裝webpack
npm install webpack -g
4cd[/d][x:]進某個路徑,存放我們要建的專案,否則會預設路徑建專案
vue init webpack "專案名稱"
5 等專案初始化完以後cd進所在的目錄
cd '專案所在資料夾'
6 npm run dev執行專案
檔案構成詳解第一部分: build構建指令碼目錄
build.js ===》 生產環境構建指令碼
check-versions.js ===》 檢查npm node.js指令碼
utils.js ===》 構建相關工具方法
vue-loader.conf.js ===》配置了css載入器以及編譯之後css自動新增字首
webpack.base.conf.js ===》webpack基本配置
webpack.dev.conf.js ===》 webpack開發環境配置
webpack.prod.conf.js ===》 webpack生產環境配置
第二部分: config 專案配置
dev.env.js ===》 開發環境變數
index.js ===》專案配置檔案 (可在此處配置targetpath等)
prod.js ===》 生產環境變數
第三部分 node_modules: npm載入的專案依賴模組
第四部分 src 這裡是開發目錄,裡面包含了很多目錄及檔案
assets ===》資源目錄,放置一些或者公共js 公共css,這裡的資源會被webpack構建
components ===》元件目錄,專案的元件就在這個目錄下
router ===》 前端路由,路由路徑就寫在這裡面
main.js ===》 入口js檔案
static:靜態資源目錄
index.html:首頁檔案入口,可新增一些meta資訊
packge.json:npm包配置檔案,定義了專案的npm指令碼以及依賴包外掛程式等資訊
readme.md:專案的說明文件
vue2 x 做乙個外賣app
現在最流行的開發方式就是前後分離了 vue 也是現在最流行的前端框架之一。在手機上掃碼體驗效果更好 vue 有自己的腳手架構建工具 vue cli 使用起來非常方便,使用 webpack 來整合各種開發便捷工具,比如 除此之外,vue cli 已經使用 node 配置了一套本地伺服器和安裝命令等,本...
vue2 x學習筆記(一)
使用vue開發專案已經過了一段時間了,對其中的很多東西還是一知半解,於是想要系統學習一下。主要內容是參照官方中文 然後加上一些自己的理解與批註。什麼是vue.js vue 讀音 vju 類似於view 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue被設計為可以自底向上逐層應用。...
VUE2 X全教程 基礎詳解(二)
1.vue例項的生命週期及每個生命週期中自呼叫函式呼叫時機 2.模板語法的使用 3.計算屬性 computed 方法methods 及 watch 操作屬性 4.計算屬性中的get和set方法的使用 5.vue中的兩種樣式繫結方式 6.vue中的條件渲染 7.vue中的列表渲染和物件渲染 單獨放在v...