前端｜VUE环境的搭建

2018-04-27 本文已影响2257人 Tdata技术哥

原创文章，转载请注明：转载自技术哥

微信订阅号：技术哥

技术哥

给你不一样的世界

前端学习从零起步 --Vue

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

Vue-Bulma开发的图表UI界面转自github用户

通过Vue开发的高仿知乎日报转自github用户

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

步骤：

1.搭建nodejs环境

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

以下教程以windows7 x64为例：

一、nodejs环境搭建：

官网首页这里我们就可以直接下载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之间有空格哦)

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

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

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

关于node安装的特殊问题

如果通过上面的步骤安装但出现：
“ ‘node’ 不是内部或外部命令，也不是可运行的程序或批处理文件 ”则说明还需要配置一个叫环境变量的东西。

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

右键点击“我的电脑”

->点击“属性”

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

->点击“环境变量”

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

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

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

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

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

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

二、开始搭建vue环境

我们先打开vue的官网看看
进入到教程文档里的“安装”一栏：

image

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

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

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

PS：下载太慢的话可以把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”

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