Vue.js 2.0 輕松入門（一）

617035918 發布于2019-08-20 17:32 / 798人閱讀

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

Vue — 漸進式 JavaScript 框架 介紹 Vue.js 是什么

vue.js 是一套構建用戶界面的漸進式框架，采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。

漸進式框架

Vue 分層設計，每層都可靈活的接入其他方案。

Declarative Rendering -- 聲明式渲染

Component System -- 組件系統

Client-Side Routing -- 客戶端路由

Large Scale State Management -- 狀態管理

Build System -- 構建系統

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

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

安裝 vue

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

直接在 html 中使用 vue

嘗試 Vue.js 最簡單的方法是使用 JSFiddle Hello World 。你可以在瀏覽器新標簽頁中打開它，跟著例子學習一些基礎用法?；蛘吣阋部梢詣摻ㄒ粋€本地的 .html 文件，然后通過如下方式引入 Vue：

主要講述下面這種安裝方式，之后都是基于 vue-cli 構建的項目進行講解。

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

因為需要使用到 Node.js 的包管理工具 npm，所以先檢查自己電腦是否安裝了 node。

node.js 的官方下載地址：點我進入 node.js 的官方下載地址

下載電腦系統對應文件，然后進行安裝，安裝成功之后通過命令行工具進入 node.js 安裝目錄。

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

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

1.1.替換 npm 鏡像源

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

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

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

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

2.安裝 vue-cli

vue-cli 是用于構建 vue 應用的腳手架，通過它可以快速構建 vue 項目。

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

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

3.構建 vue 項目

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

執行上述命令之后，還需對項目進行一些設置（按個人需要選擇）：

// 項目名
Project name my-project
// 項目描述
Project description A Vue.js project
// 作者
author hechengzhang
// 構建方式（獨立構建、運行時構建，默認為獨立構建）
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 的歡迎界面時，項目就已經搭建成功了：

項目運行時，命令行狀態如下圖（下圖截自 mac 終端，windows 有稍微區別）：

注：通過 control + c 可以終止運行項目

結語

到這里 vue 已經成功安裝了，下一篇介紹基于 vue-cli 搭建的應用的項目文件介紹。

附：Vue.js 中文官網

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83657.html

Vue.js 2.0 輕松入門（一）

摘要：的官方下載地址點我進入的官方下載地址下載電腦系統對應文件，然后進行安裝，安裝成功之后通過命令行工具進入安裝目錄。注系統命令行工具通過開始菜單輸入打開，系統為終端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 漸進式 JavaScript 框架介紹 Vue.js 是什么 vue.js 是一套構建用戶界面...

mmy123456 2019-08-29 12:50 評論0 收藏0
Vue.js 2.0 輕松入門（一）

摘要：的官方下載地址點我進入的官方下載地址下載電腦系統對應文件，然后進行安裝，安裝成功之后通過命令行工具進入安裝目錄。注系統命令行工具通過開始菜單輸入打開，系統為終端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 漸進式 JavaScript 框架介紹 Vue.js 是什么 vue.js 是一套構建用戶界面...

red_bricks 2019-08-01 17:03 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

zxhaaa 2019-08-22 16:11 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

JouyPub 2019-08-02 10:10 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團隊組織網站說明騰訊團隊騰訊前端團隊，代表作品，致力于前端技術的研究騰訊社交用戶體驗設計，簡稱，騰訊設計團隊網站騰訊用戶研究與體驗設計部百度前端研發部出品淘寶前端團隊用技術為體驗提供無限可能凹凸實驗室京東用戶體驗設計部出品奇舞團奇虎旗下前一、團隊組織網站說明騰訊 AlloyTeam 團隊騰訊Web前端團隊，代表作品WebQQ，致力于前端技術的研究 ISUX 騰...

vslam 2019-08-30 15:53 評論0 收藏0