一、VScode编辑器

1、Visual Studio Code 编辑器,VS code 是微软推出的一款免费且开源的编辑器。用户根据需要自行下载安装。
国内镜像下载链接:

https://vscode.cdn.azure.cn/stable/b4c1bd0a9b03c749ea011b06c6d2676c8091a70c/VSCodeUserSetup-x64-1.57.0.exe

二、Vue的下载和引入

Vue官网下载地址:

https://v2.cn.vuejs.org/v2/guide/installation.html

为了方便学习,推荐选择开发版本。
当在HTML网页中使用Vue时,使用

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

上述代码表示引入当前路径下的vue.js文件。

三、git-bash 命令行工具

在进行Vue开发时,我们经常会使用到一些命令,如npm(包管理器)、vue-cli(脚手架),这些命令需要在命令行下使用。
git-bash是git(版本管理器)中提供的一个命令行工具,外观类似于windows系统内置的cmd命令行工具,但用户体验更友好。在实际开发中,经常会使用git-bash工具代替cmd 。
以下是git-bash的安装步骤:
1、打开git for windows官网,下载git安装包。

https://gitforwindows.org/

2、双击下载后的安装程序,进行安装。
3、单击 “Next” 按钮,根据提示进行安装,全部使用默认值即可。
4、安装成功后,启动git-bash。

四、Node.js环境

Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它可以让 JavaScript 运行在服务器端。接下来就是对 Node.js 的下载和安装进行详解。
1、打开 Node.js 官网,找到 Node.js 下载地址。

https://nodejs.org/zh-cn/

在这里插入图片描述
推荐使用LTS(长期维护)版本。
2、双击安装包进行安装。
3、安装过程全部使用默认值。安装完成后,打开git-bash命令行工具,查看Node.js版本信息,如图所示。
在这里插入图片描述

五、npm包管理工具

npm(Node.js Package Manager)是一个Node.js的包管理工具,用来解决代码部署问题。在安装Node.js时会自动安装相应的npm版本,不需要单独安装
使用npm包管理工具可以解决一下场景的需求:
1、从npm服务器下载别人编写好的第三方包到本地使用。
2、从npm服务器下载并安装别人编写的命令程序到本地使用。
3、将自己编写的包或命令行程序上传到npm服务器供别人使用。

npm中常用的命令:
npm install :安装项目所需要的全部包,需要配置package.json文件。
npm uninstall :卸载指定名称的包。
npm install 包名 :安装指定名称的包,后面可以跟参数 “-g” 表示全局安装,“–save” 表示本地安装。
npm update :更新指定名称的包。
npm start :项目启动;通过CDN方式引入Vue,可以缓解服务器压力,加快文件的下载速度(目前网上有很多免费的CDN服务器可以使用)。
npm run build :项目构建。

小提示:由于npm服务器在国外,使用npm服务器下载软件包速度非常慢,为了提高下载速度,推荐用户切换成国内的镜像服务器来使用。以淘宝NPM镜像为例,使用以下命令:

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

六、Chrome浏览器和vue-devtools拓展

浏览器是开发和调试web项目的工具,这里以Chrome浏览器为例。
vue-devtools 是一款基于Chrome浏览器的拓展,用于调试Vue应用,只需要下载官方压缩包,配置Chrome浏览器的拓展程序即可使用。
简单介绍一下安装流程:
1、下载vue-devtools-5.1.1.zip压缩包到本地。

2、将压缩包进行解压,然后在命令行中切换到解压好的vue-devtools-5.1.1目录,输入以下命令进行依赖安装:

npm install

3、构建vue-devtools工具插件,执行命令如下:

npm run build

4、将插件添加至chrome浏览器。
单机浏览器地址栏右边的三个点的按钮,在弹出的菜单中选择“更多工具”—>“拓展程序”,然后单击“加载已解压的拓展程序”,此时会弹出选择框,需要用户选择拓展安装程序目录。找到vue-devtools-5.1.1/shells/chrome目录,将其添加到拓展程序中。
配置完成后,可以看到当前vue-devtools工具信息,并在chrome浏览器窗口的右上角会显示Vue的标识。

5、如果以上操作不当,可以使用下面的一键安装。

一键安装链接:

https://devtools.vuejs.org/guide/installation.html

然后选择自己所使用的浏览器(推荐使用Chrome浏览器)

到此你的Vue开发环境就算是配置完成了!

Logo

前往低代码交流专区

更多推荐