Laravel-mix的安装

Laravel Mix 是一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器,通过简单的调用,你可以轻松地管理前端资源。

一、安装node.js

1、windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮,根据自己需要选择版本,直接点击就会自动下载安装了。

2、安装过程基本直接“NEXT”就可以了。(windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如“C:\Program Files\nodejs”)。

3、安装完成后可以使用cmd(win+r然后输入cmd进入)测试下是否安装成功。方法:在cmd下输入node -v,出现下图版本提示就是完成了NodeJS的安装。

4、npm的安装。由于新版的NodeJS已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v"来测试是否成功安装。如下图,出现版本提示便OK了。

5、常规NodeJS的搭建到现在为止已经完成了,急不及待的话你可以在”cmd“输入”node“进入node开发模式下,输入你的NodeJS第一句:”hello world“ - 输入:console.log('hello world')。

6、npm作为一个NodeJS的模块管理,之前我由于没有系统地看资料所以导致安装配置模块的时候走了一大段弯路,所以现在很有必要列出来记录下。

①、我们要先配置npm的全局模块的存放路径以及cache的路径,例如我希望将以上两个文件夹放在NodeJS的主目录下,便在NodeJs下建立"node_global"及"node_cache"两个文件夹。如下图

②、启动cmd,输入

npm config set prefix "C:\Program Files\nodejs\node_global"

以及

npm config set cache "C:\Program Files\nodejs\node_cache"

③、现在我们来装个模块试试,选择express这个比较常用的模块。同样在cmd命令行里面,输入“npm install express -g”(“-g”这个参数意思是装到global目录下,也就是上面说设置的“C:\Program Files\nodejs\node_global”里面。)。待cmd里面的安装过程滚动完成后,会提示“express”装在了哪、版本还有它的目录结构是怎样。如下图:

④、关闭cmd,打开系统对话框,“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。如下图

⑤、进入环境变量对话框,在系统变量下新建"NODE_PATH",输入”C:\Program Files\nodejs\node_global\node_modules“。(ps:这一步相当关键。)

2014.4.19新增:由于改变了module的默认地址,所以上面的用户变量都要跟着改变一下(用户变量"PATH"修改为“C:\Program Files\nodejs\node_global\”),要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令,也不是可运行的程序或批处理文件”这个错误。

⑥、以上步骤都OK的话,我们可以再次开启cmd命令行,进入node,输入“require('express')”来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。如下图(如出错一般都是NODE_PATH的配置不对,可以检查下第④⑤步)

二、Laravel Mix下安装npm依赖

1.由于国内的网络原因,我们还需为npm 配置安装加速:

npm config set registry https://registry.npm.taobao.org

说明:此处使用的是淘宝镜像,也可以使用其他可用的镜像地址

2.执行下列命令安装:npm install

此处我是使用Phpstorm编辑器,打开Terminal,然后执行命令。这和在cmd命令框下进入项目根目录,执行npm命令效果是一样的。

安装命令正常执行安装完成后,命令框中会显示如图:

项目目录中多了一个node_modules文件夹

注意:安装过程中,遇到很多坑,现在将其与相应的解决办法依次记录下来

1)报错:node-gyp-build“不是内部或外部命令,也不是可运行的程序”

解决办法:将项目根目录下面的node_modules的文件删掉,全局安装node-gyp和node-gyp-build模块,然后再执行npm install

npm install -g node-gyp

npm install -g node-gyp-build

3.npm依赖安装成功后,执行npm run dev命令来编译前端资源时

执行过程,遇到报错,如图:

解决办法:全局安装cross-env模块

执行下列命令:npm install cross-env -g

4.执行命令:npm run watch-poll

1)成功执行后,命令框如下图所示

说明:该命令成功执行后,public文件夹下面会生成一个叫做mix-manifest.json 的文件,它的作用是,结合模板渲染的方式,有组织地加载构建后的文件。如下图:

参考文章链接:https://blog.csdn.net/huanghanqian/article/details/51440592

laravel-mix的安装的更多相关文章

  1. Laravel Mix编译前端资源

    目前项目是使用的vue+laravel来写的,其中laravel和vue分别放了一个目录,但是这样有个问题,那就是vue需要经常更新,不然运行项目会经常出现各种问题,这里就看了看laravel的文档, ...

  2. Windows 下 Composer 与 Laravel 4 的安装

    1.安装Composer Composer是PHP的依附经管对象之一,官方网站 http://getcomposer.org/ .它支撑多种安装体式格式,对于在win下做开辟的草来说,最便捷的体式格式 ...

  3. laravel项目thinksns+安装pc前端页面

    前面我们说了laravel项目ThinkSNS+安装,现在要安装给用户看的页面,方便他们进行一些操作,比如发表文字/提问之类,这个已经模块化了,用composer就可以完成.命令行代码如下(之前是co ...

  4. 练习Laravel Homestead的安装

    1 安装VirtualBox和Vagrant 在启动Homestead环境之前,你必须安装VirtualBox(https://www.virtualbox.org/wiki/Downloads)和V ...

  5. laravel new xxx 安装laravel 慢的问题

    问题:使用官方文档上安装 laravel laravel new xxx 安装速度奇慢无比,设置了composer 全局镜像也没有用 composer config -g repo.packagist ...

  6. laravel利用composer安装

    composer create-project laravel/laravel --prefer-dist blog prefer:提升,提拔 dist:距离 blog 创建的项目文件夹名称 lara ...

  7. Laravel的初始化安装

    Laravel的初始化安装 composer 安装 composer中国镜像laravel文档 curl -sS https://getcomposer.org/installer | php # 修 ...

  8. Laravel 5.6 安装 guzzlehttp

    环境:Laravel 5.6 安装  composer require guzzlehttp/guzzle 在vendor文件夹下,vendor\guzzlehttp\guzzle 引入 use Gu ...

  9. composer的安装以及laravel框架的安装(一)

    laravel号称世界上最好的php框架,没有之一,下面介绍它的安装 laravel学习交流qq群:293798134 composer的安装 : php开发者很多,并且在web开发领域占据绝对统治地 ...

  10. laravel 指定 版本安装

    composer create-project laravel/laravel=5.0.* --prefer-dist composer create-project laravel/laravel= ...

随机推荐

  1. jquery html() callback

    通过JQuery的.html()函数我们可以非常方便地加载一段HTML到指定的元素中,例如给<div></div>中放入一组图片.问题是JQuery的.html()函数是同步的 ...

  2. XMind 8 Pro 破解

    1.补丁下载地址 链接:https://pan.baidu.com/s/146qcwkvOGCAneIXabSZSUA    提取码:wygs 2.安装 XMind 8 Pro, 运行 3. 去除检查 ...

  3. java.util.Arrays.useLegacyMergeSort=true 作用

    (原) 今天看了一下现场的环境,发现有个其它部门的项目用到了这样一个参数: -Djava.util.Arrays.useLegacyMergeSort=true 于是查看了一下什么作用. 在JDK1. ...

  4. nginx正向代理和反正代理区别

    1)正向代理:客户端 <一> 代理 一>服务端 客户端访问不到服务端,所以找了代理,由代理帮忙访问到了服务端 2)反向代理:客户端 一>代理 <一> 服务端 客户端 ...

  5. 我用Python爬取了李沧最近一年多的二手房成交数据得出以下结论

    前言 去年年底,博主有购房的意愿,本来是打算在青岛市北购房,怎奈工作变动,意向转移到了李沧,坐等了半年以后,最终选择在红岛附近购置了期房. 也许一些知道青岛红岛的小伙伴会问我,为什么会跑到那鸟不拉屎的 ...

  6. Python_自定义递归的最大深度

    自定义递归的最大深度 python默认的最大递归深度为998,在有些情况下是不够用,需要我们自行设置.设置方式如下: import sys sys.setrecursionlimit(num) # n ...

  7. 转:eclipse 设置Java快捷键补全

    1.打开Eclipse,点击" Window - Preferences"; 2. 在目录树上选择"Java——Editor——Content Assist", ...

  8. npm link & unlink

    npm link & unlink https://dev.to/erinbush/npm-linking-and-unlinking-2h1g

  9. Shodan的http.favicon.hash语法详解与使用技巧

    在Shodan搜索中有一个关于网站icon图标的搜索语法,http.favicon.hash,我们可以使用这个语法来搜索出使用了同一icon图标的网站,不知道怎么用的朋友请参考我上一篇文章. 通过上一 ...

  10. python之单例模式、栈、队列和有序字典

    一.单例模式 import time import threading class Singleton(object): lock = threading.RLock() # 定义一把锁 __inst ...