VUE2 0學習之路1 開始 第乙個Vue例項

2021-10-01 11:34:48 字數 922 閱讀 7494

node.js版本  v12.13.1 

npm版本 6.13.4

cnpm版本 6.1.0  安裝**映象:sudo npm install -g cnpm --registry=

ide vscode

在vscode中建立專案資料夾,我取名vue_code, 簡單例項專案目錄如下:

assets 存放靜態資源檔案,example 存放學習的筆記,在index.html 中隨便寫點內容:hello world !

demo1

安裝服務

在vscode中,新建終端,輸入指令cnpm install live-server,這裡用npm會很慢,所以安裝使用了國內**的映象cnpm

啟動服務 

安裝完成後,在終端中輸入指令 live-server,服務起來後,會自動開啟127.0.0.1:8080(預設)到瀏覽器。

關閉服務

在終端中ctrl + c 終止即可 

在終端中執行命令 cnpm init -y

終端會提示你輸入專案名稱等資訊,在終端中輸入即可,如不輸入,括號裡的資訊就是預設值,就像下面這樣:

最後yes確認

建立第乙個vue例項

在example中建立 demo1.html

data: 

})

1 在html 中引入 vue.js 檔案

3 使用 } 花括號,接收資料

終端執行命令:live-server 即可看到效果

總結這一節應知道 :

怎麼建立乙個工程

怎麼為工程建立服務

怎麼建立vue例項及簡單傳遞接收資料

Vue 2 0 簡介 環境準備 第乙個vue

vue.js 是前端的主流框架之一,和angular.js react.js 一起,並成為前端三大主流框架!vue.js 是一套構建使用者介面的框架,只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。vue有配套的第三方類庫,可以整合起來做大型專案的開發 前端的主要工作?主要負責mvc中...

學習Vue(1) 第乙個Vue程式

vue.js 讀音 vju 類似於 view 是一套構建使用者介面的漸進式框架。vue 只關注檢視層,採用自底向上增量開發的設計。vue 的目標是通過盡可能簡單的 api 實現響應的資料繫結和組合的檢視元件。至於為什麼要學vue呢?一是因為vue是熱門的前端框架,而是可以通過vue來實現前後端分離。...

第乙個Vue應用

不管我們學習哪種語言,我們第乙個寫的估計就是hello world了,這裡我們也是先通過乙個簡單的html 開始,來對vue有乙個直觀的感覺。charset utf 8 vue 示例教程title head type text v model name placeholder 您的輸入 onkeyd...