您现在的位置是:首页 >程序人生 >前端工具

Mac系统下安装webpack-cli遇到的一些吭

发布时间:2018-07-19 编辑:Jielin 浏览:1828 评论:1

    前提条件:

    安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v  检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本为10.4.1。如果该命令不可用,需要安装node软件包,根据你的系统版本选择下载安装就可以了。

    安装node.js和git命令

    node.js安装地址:https://nodejs.org/zh-cn/

    git安装地址:https://git-scm.com/

    npm没有问题,接下来我们可以用npm 命令安装vue-cli了(Mac系统下一定要注意npm前面必须加sudo否则绝对报错,不要问我为什么),在命令行输入下面的命令:

    sudo npm install vue-cli -g

    -g :代表全局安装。如果你安装时报错,一般是网络问题,你可以尝试用cnpm来进行安装。安装完成后,可以用vue -V(V是大写)来查看 vue-cli的版本号

    出现了版本好说明安装成功了!

    二、初始化项目

    我们用vue init命令来初始化项目,具体看一下这条命令的使用方法。

    vue init

    init:表示我要用vue-cli来初始化项目

    :表示模板名称,vue-cli官方为我们提供了5种模板,感兴趣的可以去官方查看文档,这里不多做介绍~

    :标识项目名称,可根据自己的兴趣自定义

    大多数情况下我们都会使用webpack这个模板,那我们这里也安装这个模板,在命令行输入以下命令:

    注意:Mac系统下前面要加上sudo,被这个坑了好久

    vue init webpack vuecliTest

    输入命令后,会询问我们几个简单的选项,我们根据自己的需要进行填写,以下是我的选项:

    命令行出现上面的文字,说明我们已经初始化好了第一步。命令行提示我们现在可以作的三件事情。

    这里我选择自己安装

    1、cd vuecliTest  进入我们的vue项目目录。

    2、npm install  安装我们的项目依赖包,也就是安装package.json里的包,如果你网速不好,你也可以使用cnpm来安装。

    3、npm run dev 开发模式下运行我们的程序。给我们自动构建了开发用的服务器环境和在浏览器中打开,并实时监视我们的代码更改,即时呈现给我们。

    然而我在执行第二步的时候报错了,错误如下图:

    解决方法:先清除缓存:npm cache clean --force,再执行sudo npm install,如图:

    最后再执行npm run dev

    出现http://localhost:8080说明成功了!