vue.js初入門(一)

2021-01-08 hojun

什麼是Vue?

Vue.js（讀音 /vju/, 類似於 view） 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue完全有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。

Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。Vue.js 不支持 IE8 及其以下版本，因為 Vue.js 使用了 IE8 不能實現的ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。

安裝

(建議在優質的網絡環境下的時候進行實踐操作。網速不夠的可以使用npm的淘寶鏡像)

首先要有node環境和npm包管理工具。安裝node的時候一般會默認連帶安裝npm，所以建議直接安裝node就行。（這裡就不介紹怎麼安裝node了，自行百度）這裡我們使用vue-cli腳手架來安裝vue。所以先安裝cli:打開cmd命令行工具，輸入npm安裝命令(我在這裡選擇全局安裝 <-g>)

npm install -g vue-cli

安裝可能需要一些時間，請耐心等待。安裝成功後效果如圖：

接下來使用webpack安裝vue項目模板，輸入命令：(hi-vue是項目名，可以自定義)

vue init webpack hi-vue

默認安裝最新穩定版，若需要安裝1.0版本則需指定版本號，命令如下：

vue init webpack#1.0 hi-vue

接下來配置一些信息：

項目的名稱？輸入 「y」 回車確認

項目說明？輸入 「vue-js初入門」作者？輸入 「y」 回車確認

提供兩個模式選項(推薦第二種)Runtime + Compiler: recommended for most users //運行加編譯Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere //小6kb,但需要使用.vue文件來開發

安裝vue-router?

使用ESlint來規範你的代碼？

使用哪種規則？Standard

安裝unit測試？輸入 「n」 回車確認安裝e2e測試？輸入 「n」 回車確認

選擇安裝方式？選擇npm請耐心等待安裝完成~(建議網速好的時候安裝)

安裝完成效果如圖：

根據指示運行命令：

cd hi-vuenpm run dev

打開瀏覽器，在地址欄輸入localhost:8080。得到如下效果:

相關焦點

  • vue.js初入門(四模板語法)
    過濾器Vue.js 允許你自定義過濾器，被用作一些常見的文本格式化。回顧我們在vue.js初入門二中看到的例子：這裡，v-if 指令將根據表達式 seen 的值的真假來插入/移除<p>元素。一些指令能夠接收一個「參數」，在指令名稱之後以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 特性：在這裡 href 是參數，告知 v-bind 指令將該元素的 href 特性與表達式 url 的值綁定。
  • 教育平臺項目前端：Vue.js 入門
    在 html 頁面使用 script 引入 vue.js 的庫即可使用：遠程CDN：<script src=&34;></script>本地：<script src=&34;></script>Vue-CLI 腳手架：使用 vue.js
  • 【分享】Vue.js新手入門指南
    為什麼寫個代碼這麼難，你想砸電腦，你想一鍵盤拍在產品狗的腦袋上，責怪他天天改需求才讓你原本花清香茶清味的代碼變得如此又臭又長。這個時候如果你學過Vue.js，那麼這些抱怨將不復存在。5.Vue.js為什麼能讓基於網頁的前端應用程式開發起來這麼方便？
  • Vue.js 很難學?看看這個由 DCloud 與 Vue 官方合作推出的免費入門...
    這套在線觀看的免費入門視頻教程就是給你們準備的。Vue.js 是目前國內很火的前端框架，前端工程師招聘幾乎都要求掌握。如果你想開始嘗試學習 Vue.js，在 Vue.js 官網閱讀文檔教程又比較吃力，這套視頻教程基於Vue.js 官網文檔，用更加通俗易懂的方式和代碼實例來幫助你入門 Vue.js 。
  • 「Vue.js開發連載一」Vue.js簡介
    一、簡介Vue.js（讀音 /vju/，類似於view）是一個構建數據驅動的web界面的漸進式框架。Vue。js的目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件。它不僅易於上手，還便於與第三方庫或既有項目整合。
  • Vue初體驗 -Vue的安裝和使用
    前端框架三巨頭：Vue.js、React.js、AngularJS，vue.js以期輕量易用著稱，vue.js和React.js發展速度最快，AngularJS還是老大。官網：https://cn.vuejs.org/參考：https://cn.vuejs.org/v2/guide/
  • Vue初體驗(二) -Vue的基本使用
    3.入門實例3.3.2.vue聲明式渲染然後我們通過Vue進行渲染：<body> <div id="app"> <h2>{{name}}，非常帥！！！
  • vue入門:對vue項目中api接口的封裝管理
    在以前的文檔中，我們構建了vue項目的整體架構，詳見vue入門：vue項目架構設計起步，現在我們主要對其中的api接口封裝進行完善，並將過程做個記錄，與之分享。很多朋友在開發過程中，習慣性直接將api的調用寫在單個組件之中，就直接調用請求。
  • Vue.js 是什麼?
    Vue 實例，創建一個 Vue 實例，聲明式渲染案例以下代碼是保存至一個index.html的文檔（文件後綴名是.html）中，並非是.vue的文件，當今後學會了一些更vue複雜的應用的時候，比如CLI創建了更複雜的vue應用，並支持單文件組件，那在項目下創建的文件可能就是以.vue為後綴的文件。<!
  • 什麼是VUE?VUE與JS的對比
    我們需要讓所有綁定的對象和元素都能感知到變化1.1.1. vue與js的對比1.1.1.1. js的實現(了解)<!引入js文件--><script src="../node_modules/vue/dist/vue.js"></script></head><body><!--2.
  • 「Vue.js開發連載二」Vue.js定義
    上一篇文章講解「Vue.js的簡介」，本篇文章講解「Vue.js定義」。開發工具1. 在線代碼預覽平臺2.編輯器——vscode微**軟出品的編輯器, 通過vetur插件可以支持vue的語法提示和語法校驗, 他也vue官網推薦的插件, 由於從2.5版本vue已經開始親ts語法, ts又是微軟的開發語言, 所以未來vscode一定是寫 vue體驗最好的編輯器, 建議大家從現在開始就用vscode來寫前端代碼。
  • 初學Vue（一） -- Vue簡單入門
    vue - 國人開發製作的類似於 view 的發音vue經過了幾次大的版本波動0.x 0.6版本1.x 版本2.x 版本 - 現在常用的為什麼要介紹版本改動呢，因為不同版本語法和用法有差別，用起來比較麻煩react
  • 前端開發之認識Vue.js
    還是現在AngularJS都對這一特性進行了實現（也稱之為數據綁定），但這幾者的實現方式和使用方式都不相同。如果組件抽象得合理，這在很大程度上能減少重複開發，而且配合Vue.js的周邊工具vue-loader，我們可以將一個組件的CSS、HTML和js都寫在一個文件裡，做到模塊化的開發。
  • 利用vue.js進行模塊化開發,一學就會
    /info.js'注引用的步驟：<script src="info.js" type="module"></script><script src="main.js" type="module"></script>import {name, age, height} from ".
  • Vue.js布局
    動態Vue.js布局組件前言vue.js是漸進增強的視圖庫，可以作為.html頁面部分使用，也可以結合vue-router、vuex、axios用來構建單頁面或多頁面應用。
  • 怎樣安裝vuejs devtools
    vuejs devtools可以方便且高效的幫助前端開發者調試vuejs代碼，vuejs devtool支持chrome和firefox，但是在境內用chrome安裝瀏覽器插件不方便，所以本文介紹在firefox安裝vuejs devtool的方法，希望對大家有幫助，歡迎留言交流技術問題
  • Vue.js基礎入門課程推薦
    來源：博學谷 作者：照照Vue.js作為一個構建數據驅動 web 界面的漸進式框架，可以說是前端開發者不得不熟練掌握的常用框架之一。它的優點主要有對新手友好，而且語法自由。因此學習Vue.js可以說十分有必要了。
  • vuejs 中組件實現
    ，個人對於 vue 了解並不多。先接觸的 angular 隨後是 react ，vue 是這兩年市場推動不得不也看一看 vue。最近聽了 Evan 關於 vue3 介紹，vue3 還是很吸引人，一堆提高性能的優化。
  • 初步認識vue.js框架的使用
    vue.js框架是幹什麼的Vue.js 是一個JavaScriptMVVM庫，是一套構建用戶界面的漸進式框架。它是以數據驅動和組件化的思想構建的，採用自底向上增量開發的設計。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js。如何使用vue.js1.下載 vue.min.js 並用 <script> 標籤引入。2.初始並實例化vue3.將html中的需要顯示的元素用vue中的屬性代替。
  • 簡碼編程:vue.js是不是比jquery.js更有用?
    vue.js是不是比jquery.js更有用？簡碼編程收到一些讀者的留言提問：「現在vue.js這麼火，我要不要學呀？vue.js是不是比jquery.js更有用？要學的東西太多感覺學不過來了」。vue.js是最近幾年才火起來的，它的最大特點就是不需要手工去寫對網頁元素進行增、刪、改、查的代碼了，只需要把網頁元素與vue的變量數據進行綁定，當你修改了vue的變量數據時，網頁元素自動更新了，省了好多代碼，也省了很多寫代碼的工作量，所以受到很多前端開發人員的歡迎。