Vue框架使用
- vue簡介
- MVVM的介紹
- vue專案步驟
- vue專案目錄詳解
- 運行vue可以自動打開瀏覽器
- 如何使用less寫樣式
vue簡介
Vue 是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，于與第三方庫或既有專案整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，
MVVM的介紹
MVVM，一種更好的UI模式解決方案;
- MVC
M: Model 資料模型（專門用來操作資料，資料的CRUD）
V：View 視圖（對于前端來說，就是頁面）
C：Controller 控制器（是視圖和資料模型溝通的橋梁，用于處理業務邏輯） - MVVM組成
MVVM ===> M / V / VM
M：model資料模型
V：view視圖
VM：ViewModel 視圖模型
vue專案步驟
一、安裝node環境
-
下載地址：https://nodejs.org/en/
-
檢查是否安裝成功;如果能夠成功輸出版本號，就說明我們安裝node環境成功；
-
可以使用淘寶鏡像提高效率：http://npm.taobao.org/
輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安裝npm鏡像，以后再用到npm的地方直接用cnpm來代替就好了，
檢查是否安裝成功：
二、搭建vue專案環境
1、全域安裝vue-vli
npm install --g vue-cli
2、進入專案目錄，創建一個基于webpack模板的新專案: vue init webpack 專案名
3、切換到專案，進入專案 cd 專案名，然后在安裝依賴 cnpm install
安裝成功后，專案檔案夾中回多出一個目錄 node_modules
4、啟動專案npm run dev
專案啟動成功：
vue專案目錄詳解
- build：構建腳本目錄
1）build.js ==> 生產環境構建腳本；
2）check-versions.js ==> 檢查npm，node.js版本；
3）utils.js ==> 構建相關工具方法；
4）vue-loader.conf.js ==> 配置了css加載器以及編譯css之后自動添加前綴；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack開發環境配置；
7）webpack.prod.conf.js ==> webpack生產環境配置；
-config：專案配置
1）dev.env.js ==> 開發環境變數；
2）index.js ==> 專案組態檔；
3）prod.env.js ==> 生產環境變數；
- node_modules：npm 加載的專案依賴模塊
- src：這里是我們要開發的目錄，基本上要做的事情都在這個目錄里，里面包含了幾個目錄及檔案：
1）assets：資源目錄，放置一些圖片或者公共js、公共css，這里的資源會被webpack構建；
2）components：組件目錄，我們寫的組件就放在這個目錄里面；
3）router：前端路由，我們需要配置的路由路徑寫在index.js里面；
4）App.vue：根組件；
5）main.js：入口js檔案；
- static：靜態資源目錄，如圖片、字體等，不會被webpack構建
- index.html：首頁入口檔案，可以添加一些 meta 資訊等；
- package.json：npm包組態檔，定義了專案的npm腳本，依賴包等資訊
- README.md：專案的說明檔案，markdown 格式
- .xxxx檔案：這些是一些組態檔，包括語法配置，git配置等；
運行vue可以自動打開瀏覽器
解決vue不能自動打開瀏覽器的問題：當我們啟動專案npm run dev ,開始運行
，命令列提示我們運行成功，但是瀏覽器沒有打開，只能自己手動輸入
解決：
- 打開config ==> index.js
- module.exports配置中找到autoOpenBrowswe,默認設定的是false,然后改為true就可以了
- Ctrl+C,然后我們重啟一下，就能自動打開瀏覽器了
如何使用less寫樣式
1、先安裝less依賴: **npm install less less-loader --save **
2、安裝成功后，可以在package.json里面看到，多增加了兩個模塊；
3、然后在vue檔案里面撰寫樣式：
寫的不好或有錯誤的地方，接受請教~!
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/1471.html
標籤：其他