Vue从零开始(1):前端环境搭建

less than 1 minute read

前言

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。

本系列将带着大家从零开始快速入门Vue。

环境搭建

1.安装nvm(Node.js版本管理器)

Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它是一个让JavaScript运行在服务端的开发平台。目前Node.js最新版本为v14.0.0。由于Node.js更新速度快,有时候新版本还会将旧版本的一些API废除,以至于写好的代码不能向下兼容。为了应对这种情况,我们可以使用nvm管理器,它是一款Node.js版本管理器,它能够在一台机器上维护多个版本的Node.js,可以按需切换。

  1. Mac使用curl或者wget方式安装nvm:

    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
    
    $ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
    

    Windows安装在这里,下载安装包进行安装。

  2. 安装完成后,输入nvm --version查看当前安装版本:

    $ nvm --version
    

  3. 使用nvm安装Node.js:

    $ nvm install 10.19.0 	#安装指定版本Node.js(v10.19.0)
    
  4. 安装完成后使用nvm ls查看当前安装的Node.js列表(我这里还安装了v8.12.0和v13.13.0两个版本):

    $ nvm ls
    

    上面第四行:default -> 10 (-> v10.19.0) 表示当前所使用的默认版本是v10.19.0

    使用nvm alias default <version>指定全局默认的Node.js版本,使用nvm use <version>将Node.js切换至指定版本。

    注意nvm use <version>所设置的版本只在当前命令行环境生效

  5. Node.js安装完成后,使用node -v可以查看当前所使用的Node.js版本:

    $ node -v
    

2.安装cnpm(可选)

安装好Node.js之后,它会自带一个叫npm的东西,它是随同Node.js一起安装的包管理工具。它允许用户从npm服务器下载他人编写的第三方包到本地使用,也可以上传自己编写的第三方包到npm服务器上面以供别人使用。

可以使用npm -v来查看当前Node.js所自带的npm版本:

$ npm -v

由于npm服务器在国外,有时候下载依赖包的时候会很慢甚至超时导致下载失败。如果碰到这种情况我们可以安装cnpm(淘宝npm镜像),它是一个完整的npmjs.org镜像,每10分钟同步一次。

  1. 使用npm命令安装cnpm:

    $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    
  2. 安装完成后,使用cnpm -v查看当前cnpm版本:

    $ cnpm -v
    

    这时候我们就可以使用cnpm来替代npm下载依赖包了

3.安装Vue CLI

Vue CLI是一个基于Vue.js进行快速开发的完整系统,它可以快速搭建一个项目脚手架,基于webpack构建,支持插件,并且提供图形化界面来管理Vue.js项目。

Node版本要求:Vue CLI需要Node.js8.0或更高版本。

  1. 使用npm或cnpm安装:

    $ npm install -g @vue/cli
    
    $ cnpm install -g @vue/cli
    
  2. 安装完成后,使用vue --version查看当前版本:

    $ vue --version
    

写在最后

到这里,运行Vue项目所需要的前端环境已经搭建完毕。下一篇将介绍如何使用Vue CLI快速搭建一个项目脚手架。

我慢慢的写,你们慢慢的看~

下一篇:《Vue从零开始(2):使用Vue CLI快速生成项目脚手架》