Vue.js 2.0 輕松入門（一）

mmy123456 發(fā)布于2019-08-29 12:50 / 3089人閱讀

摘要：的官方下載地址點(diǎn)我進(jìn)入的官方下載地址下載電腦系統(tǒng)對應(yīng)文件，然后進(jìn)行安裝，安裝成功之后通過命令行工具進(jìn)入安裝目錄。注系統(tǒng)命令行工具通過開始菜單輸入打開，系統(tǒng)為終端。

Vue — 漸進(jìn)式 JavaScript 框架 介紹 Vue.js 是什么

vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架，采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動。

漸進(jìn)式框架

Vue 分層設(shè)計(jì)，每層都可靈活的接入其他方案。

Declarative Rendering -- 聲明式渲染

Component System -- 組件系統(tǒng)

Client-Side Routing -- 客戶端路由

Large Scale State Management -- 狀態(tài)管理

Build System -- 構(gòu)建系統(tǒng)

例如你不想使用 vue 的路由，可以自由替換為你喜歡或者熟悉的路由。而當(dāng)你都想用官方的實(shí)現(xiàn)時，會發(fā)現(xiàn)都早已準(zhǔn)備好，各層之間包括配套工具都能比接入其他方案更便捷地協(xié)同工作。

總結(jié)來說：vue 給你提供足夠多的 options，但并不主張更多的 required。

安裝 vue

vue 有兩種安裝方式，一種是直接在 html 中引用，另一種是通過腳手架工具進(jìn)行安裝。

直接在 html 中使用 vue

嘗試 Vue.js 最簡單的方法是使用 JSFiddle Hello World 。你可以在瀏覽器新標(biāo)簽頁中打開它，跟著例子學(xué)習(xí)一些基礎(chǔ)用法。或者你也可以創(chuàng)建一個本地的 .html 文件，然后通過如下方式引入 Vue：

主要講述下面這種安裝方式，之后都是基于 vue-cli 構(gòu)建的項(xiàng)目進(jìn)行講解。

通過 vue-cli 腳手架工具安裝 vue 1.安裝 Node.js

因?yàn)樾枰褂玫?Node.js 的包管理工具 npm，所以先檢查自己電腦是否安裝了 node。

node.js 的官方下載地址：點(diǎn)我進(jìn)入 node.js 的官方下載地址

下載電腦系統(tǒng)對應(yīng)文件，然后進(jìn)行安裝，安裝成功之后通過命令行工具進(jìn)入 node.js 安裝目錄。

如果還不了解命令行工具，建議先去百度搜索一下，先學(xué)習(xí)一些基本的命令再進(jìn)行后面的操作，這里就不多做介紹了。

注：windows 系統(tǒng)命令行工具通過開始菜單輸入 cmd 打開，mac 系統(tǒng)為終端。

1.1.替換 npm 鏡像源

安裝好 node.js 之后，npm 工具也隨之安裝了。

npm 是 node.js 自帶的包管理工具，通過 npm 可以下載前端資源，默認(rèn)鏡像源為國外鏡像源，下載速度慢，容易下載超時導(dǎo)致下載失敗。

所以首先通過命令行更換 npm 的鏡像源為淘寶鏡像源：

1. $ npm config set registry http://registry.cnpmjs.org
2. $ npm info underscore

2.安裝 vue-cli

vue-cli 是用于構(gòu)建 vue 應(yīng)用的腳手架，通過它可以快速構(gòu)建 vue 項(xiàng)目。

通過 npm 安裝 vue-cli 腳手架：

// 全局安裝 vue-cli
$ npm install --global vue-cli

3.構(gòu)建 vue 項(xiàng)目

// 通過命令行進(jìn)入你期望創(chuàng)建項(xiàng)目的目錄
// 創(chuàng)建一個基于 webpack 模板的新項(xiàng)目，my-project 為項(xiàng)目名稱，可自定義
$ vue init webpack my-project

執(zhí)行上述命令之后，還需對項(xiàng)目進(jìn)行一些設(shè)置（按個人需要選擇）：

// 項(xiàng)目名
Project name my-project
// 項(xiàng)目描述
Project description A Vue.js project
// 作者
author hechengzhang
// 構(gòu)建方式（獨(dú)立構(gòu)建、運(yùn)行時構(gòu)建，默認(rèn)為獨(dú)立構(gòu)建）
Vue build standalone
// 是否安裝路由（Y）
Install vue-router?（Y/N）
// 是否使用 ESLint 檢測你的代碼（N）
Use ESLint to lint your code?（Y/N）
// 是否使用 Karma + Mocha 進(jìn)行單元測試（N）
Setup unit tests with Karma + Mocha?（Y/N）
// 是否使用 Nightwatch 進(jìn)行 e2e 測試（N）
Setup e2e tests with Nightwatch? （Y/N）

然后通過命令進(jìn)入項(xiàng)目，安裝依賴：

// 進(jìn)入項(xiàng)目
$ cd my-project
// 安裝依賴
$ npm install
// 運(yùn)行項(xiàng)目
$ npm run dev

運(yùn)行項(xiàng)目會自動打開瀏覽器，當(dāng)你看到 vue 的歡迎界面時，項(xiàng)目就已經(jīng)搭建成功了：

項(xiàng)目運(yùn)行時，命令行狀態(tài)如下圖（下圖截自 mac 終端，windows 有稍微區(qū)別）：

注：通過 control + c 可以終止運(yùn)行項(xiàng)目

結(jié)語

到這里 vue 已經(jīng)成功安裝了，下一篇介紹基于 vue-cli 搭建的應(yīng)用的項(xiàng)目文件介紹。

附：Vue.js 中文官網(wǎng)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112181.html

發(fā)表評論

登陸后可評論

0條評論

mmy123456

男|高級講師

我要關(guān)注我要私信

TA的文章

WeVPS：$22/月/1GB內(nèi)存/20GB SSD空間/3TB流量/1Gbps端口/KVM/臺灣；

閱讀 1618·2021-09-08 10:42
Sectigo：20%中小企業(yè)遭到黑客攻擊，企業(yè)應(yīng)如何保護(hù)網(wǎng)站安全？ Sectigo的一項(xiàng)新研究《網(wǎng)

閱讀 3603·2021-08-11 10:23
Echarts4.0 使用系列——折線圖，這里可能有你需要的

閱讀 3959·2019-08-30 14:10
CSS盒模型與BFC

閱讀 2732·2019-08-29 17:29
Vue.js 2.0 輕松入門（一）

閱讀 3090·2019-08-29 12:50
純前端表格控件 SpreadJS 內(nèi)測邀請

閱讀 636·2019-08-26 13:36
Deno 并不是下一代 Node.js

閱讀 3456·2019-08-26 11:59
每日 30 秒 ? 字符編碼排雷錄

閱讀 1487·2019-08-23 16:23

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vue.js 2.0 輕松入門（一）

1.1.替換 npm 鏡像源

相關(guān)文章