vue运行环境搭建详解,前端vue开发环境搭建

vue运行环境搭建详解,前端vue开发环境搭建,Vue项目环境搭建详细总结

本文主要介绍Vue项目环境建设的总结,有一定的参考价值,感兴趣的朋友可以参考一下。

关于Vue安装的详细步骤总结

安装NodeJs

首先解释一下nodejs是什么,为什么要装node?node的优势?

Node.js是一个运行在chromeJavascript运行时环境(俗称GoogleV8引擎)的开发平台,用于方便快捷地创建服务器端网络应用。也可以理解为轻量级的JSP或者PHP环境,如果用来开发Web应用,有时候会方便很多。

node.js最大的优点是处理并行访问。如果一个web应用同时有很多访问连接,就可以体现出使用Node.js的优势。

另一个优点是使用javascript作为服务器端脚本语言可以消除一些与浏览器端js脚本的冲突。甚至发挥javascript动态编程的特点,在服务器和浏览器之间建立直接的动态程序。

一般来说,node.js可以像PHP一样开发动态网站和web应用。

安装步骤

安装环境:Windows7 x64

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

(1).开始-搜索cmd- enter,在命令行输入node -v,然后输入。如果“‘Node’不是内部或外部命令,也不是可运行的程序……”出现,说明没有安装node.js

(2).https://nodejs.org/en/下载安装node.js(选择LTS格式)。下载后,双击开始安装,然后单击下一步:

(3).勾选“我接受许可协议中的条款”表示同意许可协议,点击“下一步”,出现如下界面:

(4)4). node . js的默认安装路径是“C:Program Filesnodejs”,可以修改其他磁盘(我选择安装在D盘)。点击下一步,出现安装模式和模块选择界面:

(5).然后单击下一步:

(6).确认后,单击“安装”开始安装:

(7).耐心等一会儿。安装完成后,单击完成:

(8).打开cmd(Windows R)并检查节点是否安装成功:

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

(这种安装比较慢,也可以用淘宝镜像安装。直接在cmd中输入:NPM install-g cnpmregistry=https://registry.npm.taobao.org,按Enter键并等待安装.(windows以管理员身份安装))

2.安装全局webpack

在命令行上,输入:npm install webpack -g (C驱动器C)进行全局安装:

3.安装vue-cli脚手架工具

在命令行上,输入:npm install -g vue-cli (C驱动器C)进行全局安装:

回车:vue,回车,如果出现vue消息,说明安装成功。

4.创建项目

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

5.进入项目文件夹:

CD mypro(CD vue init web pack mypro中的项目名my pro),回车进入项目文件夹:

输入:npm install初始化并安装依赖包node_modules。

6.安装完成后输入:npm run dev 运行测试:

7.最后浏览器弹出结果为:

补充:

Vucli3安装:

一.安装

npm安装-g @vue/cli

或者

yarn全局添加@vue/cli

检查vue -V v。

其次,创建一个新项目

npm创建管理员

Admin是您需要创建的项目的名称。在这里,如果你是第一次使用3.0版本,没有前两个,只有后两个。在这里你可以选择。第一个是默认配置。一般可以选择第二种,自己配置。这里你可以选择最后一个。

3.回车后,会弹出以下选项

当你选择的时候,就会出现上图的东西。在这里可以自由选择使用哪种配置,按上下键选择哪种,按空格键确定,全部选择完毕后,按回车键进入下一步。你可以在这里根据自己的需求进行选择。

第四,安装预处理语言。

这一步会问你安装哪种CSS预处理语言,你可以根据自己的需求来选择。

第五,选择自动代码格式检测。

以上是问你关于代码格式检测的问题。使用vscode editor的beauty-Code formatter插件,您可以选择下一个。

第六,保存设置

上图中的第一个选项询问您是否要保存之前的配置。选择OK后,下次您将创建一个新项目,并且您将拥有以前选择的配置,因此您不需要再次重新配置它。

七、选择配置文件的位置。

上图的意思是你把babel,postcss,eslint ESLINT之类的配置文件放在哪里?

第一个是:放独立文件。

第二个是:放在package.json里

建议在这里放一个单独的配置文件。选择第一个。

八、最后一步保存设置。

倒数第二行询问您是否要将以上内容保存为未来项目的预配置?

最后一个是描述项目。你可以随意选择。单击“确定”开始下载模板。

九。下载模板

Admin进入项目并启动服务npm run serve。这里没有vue.config.js文件。

X.创建一个新的vue.config.js文件来配置项目。

这就是本文的全部内容。希望对大家的学习有帮助,支持我们。

vue运行环境搭建详解,前端vue开发环境搭建