vue 框架的安裝和入門介紹

2021-08-14 07:46:49 字數 1635 閱讀 3328

vue 是什麼

是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。

vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。

另一方面,當與現代化的工具鏈以及各種支援類庫結合使用時,vue 也完全能夠為複雜的單頁應用提供驅動。

是什麼  ?

元件是乙個 functional 元件,渲染路徑匹配到的檢視元件。渲染的元件還可以內嵌自己的 ,根據巢狀路徑,渲染巢狀元件。

more,please refer to this link ,

vue 專案的最簡單分析(主要是入口分析)

vue 的安裝

step 1 先安裝vue 的依賴 node.js  ,請到官網安裝最新版本

檢視node ,npm  的版本

step 2 利用**的npm 映象安裝相關的依賴

npm install -g cnpm --registry=

step 3 安裝全域性 vue-cli 腳手架 ,用於搭建所需要的模板

cnpm install -g vue-cli

step 4  利用vue  cmd  建立專案

vue init webpack vue_test

step 5 cd 到 vue_test 下 安裝依賴模組

cnpm install

step6  npm run dev  啟動 專案

step7 npm run build  用來webpack 打包專案 發布

the section  2  

在 專案建立後 ,使用atom 開啟專案 後 發現 src  下面有 四個重要的檔案和資料夾 分別是

但是專案的入口是 index.html

說明與比較:new vue() 和 export default {}

在生成、匯出、匯入、使用 vue 元件的時候,像我這種新手就會常常被位於不同檔案的 new vue() 和 export default{} 搞得暈頭轉向。它們含義到底是什麼,又有什麼異同呢?

首先,vue 是什麼? po 主的理解是 vue 就是乙個建構函式,生成的例項是乙個巨大的物件,可以包含資料、模板、掛載元素、方法、生命週期鉤子等選項。

所以渲染的時候,可以使用構造 vue 例項的方式來渲染相應的 html 頁面:

每個 vue 應用的起步都是通過建構函式 vue() 建立 vue 的根例項:

new vue()

乙個 vue 例項是乙個viewmodel (mvvm 模式) 。

在例項化 vue 時,要傳入乙個選項物件,它可以包含資料、模板、掛載元素、方法、生命週期鉤子等選項。

那麼 export default {} 又是來幹嘛的?

這是在復用元件的時候用到的。假設我們寫了乙個單頁面元件 a 檔案,而在另乙個檔案 b 裡面需要用到它,

那麼就要用 es6 的 import/export 語法 ,在檔案 a 中定義輸出介面 export **,在檔案 b 中引入 import **,

然後再生成乙個 vue 例項 new vue (**),把引入的元件用起來,這樣就可以復用元件 a 去配合檔案 b 生成 html 頁面了。

所以在復用元件的時候,export 和 new vue 缺一不可。

入門 blog 

vue框架的入門

vue是一套構建使用者介面的漸進式框架,其核心庫只關注檢視層,通過使用vue手腳架,它完全能夠為複雜的單頁應用程式提供驅動。為了便於初學者入門vue語法,介紹語法部分均通過引用vue.js檔案的方式來引入vue,在實際專案開發中,建議盡量使用vue手腳架開發和npm來維護。什麼叫漸進式框架?漸進式框...

Django框架介紹和安裝

2005年發布,採用python語言編寫的開源框架 早期的時候django主做新聞和內容管理的 乙個重量級的 python web框架,django 配備了常用的大部分元件 2.離線安裝 安裝離線包 tar xvf django 1.11.8.tar.gz cd django 1.11.8 sudo...

vue框架入門

如果你現在完成了基礎課的學習,現在就可以進入vue課程了 1 框架是什麼 乙個半成品,業界精英們已以經對基礎 進行封裝,並提供了api給程式呼叫,從而提高了程式的開發效率2 vue是什麼 前端有三大框架 vue react angular vue是乙個構建資料驅動的web介面的漸進式框架,採用了自底...