Vue安装详细步骤

Vue简介

Vue web前端三大主流框架之一，是一套用于构建用户界面的渐进式框架。
Vue 的目标在于简化Web开发。
Vue自身只聚焦于视图层，因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue也完全有能力地驱动复杂的单页应用。

Vue安装方式

有三种方式：独立版本、CDN方法、NPM方法
推荐使用最后一种，在用Vue.js构建大型应用的时候推荐使用NPM安装方法，NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用，同时 Vue 也提供配套工具来开发单文件组件。

1、独立版本

可以在 Vue.js 的官网上直接下载 vue.min.js 并用

2、CDN方法

对于制作原型或学习，可以这样使用最新版本：

对于生产环境，官网推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

3、NPM(推荐)

在开始安装之前，我们需要了解什么是node.js、npm、cnpm和vue-cli

• Node.js 是运行在服务端的 JavaScript，是一个基于Chrome V8引擎的JavaScript运行环境。
• npm（node package manager）：nodejs的包管理器，用于node插件管理，例如安装、卸载、管理依赖等。
• cnpm：因为npm使用的是国外的服务器下载，网络很不稳，会出现异常，淘宝团队就将npm官网的插件都同步到了在中国的服务器，这样可以让我们从这个服务器上稳定下载资源。
• vue-cli是一个基于 Vue.js 进行快速开发的完整系统， cli是Command-Line Interface，即命令行界面，也叫脚手架。 vue cli 是vue.js官方发布的一个vue.js项目的脚手架。 使用vue-cli可以快速搭建vue开发环境和对应的webpack配置。

npm安装

1、安装node

官网下载一个版本，
不推荐最新版，我自己是在node中文网下载的14.18.1版本
http://nodejs.cn/
下载完成之后，一直下一步：



安装好之后可以win+R 查看一下：
输入

node -v 

查看一下node版本

2、安装vue-cli

安装好node，我们就可以来安装vue-cli，在这里我们有三种方式：

第一种方式：用npm安装：

npm install -g @vue/cli

第二种方式：cnpm安装：
先下载淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后用cnpm安装vue-cli

cnpm install -g @vue/cli

第三种方式：（推荐）用yarn安装：

• yarn是经过重新设计的npm客户端，于2016年10月发布，相比于npm，yarn在运行速度上有显著的提升，安装时间变少，功能上也有很多改进。

先安装yarn

npm install -g yarn

就可以使用yarn下载vue-cli了

拓展：可以再将yarn设置为淘宝镜像，这样速度更快：

yarn config set registry https://registry.npm.taobao.org

3、创建vue项目

安装好vue-cli了，接下来就可以创建项目啦。
自己定义项目名，不可使用驼峰式命名）

vue create project-name

回车之后会被提示选取一个 preset。可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

我一般选择的就是默认的

安装完成后

cd firstvue

进入之后启动项目就可以了，使用npm或者yarn都可：

npm run serve

yarn serve

复制网址打开即可：