WEB前端框架——Windows系统上VUE的环境搭建

WEB前端框架——VUE的环境搭建 步骤：

1.搭建nodejs环境

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

3.运行一个GitHub上的工程

 

一、nodejs环境搭建：

官网首页（ https://nodejs.org/en/ ）下载node安装包，左边是稳定版本，右边是最新版本。

                                                                                 Node.js官网首页

 

下载完成后打开安装包，除了选安装路径以外其余一路next、accept。对，就这么粗暴！

 

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

Win+R (打开运行窗口)

->输入cmd并点击”确定”  (打开windows命令行工具)

->在命令行工具里输入：node -v后单击回车键   (注意：node和 –v之间有空格哦)

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

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

到此，出现如”v10.16.0”的版本号则说明node安装成功。

 

二、开始搭建vue环境:

我们先打开vue的官网（ https://cn.vuejs.org/ ）进入到教程文档里的”安装”一栏：

Vue搭建、新建工程并打开浏览器调试的指令：这四行命令就是我们接下来工作了。

1.npm install –global vue-cli : 我们在安装好node.js后就可以用到“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的工程模板页面，大功告成！

 

三、在GitHub上下载一个工程并运行

点击download按钮下载一个工程压缩包，解压缩后，打开一个新的命令行窗口

cd 到该文件夹目录下

运行命令：npm run dev  将在浏览器中运行该项目，结束！