摘要:的官方下載地址點我進入的官方下載地址下載電腦系統(tǒng)對應(yīng)文件,然后進行安裝,安裝成功之后通過命令行工具進入安裝目錄。注系統(tǒng)命令行工具通過開始菜單輸入打開,系統(tǒng)為終端。
Vue — 漸進式 JavaScript 框架 介紹 Vue.js 是什么
vue.js 是一套構(gòu)建用戶界面的漸進式框架,采用自底向上增量開發(fā)的設(shè)計。Vue 的核心庫只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時,Vue 也完全能夠為復(fù)雜的單頁應(yīng)用程序提供驅(qū)動。
漸進式框架Vue 分層設(shè)計,每層都可靈活的接入其他方案。
Declarative Rendering -- 聲明式渲染
Component System -- 組件系統(tǒng)
Client-Side Routing -- 客戶端路由
Large Scale State Management -- 狀態(tài)管理
Build System -- 構(gòu)建系統(tǒng)
例如你不想使用 vue 的路由,可以自由替換為你喜歡或者熟悉的路由。而當你都想用官方的實現(xiàn)時,會發(fā)現(xiàn)都早已準備好,各層之間包括配套工具都能比接入其他方案更便捷地協(xié)同工作。
總結(jié)來說:vue 給你提供足夠多的 options,但并不主張更多的 required。
安裝 vuevue 有兩種安裝方式,一種是直接在 html 中引用,另一種是通過腳手架工具進行安裝。
直接在 html 中使用 vue嘗試 Vue.js 最簡單的方法是使用 JSFiddle Hello World 。你可以在瀏覽器新標簽頁中打開它,跟著例子學(xué)習一些基礎(chǔ)用法。或者你也可以創(chuàng)建一個本地的 .html 文件,然后通過如下方式引入 Vue:
主要講述下面這種安裝方式,之后都是基于 vue-cli 構(gòu)建的項目進行講解。
通過 vue-cli 腳手架工具安裝 vue 1.安裝 Node.js因為需要使用到 Node.js 的包管理工具 npm,所以先檢查自己電腦是否安裝了 node。
node.js 的官方下載地址:點我進入 node.js 的官方下載地址
下載電腦系統(tǒng)對應(yīng)文件,然后進行安裝,安裝成功之后通過命令行工具進入 node.js 安裝目錄。
如果還不了解命令行工具,建議先去百度搜索一下,先學(xué)習一些基本的命令再進行后面的操作,這里就不多做介紹了。
注:windows 系統(tǒng)命令行工具通過開始菜單輸入 cmd 打開,mac 系統(tǒng)為終端。
安裝好 node.js 之后,npm 工具也隨之安裝了。
npm 是 node.js 自帶的包管理工具,通過 npm 可以下載前端資源,默認鏡像源為國外鏡像源,下載速度慢,容易下載超時導(dǎo)致下載失敗。
所以首先通過命令行更換 npm 的鏡像源為淘寶鏡像源:
1. $ npm config set registry http://registry.cnpmjs.org 2. $ npm info underscore2.安裝 vue-cli
vue-cli 是用于構(gòu)建 vue 應(yīng)用的腳手架,通過它可以快速構(gòu)建 vue 項目。
通過 npm 安裝 vue-cli 腳手架:
// 全局安裝 vue-cli $ npm install --global vue-cli3.構(gòu)建 vue 項目
// 通過命令行進入你期望創(chuàng)建項目的目錄 // 創(chuàng)建一個基于 webpack 模板的新項目,my-project 為項目名稱,可自定義 $ vue init webpack my-project
執(zhí)行上述命令之后,還需對項目進行一些設(shè)置(按個人需要選擇):
// 項目名 Project name my-project // 項目描述 Project description A Vue.js project // 作者 author hechengzhang // 構(gòu)建方式(獨立構(gòu)建、運行時構(gòu)建,默認為獨立構(gòu)建) Vue build standalone // 是否安裝路由(Y) Install vue-router?(Y/N) // 是否使用 ESLint 檢測你的代碼(N) Use ESLint to lint your code?(Y/N) // 是否使用 Karma + Mocha 進行單元測試(N) Setup unit tests with Karma + Mocha?(Y/N) // 是否使用 Nightwatch 進行 e2e 測試(N) Setup e2e tests with Nightwatch? (Y/N)
然后通過命令進入項目,安裝依賴:
// 進入項目 $ cd my-project // 安裝依賴 $ npm install // 運行項目 $ npm run dev
運行項目會自動打開瀏覽器,當你看到 vue 的歡迎界面時,項目就已經(jīng)搭建成功了:
項目運行時,命令行狀態(tài)如下圖(下圖截自 mac 終端,windows 有稍微區(qū)別):
注:通過 control + c 可以終止運行項目
結(jié)語到這里 vue 已經(jīng)成功安裝了,下一篇介紹基于 vue-cli 搭建的應(yīng)用的項目文件介紹。
附:Vue.js 中文官網(wǎng)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/50915.html
摘要:的官方下載地址點我進入的官方下載地址下載電腦系統(tǒng)對應(yīng)文件,然后進行安裝,安裝成功之后通過命令行工具進入安裝目錄。注系統(tǒng)命令行工具通過開始菜單輸入打開,系統(tǒng)為終端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 漸進式 JavaScript 框架 介紹 Vue.js 是什么 vue.js 是一套構(gòu)建用戶界面...
摘要:的官方下載地址點我進入的官方下載地址下載電腦系統(tǒng)對應(yīng)文件,然后進行安裝,安裝成功之后通過命令行工具進入安裝目錄。注系統(tǒng)命令行工具通過開始菜單輸入打開,系統(tǒng)為終端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 漸進式 JavaScript 框架 介紹 Vue.js 是什么 vue.js 是一套構(gòu)建用戶界面...
摘要:一團隊組織網(wǎng)站說明騰訊團隊騰訊前端團隊,代表作品,致力于前端技術(shù)的研究騰訊社交用戶體驗設(shè)計,簡稱,騰訊設(shè)計團隊網(wǎng)站騰訊用戶研究與體驗設(shè)計部百度前端研發(fā)部出品淘寶前端團隊用技術(shù)為體驗提供無限可能凹凸實驗室京東用戶體驗設(shè)計部出品奇舞團奇虎旗下前 一、團隊組織 網(wǎng)站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊,代表作品WebQQ,致力于前端技術(shù)的研究 ISUX 騰...
摘要:一團隊組織網(wǎng)站說明騰訊團隊騰訊前端團隊,代表作品,致力于前端技術(shù)的研究騰訊社交用戶體驗設(shè)計,簡稱,騰訊設(shè)計團隊網(wǎng)站騰訊用戶研究與體驗設(shè)計部百度前端研發(fā)部出品淘寶前端團隊用技術(shù)為體驗提供無限可能凹凸實驗室京東用戶體驗設(shè)計部出品奇舞團奇虎旗下前 一、團隊組織 網(wǎng)站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊,代表作品WebQQ,致力于前端技術(shù)的研究 ISUX 騰...
摘要:一團隊組織網(wǎng)站說明騰訊團隊騰訊前端團隊,代表作品,致力于前端技術(shù)的研究騰訊社交用戶體驗設(shè)計,簡稱,騰訊設(shè)計團隊網(wǎng)站騰訊用戶研究與體驗設(shè)計部百度前端研發(fā)部出品淘寶前端團隊用技術(shù)為體驗提供無限可能凹凸實驗室京東用戶體驗設(shè)計部出品奇舞團奇虎旗下前 一、團隊組織 網(wǎng)站 說明 騰訊 AlloyTeam 團隊 騰訊Web前端團隊,代表作品WebQQ,致力于前端技術(shù)的研究 ISUX 騰...
閱讀 3478·2023-04-26 02:00
閱讀 3078·2021-11-22 13:54
閱讀 1699·2021-08-03 14:03
閱讀 709·2019-08-30 15:52
閱讀 3085·2019-08-29 12:30
閱讀 2420·2019-08-26 13:35
閱讀 3364·2019-08-26 13:25
閱讀 3001·2019-08-26 11:39