Vue项目环境搭建的示例

  介绍

这篇文章主要介绍Vue项目环境搭建的示例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强>安装NodeJs

首先解释一下什么是NodeJs,为什么要安装节点?节点的优点吗?

node . js是一个运行在chromeJavascript运行环境下(俗称GoogleV8引擎)的开发平台,用来方便快捷的创建服务器端网络应用程序,也可以把它理解为一个轻量级的JSP或PHP环境,如果用来开发网络应用的话,有时要便捷很多。

node . js的最大优点是处理并行访问,如果一个Web应用程序同时会有很多访问连接,就能体现使用node . js的优势。
另一个好处是,使用javascript作为服务器端脚本语言,可以消除一些与浏览器端js脚本的冲突。甚至发挥javascript动态编程的特性,在服务器与浏览器之间建立直接的动态程序。
总的来说,node . js可以像PHP一样开发动态网站和网络应用。

<强>安装步骤

安装环境:Windows7 x64

<强> 1。第一步检测一下电脑是否安装node . js

(1)。开始,搜索cmd -回车,在命令行输入节点- v,回车,如果出现“& # 39;节点# 39;不是内部或外部命令,也不是可运行的程序…”时说明没有安装node . js,

(2)只,下载并安装节点。js(选择LTS格式),下载好后双击开始安装,点击下:

 Vue项目环境搭建的示例

(3)。勾选“我接受许可协议中的条款”同意许可协议,并单击下一个下一步,出现如下界面:

 Vue项目环境搭建的示例

(4) .Node。js默认安装路径为“C: \ Program Files \ nodejs \”,可以修改其他盘(我选择的是安装在D盘),单击下,出现安装模式及模块选择界面:

 Vue项目环境搭建的示例

(5)。接着点击下:

 Vue项目环境搭建的示例

(6)。确认无误后,点击安装,开始安装:

 Vue项目环境搭建的示例

(7)。耐心等待一会,安装完成,点击完成即可:

 Vue项目环境搭建的示例“> <img src=

(8)。打开cmd (Windows + R)、检测节点是否安装成功:

,首先测试npm是否安装成功,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行输入“npm - v”来测试是否安装成功。

(这种安装较慢,也可以利用淘宝镜像进行安装,,在cmd里直接输入:npm安装- g cnpm注册表=https://registry.npm.taobao.org,回车,等待安装…(Windows使用管理员身份进行安装))

 Vue项目环境搭建的示例

<强> 2。安装全局webpack

在命令行里输入:npm安装webpack - g (C盘)进行全局安装:

 Vue项目环境搭建的示例

<强> 3。安装vue-cli脚手架工具

在命令行里输入:npm安装- g vue-cli, (C盘)进行全局安装:

输入:vue,回车,如果出现vue信息说明安装成功

 vue项目环境搭建的示例

<强> 4。创建项目

关闭命令行,任意选择一个盘(这里,我选择D盘,新建一个名为mypro的文件夹),把mypro文件夹放进HBuilder,进入D盘mypro文件夹,右键选择在此处打开命令窗口,输入vue init webpack mypro回车:

 vue项目环境搭建的示例

<强> 5。进入项目文件夹: cd mypro,(cd +, vue init webpack mypro,中的项目名字mypro),回车进入项目文件夹:

输入:npm安装,,初始化,安装依赖包node_modules

 Vue项目环境搭建的示例

<强> 6。安装完成后输入:npm运行dev,运行测试:

 Vue项目环境搭建的示例

Vue项目环境搭建的示例