Vue.js 2.0 轻松入门（一）

red_bricks 发布于2019-08-01 17:03 / 3348人阅读

摘要：的官方下载地址点我进入的官方下载地址下载电脑系统对应文件，然后进行安装，安装成功之后通过命令行工具进入安装目录。注系统命令行工具通过开始菜单输入打开，系统为终端。

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 中文官网

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50915.html

Vue.js 2.0 轻松入门（一）

摘要：的官方下载地址点我进入的官方下载地址下载电脑系统对应文件，然后进行安装，安装成功之后通过命令行工具进入安装目录。注系统命令行工具通过开始菜单输入打开，系统为终端。 showImg(https://segmentfault.com/img/bVPL6q?w=200&h=200); Vue — 渐进式 JavaScript 框架介绍 Vue.js 是什么 vue.js 是一套构建用户界面...

617035918 2019-08-20 17:32 评论0 收藏0
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
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 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