Vue.js 入门教程(一)-- 开发工具准备


Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue.js 特性

  • 可扩展的数据绑定
  • 将普通的 JS 对象作为 model
  • 简洁明了的 API
  • 组件化 UI 构建
  • 配合别的库使用

接下来我们进入正题。

工欲善其事,必先利其器。好的的开发工具能让我们在开发中事半功倍。
开发工具推荐:

  1. 根据个人喜好选择IDE,我所使用的是VSCode;
  2. 安装Git Bash和Node.js;
  3. 安装 Git 客户端TortoiseGit;

VsCode 安装

对于VsCode 的安装在这里不做累述,可自行百度查找安装教程。

安装Node.js

下载地址:https://nodejs.org/zh-cn/download/
根据自己电脑系统及位数选择,本教程中选择windows64位.msi格式安装包。


下载完成后,双击安装包,开始安装,一直点next即可,安装路径默认在C:Program Files下,可自行修改。


安装完成后,在CMD窗口中任意位置执行node,打开CMD窗口,执行命令node -v查看node版本


最新版的node在安装时同时也安装了npm,执行npm -v查看npm版本。


修改全局包安装路径,默认情况下,我们在执行npm install -g XXXX时,下载了一个全局包,这个包的默认存放路径位C:UsersAdministratorAppDataRoamingnpmnode_modules下,一般将全局包放在node的安装目录下:

在node安装目录下下新建两个文件夹

node_global 全局包下载存放
node_cache node缓存


修改路径

在CMD窗口执行以下两条命令:

npm config set prefix "D:\Nodejs\node_global"

npm config set cache "D:\Nodejs\node_cache"

执行命令npm install -g vue,可以发现,下载的全局包vue已经放在了我们设置的目录中。



我们更改了npm全局模块的存放路径和cache路径,此时需要修改系统环境变量。在系统环境变量中新增如下两个环境变量。


至此,Node.js 安装完成。

安装 Git Bash

下载Git Bash,官网下载地址http://www.git-scm.com/download/


双击安装程序,进入界面后一直点击【Next >】


直到这一步,设置HTTPS 传输加密方式,选择如下图方式,点击【Next >】

  • 使用OpenSSL库
  • 使用本机Windows安全通道库


之后到安装步骤,点击安装 -> 安装完成,点击【Finish】



安装 TortoiseGit

下载TortoiseGit 安装包,下载地址:https://tortoisegit.org/download/


双击下载的TortoiseGit安装包进行安装:


之后点击Next 下一步,在如下页面时选择箭头所指选项:


之后一直点击Next ,直至安装完成。


安装完成的TortoiseGit为英文,需要进行汉化。
汉化包下载地址为:https://tortoisegit.org/download/


将下载好的安装包双击安装即可。

安装完成后,点击桌面右键,将鼠标放在TortoiseGit上。


选择Settings,如下图所示,选择简体中文,点击确定即可:


再次点击右键打开,可以看到已汉化成功


至此,开发工具准备部分完成。

声明:张先生的博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Vue.js 入门教程(一)-- 开发工具准备


选择自己所爱的,然后爱自己所选择的!