搭建php环境,浅入深出Vue:环境搭建

 2023-09-28 阅读 26 评论 0

摘要:浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了。 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直接Next 搭建php环境。这里同样的,有固态硬盘的童鞋可以安装

浅入深出Vue:环境搭建

工欲善其事必先利其器,该搭建我们的环境了。

安装NPM

所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序

下载下来后,直接Next

617556-20190417223023065-238451541.png

617556-20190417223029705-1832067282.png

搭建php环境。这里同样的,有固态硬盘的童鞋可以安装到固态硬盘,不过这里有个小问题就是
在选择目录的时候会卡死一小会儿。可能是若羽的机器性能不太好。

617556-20190417223039809-1435412459.png

接下来一路下一步即可,坐等安装

617556-20190417223049804-1614319408.png

安装完成,让我们命令行测测看

617556-20190417223056177-1285560084.png

搭建java环境。win键 + R呼出运行,输入cmd确定即可

617556-20190417223102380-110556462.png

输入node -v,查看nodejs的版本。若羽这里装的是v10.15.0

617556-20190417223111153-1631896400.png

输入npm -v,查看npm的版本。若羽这里是6.4.1

617556-20190417223118251-477727252.png

切换国内镜像源

vue3项目搭建、npm默认是国外的源,对国内的用户不太友好,安装各种库速度很慢。

因此我们尽可能选择国内的源减少网络问题,这里若羽选择的是淘宝 npm镜像。同样的,在导航篇中都有地址噢。

这里我们输入官方提供的命令(注:在官方地址中的使用说明处给出了这条命令,这里为了方便,若羽复制了过来)

npm install -g cnpm --registry=https://registry.npm.taobao.org

617556-20190417223125848-1675520977.png

好的,安装完成

手动搭建vue项目、617556-20190417223131452-1809930066.png

安装webpack

接下来让我们安装webpack

输入下面的命令,我们进行全局的webpack安装

cnpm install -g webpack

617556-20190417223137995-1833576901.png

安装完成

大数据开发环境搭建。617556-20190417223144634-1753127417.png

接下来我们安装 webpack-dev-server

cnpm install -g webpack-dev-server

617556-20190417223150986-1028194158.png

安装完成

617556-20190417223157185-940423289.png

vue环境搭建?因为我们这里没有安装webpack-cli,因此我们暂时没办法用webpack -v去查看
我们所安装的webpack版本。

安装vue-cli

好的,接下来终于到了正主儿了。

全局安装vue-cli

cnpm install -g vue-cli

617556-20190417223204188-1920730908.png

安装完成

vue从入门到项目实战?617556-20190417223210344-1914553364.png

vue -V来查看一下安装的vue版本,这里若羽安装的版本是2.9.6

617556-20190417223219035-1114855525.png

新建项目

前置工具,环境都已经准备完毕了。是时候开始新建一个项目了。

先切换到我们指定的目录下去, windows下也可以用cd 目标目录进行切换噢。
切换盘符是盘符:,比如切换到D盘的命令:

D:

linux环境搭建?还有另一个办法,就是对着目标目录的空白处。按住左 Shift的同时,按下鼠标右键
弹出的菜单中会有一个在此处打开Powershell窗口的选项,选择此选择即可直接在命令行中进入当前目录。

这里我们用vue-cli来建立我们的第一个项目

vue init webpack blog

上述命令中, blog表示的是我们新建项目的名称。这行命令应该这么说

vue init webpack 你要新建的项目名

617556-20190417223229324-955694915.png

搭建,基本上不用考虑选什么的问题,直接默认即可(咱们现阶段的目的是快速搭建)。
默认中包含了vue-routereslint的选项,正好避免我们再去手动装一下的步骤了。
这里提一下两个地方,第一个是下图中Pick a test runner
这里若羽选择的是none,因为我们的项目还没考虑写测试哈,所以若羽就顺手给干掉了。
需要的时候我们再加进来。

617556-20190417223236995-28556493.png

另一个就是这里,选择的是user NPM。 昂,不过这个选项是默认的。可以不用在意

617556-20190417223243416-1017474912.png

好了。开始初始化~

617556-20190417223250642-861272695.png

搭建环境是什么意思?安装完成

617556-20190417223256425-958312645.png

运行项目

我们的第一个项目已经创建完成了,我们先让它跑起来看看~
项目运行两部曲:

install一下,虽然大多数情况下可以不需要。我们这里就勤快一下,也作为演示的一部分

cnpm install

617556-20190417223305403-605735317.png

为什么要9浅1深,在开发环境下运行,编译完后会显示这个页面。就表示已经编译完成了。

cnpm run dev

617556-20190417223312909-1767632323.png

在浏览器中输入地址,即可开箱食用我们的第一个项目了~

localhost:8080

617556-20190417223319383-1820716201.png

九浅一深,跟着若羽一步一步,跑起来自己的项目,不用担心若羽会漏掉什么。
从工具到环境,都不会落下的。
请放心食用~ :)

转载于:https://www.cnblogs.com/By-ruoyu/p/10260451.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/1/102220.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息