vue脚手架搭建教程

一、nodejs环境搭建：

官网首页这里我们就可以直接下载node安装包了，推荐选左边的8.11.1LTS稳定版本，因为右边的最新版可能会不是很稳定。

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

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

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

Win+R (打开运行窗口)

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

(打开windows命令行工具)

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

node -v后单击回车键

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

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

如果通过上面的步骤安装但出现：
“ ‘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”

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

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

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

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

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

作者：Tdata技术哥
链接：https://www.jianshu.com/p/c275414839dc
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。