VUE的环境搭建

技术哥

给你不一样的世界

关注

前端学习从零起步 --Vue

全文字数： 1249

阅读时间： 4分钟

“

时下国内最火的三大前端框架有：Angular、React、Vue，其中Vue因其性能好、入门快、轻量化、可拓展性强、数据流双向绑定、灵活等特点，成为了许多前端开发者搭建框架的首选。

”

Vue-Bulma开发的图表UI界面

(转自github 用户wangxg2016/vue-bulma)

通过Vue开发的高仿知乎日报手机端应用

(转自github用户hilongjw/vue-zhihu-daily)

今天我们就开始学习基于vue的前端框架

步骤：

1.搭建nodejs环境

2.搭建vue环境并新建第一个模板工程

以下教程以windows7 x64为例：

一、nodejs环境搭建：

官网首页:https://nodejs.org/en/，我们可以直接下载node安装包，推荐选左边的8.11.1LTS稳定版本，因为右边的最新版可能不会很稳定。

Node.js官网首页

当然还可以进download页下载，选中对应系统位数的installer(安装包)而不是Binary(免安装压缩包，需要手动配环境变量)，这里我们选Windows Installer(.msi) 64-bit：

Node.js官网下载页

下载完成后打开安装包，除了选安装路径以外其余一路next、accept。对，就这么粗暴！这里我把node.js安装在E:\目录下：

Node.js安装包

安装完成后，我们需要检测下是否安装成功了：

Win+R(打开运行窗口)

->输入cmd并点击”确定”

(打开windows命令行工具)

->在命令行工具里输入：

node -v后单击回车键

(node和 –v之间有空格哦)

* 注：命令行工具建议以管理员身份运行

命令行工具打印Node.js版本号

到此，出现如”v8.2.1”的版本号则说明node安装成功，则直接跳过如下特殊问题

关于node安装的特殊问题：

如果通过上面的步骤安装但出现：

“‘node’ 不是内部或外部命令，也不是可运行的程序或批处理文件”则说明还需要配置一个叫环境变量的东西。

给node.js配置环境变量就相当于告诉计算机node.js文件路径在哪：

右键点击”我的电脑”

->点击”属性”

->点击”高级系统设置”

->点击” 环境变量”

->在”系统变量”这一栏下找到”path”

->双击’path’进入编辑，在’值’后加上;E:/nodejs

->” 环境变量”窗口点’’确定”保存设置

->”系统属性”窗口点”确定”保存设置

->重新打开命令行工具输入node -v检查是否配 置成功。

*注：每次配置环境变量都需要重新打开命令行工具测试配置成功与否

二、开始搭建vue环境:

我们先打开vue的官网（https://cn.vuejs.org/）

进入到教程文档里的”安装”一栏：

Vue搭建、新建工程并打开浏览器调试的指令：

这四行命令就是我们接下来工作了。

1.npm install –global vue-cli: 我们在安装好nodejs后就可以用到“npm”这个前缀指令，并且通过node这个“仓库”，我们以后可以通过命令行工具安装其他很多的东西如angular-cli等。这里的指令意思是“通过node 全局安装vue-cli”，安装的时间会比较长，耐心等待~

*注：下载太慢的话可以把npm换成国内镜像：

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

通过node”仓库”安装vue-cli工具

如上，安装成功~

2.vue init webpack my-project: 刚才我们通过node安装了vue-cli工具，vue-cli是vue的命令行工具，通过它我们可以新建我们第一个vue模板工程。这里的指令意思是：vue init [模板名] [新建的模板工程文件夹名称]，“通过vue-cli新建webpack模板工程，名字为my-project”

新建工程的问题建议像如下去填：

新建Vue模板工程时询问的问题

3.cd my-project: 进入到我们新建的my-project工程：可以看到命令行工具指向的当前路径改变了：

进入到刚刚新建的工程模板目录

4.npm run dev：运行工程，打开浏览器调试。（请不要关掉命令行工具）

5.打开浏览器调试

出现这个窗口，说明已在本地端口8080打开浏览器调试，我们在浏览器上地址栏输入并打开：localhost:8080

新建的工程模板

这就是Vue的工程模板页面，大功告成！

接下来就开始你的深入学习吧～

• end •

编辑 | 技术哥