Logo

# Vue2教程 - 2 开发环境搭建

Vue 是很灵活的，在使用 Vue 的时候，我们可以在自己的项目中，某一部分功能或页面使用Vue，也可以将整个项目创建为 Vue 的前端应用。

所以对不同的 Vue 使用方式，Vue 的安装方式也不同。

# 2.1 独立安装

如果我们只是想在已经有的项目中引入 Vue，可以使用这种方式，很简单，直接引入 Vue 的 js 文件即可。

我们可以在Vue.js的官网上直接下载 vue.js，下载地址（官网安装方式里可以下载）：

  • 开发环境：https://v2.cn.vuejs.org/js/vue.js
  • 生产环境：https://v2.cn.vuejs.org/js/vue.min.js

开发环境不要使用最小压缩版，不然会没有错误提示和警告！

只需要在自己的 HTML 页面使用 <script> 标签引入即可：

<script src="vue.js"></script>
1

# 2.2 使用CDN方法

其实和上面的方式比较，使用场景是一样的，只是上面将 vue.js 下载到自己的项目中，这种方式是直接从网络上获取 vue.js 。

<!-- 开发环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<!-- 生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
1
2
3
4
5

# 2.3 NPM方法（推荐）

如果要开发前后端分离的项目，推荐这种方法。使用这种方式，我们可以完整的使用 Vue 的功能，例如页面路由等，帮助我们来开发单页面应用。

在用 Vue.js 构建大型应用的时候推荐使用 NPM 安装方法，NPM 能很好的和诸如 Webpack 或者 Browserify 模块打包器配合使用。

这种方式安装Vue，需要先安装几个工具：

  • nvm ：这个是用来管理 node.js 版本的工具，推荐使用这个来安装Nodejs，还可以切换Nodejs的版本。

  • node.js环境 ：npm包管理器，管理项目的第三方依赖和插件

  • cnpm（可选） ：npm的淘宝镜像，加速依赖下载

  • vue-cli ：搭建vue项目的脚手架工具

# 2.3.1 安装nvm

安装 Node.js 可以使用 nvm 来安装，通过 nvm 可以很方便的切换 Node.js 版本。

# 1 windows安装nvm

在 github 上搜索 nvm-windows ：

然后点击发布的版本，进行下载：


下载完成后进行安装。

选择安装路径：

选择Nodejs安装路径：


安装完成，打开终端，可以查看 nvm 的版本：

nvm  -v
1

# 2 Mac或Linux安装nvm

执行如下命令（这个也是在github上的说明，搜索nvm）：

# 安装nvm 
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 刷新环境变量
source ~/.bashrc

# 检查nvm版本，检查是否安装成功
nvm -v
1
2
3
4
5
6
7
8

但是上面的方式，因为网络原因还是可能安装失败，如果安装失败，实在不行，就在 github 上下载 nvm 源码。然后解压到指定的目录。

github上搜索 nvm，或者直接访问 https://github.com/nvm-sh/nvm 。

例如我下载了 nvm-0.39.7.tar.gz，然后解压到 /usr/share 目录下：

cd /usr/share
# 解压
tar -zxvf nvm-0.39.7.tar.gz
1
2
3

然后配置环境变量

vim ~/.bashrc
1

在 ~/.bashrc 文件中添加如下内容：

# nvm的安装路径
export NVM_DIR="/usr/share/nvm-0.39.7"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
# nodejs下载更换淘宝镜像
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
1
2
3
4
5
6

然后刷新环境变量，并查看nvm版本：

# 刷新环境变量
source ~/.bashrc

# 检查nvm版本，检查是否安装成功
nvm -v
1
2
3
4
5

# 2.3.2 安装Node.js

安装完 nvm 就可以使用 nvm 安装 Node.js 了。

# 1 windows

使用如下命令可以下载和查看Nodejs版本：

# 显示远程可以安装的nodejs版本
nvm list available

# 显示本地安装的nodejs版本
nvm list

# 安装指定的版本
nvm install [version]
nvm install 20.15.0

# 卸载指定的nodejs版本
nvm uninstall [verson]
# 例如
nvm uninstall 20.15.0

# 使用指定的nodejs版本
nvm use [verson]
# 例如
nvm use 20.15.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

安装完成，可以查看node版本：

# 查看当前使用的node版本
node -v
1
2

# 2 Mac或Linux

# 查看所有能安装的nodejs版本
nvm ls-remote 

# 安装指定的版本，20.15.0是长期支持的版本，当然你也可以安装最新的版本
nvm install 20.15.0

# 使用指定版本，临时有效
nvm use 20.15.0

# 设置node默认版本
nvm use 20.15.0
nvm alias default 20.15.0

# 查看安装的node版本
nvm list
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面在查看和安装的时候可能会遇到一个问题，就是 nvm ls-remote 执行结果可能只显示"iojs-"开头的版本，那么尝试下面的方式：

# 由于网络问题nvm ls-remote执行结果可能只显示"iojs-"开头的版本，如果是这样，尝试下面的指令试试
NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist nvm ls-remote
NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist nvm install 20.15.0
1
2
3

安装完成，可以查看node版本：

# 查看当前使用的node版本
node -v
1
2

# 2.3.3 安装cnpm

使用 cnpm 主要是使用淘宝的镜像源，加速依赖包的下载。

# 安装淘宝cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

# 后面安装依赖可以使用cnpm
cnpm install 包名
1
2
3
4
5

如果你不想使用 cnpm ，也可以直接修改 npm 的镜像源，使用淘宝的镜像源：

# 设置npm的镜像源
npm config set registry https://registry.npmmirror.com

# 查看npm的镜像源
npm config get registry

# 删除当前镜像源，使用官方默认
npm config delete registry
1
2
3
4
5
6
7
8

# 2.3.4 安装vue-cli

vue-cli（Vue Command Line Interface）是Vue.js的官方脚手架工具，用于快速生成Vue工程化项目。它提供了一套从项目创建、开发到构建和部署的完整流程，旨在简化Vue应用程序的开发过程。

# 安装vue-cli
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
1
2
3
4

后面我们会使用 vue-cli 来创建项目。

# 2.4 安装VSCode

这里我就使用 VSCode 了，免费，而且 Vue 官方针对 VSCode 开发了插件，所以还是不错的选择。

当然你也可以使用 WebStorm，WebStorm 我认为是无敌的 ^_^。

在 VSCode 中搜索 vue，找到 Vue - Official 并安装，这是官方开发的插件：


下面开始开发，Talk is cheap , show me your code!

屁话少说，放码过来！

← 03-HelloWorld →