vue2 x基礎 用npm起乙個完整的專案

2022-04-04 14:05:41 字數 1458 閱讀 4323

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...