node.js与vue cli脚手架的下载安装配置方法记录

目录
  • 一、node.js安装以及环境配置
    • 1、下载vue.js
    • 2、安装node.js
    • 3、检查node程序是否安装成功
    • 4、更改默认路径
    • 5、添加环境变量
    • 5、测试安装是否成功
  • 二、安装vue-cli脚手架
    • 1、检查node环境是否安装好
    • 2、更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm
    • 3、开始安装vue-cli
    • 4、生成项目
    • 5、打包上线
  • 总结

一、node.js安装以及环境配置

1、下载vue.js

下载地址：

https://nodejs.org/en/

2、安装node.js

下载完成后，双击安装包开始安装。安装地址最好换成自己指定的地址。

这一步根据自己的需要进行选择，我这里就选的是第一个。网上有些教程说要选中第4个，我这里是要后期需要更换全局模块所在的路径，以及缓存cache的路径的，所以在后期需要自己重新配置环境变量。

这一步我没选，直接进行下一步，一直下一步，剩下的都是安装了。

安装完成之后，node启动程序会自动添加到系统环境变量path中，这里可自行去查看。

3、检查node程序是否安装成功

打开cmd窗口输入node -v 和 npm -v查看node版本和npm版本。如果版本号都能出来，代表安装成功了

在默认下载全局包时，这个包的路径是放在我c盘下面的，大家可以输入指令 npm root -g 进行查看，我这里已经更换了目录，所以不在c盘。接下里就来教大家如何更改

4、更改默认路径

这里主要是配置的是npm安装的全局模块所在的路径，以及缓存cache的路径。因为以后在执行类似：npm install express [-g] 的安装语句时，会将安装的模块安装到C盘的路径中，占用C盘空间，所以才进行的配置，如果C盘容量足够，可省略这一步，不影响node使用。

打开自己刚刚安装的node目录

在目录下新建两个文件夹【node_global】和【node_cache 】文件夹

再次再次打开cmd命令窗口，输入npm config set prefix “你的路径\node_global”（你的路径”默认安装的情况下为 C:\Program Files\nodejs）

npm config set cache “你的路径\node_cache” 可直接复制刚刚新建的空文件夹目录

这里记住了两次的命令是不一样的一个是 set prefix 一个是 sex cache ，大家不要为了省事两次都直接复制粘贴成同一个了

5、添加环境变量

点击下面系统变量里的新建按钮，添加变量名和变量值然后点击确定

“变量名”栏填写：NODE_PATH（要大写，HOME前有下划线）

“变量值”栏填写：D:\nodejs\node_global\node_modules （node的安装地址）

找到系统变量中的Path然后点击编辑，新建两个变量，然后确定。第一个是node_global文件夹目录，第二是node安装目录

5、测试安装是否成功

根据步骤3：打开cmd输入node -v 和 npm -v 查看是否有版本号出现。以及输入命令： npm root -g 查看全局模块的默认路径是否已经改变。这里不过多的介绍了。

二、安装vue-cli脚手架

1、检查node环境是否安装好

打开cmd输入node -v 和 npm -v，如果能出现版本号，说明安装成功，安装成功才能进行下一步。

2、更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm

打开cmd输入如下命令：

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

如果安装失败，可以使用命令 ：npm cache clean --force 强制执行清理缓存，然后再重新安装。

安装完成之后打开cmd 输入cnpm -v 查看是否安装成功，如果出现版本号代表安装成功

3、开始安装vue-cli

打开cmd输入如下指令安装vue-cli

cnpm install -g vue-cli

最新的vue项目模块中，都带有webpack插件，所以这里就可以不安装webpack插件。安装完成后，可以使用 vue -V（注意V大写）查看是否安装成功

如果出现版本号，则代表安装成功，如果提示“无法识别 vue”，可以是npm版本过低，可以使用 npm install -g npm 来更新版本

4、生成项目

首先需要再命令行中进入到项目目录，然后输入：

vue init webpack demo1

其中webpack是面板名称，demo1是自定义项目名称，命令执行之后，会在当前目录生成以该名称命名的项目文件夹。配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖(注意要在有package.json 的目标下运行)

cnpm install

然后启动项目（直接访问端口号进入测试demo1）

npm run dev

然后打开浏览器进入 localhost:8080，如果出现页面则项目启动成功。如果没有加载出页面，可能是本地8080端口被占用，需要修改一下配置文件 config>index.js

5、打包上线

自己的项目文件都需要放在src文件夹下，项目开发完成之后可以输入如下命令来进行打包工作。

npm run build

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以打开本地文件查看，项目上线时，只需要将 dist 文件夹放到服务器就行了。

总结

到此这篇关于node.js与vue cli脚手架下载安装配置方法的文章就介绍到这了,更多相关node.js vue cli脚手架下载安装配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue-cli3脚手架的配置及使用教程

    这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行

  • vue-cli脚手架-bulid下的配置文件

    本文章适合初学者学习,如有错请提出.近期对vue比较感兴趣,所以准备用vue写一个blog.早期先对vue脚手架了解一下,对于新手官网建议先不用vue-cli,但我觉得如果没有任何的依据凭自己写一个项目(包括webpack的配置等)这无疑是浪费时间的而且都最后还是是而非的.所以我觉得完全可以用脚手架建一个webpack项目,然后我们可以具体对应它生成的文件学习(当然这只是我的学习方法,我认为这样比较好学,但不一定人人都是这样的). 在学习的过程中发现网上许多的简介都已经过期(vue发展的过快了吧

  • vue-cli脚手架的安装教程图解

    vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,下面给大家介绍vue-cli脚手架的安装,具体内容如下所述: https://github.com/vuejs/vue-cli  官网 使用官方推荐的webpack 条件: node在4.以上,npm在3以上,查看版本号打开cmd输入,node -v npm -v; 安装步骤: 1.cmd打开命令行窗口 2.输入npm install vue-cli -g,然后回车等待 3.安装结束后输入vue 查看是否安装成功 4.运行vueinit

  • 仿vue-cli搭建属于自己的脚手架的方法步骤

    脚手架是啥 从前我总觉得脚手架是个很高大上的东西,好像得牛叉:ox:一点的人才写的出来,可望而不可即.其实并不是因为困难使我们放弃,而是因为放弃才显得困难(这是个好词好句:see_no_evil:).只要你肯花个一天半天的时间:fist:,也能写出属于你自己的脚手架. 早前脚手架这个词是从 vue-cli 这里认识的,我们通过 npm install -g vue-cli 命令全局安装脚手架后, 再执行 vue init webpack project-name 就能初始化好一个自己的项目,真是

  • vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项   -d

  • node.js与vue cli脚手架的下载安装配置方法记录

    node.js与vue cli脚手架的下载安装配置方法记录

    目录 一.node.js安装以及环境配置 1.下载vue.js 2.安装node.js 3.检查node程序是否安装成功 4.更改默认路径 5.添加环境变量 5.测试安装是否成功 二.安装vue-cli脚手架 1.检查node环境是否安装好 2.更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm 3.开始安装vue-cli 4.生成项目 5.打包上线 总结 一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en

  • mysql 8.0.22.0 下载安装配置方法图文教程

    mysql 8.0.22 下载安装配置方法,供大家参考,具体内容如下 1.进入MySQL官网下载,或直接点击下载  双击直接安装,一直默认安装 两次输入密码,要复杂点 下次可以在这里打开 精彩专题分享: mysql不同版本安装教程 mysql5.7各版本安装教程 mysql5.6各版本安装教程 mysql8.0各版本安装教程 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • mysql 5.7.14 下载安装配置方法图文教程

    mysql 5.7.14 下载安装配置方法图文教程

    如何下载最新版本的MySQL? 我先去MySQL首页下载最新版本的MySQL-链接:https://www.mysql.com/downloads/ 进入此界面下载: Downloads–>MySQL Community Edition (GPL)(这是免费版的,当然,有钱的可以用收费的,功能更强大)–>MySQL Community Server (GPL) –>选择对应的系统和电脑版本(在这里,我选择的是Window系统64位的下载) –>No thanks, just sta

  • mysql 8.0.22 下载安装配置方法图文教程

    MySQL 8.0.22下载及安装,供大家参考,具体内容如下 一. 下载mysql 1.进入MySQL官网下载,或直接点击下载,如下图所示: 2.点击"DOWNLOADS" 3.选择 " MySQL Community(GPL) Downloads" 4.选择 "MySQL Community Server" 5.第一步:选择操作系统 第二步:点击 Go to Download Page 6.点击所选框进行下载 如果下载太慢可以复制下载链接使用迅

  • VUE脚手架的下载和配置步骤详解

    VUE脚手架下载 1.第一步全局安装脚手架 cnpm i @vue/cli -g 2.第二步创建项目 创建文件夹,打开文件命令窗口 vue create 自己创建的项目名 3. 有两个选项,选择第二个,也就是自己选择配置 4. 选择自己需要的配置 5. 进行下一步,选择 Y 6. 选择自己的类型 7.选择.json类型 8.此处, 选择 N 下载完成 文件夹完成下载 最后把 文件跑起来 以上所述是小编给大家介绍的VUE脚手架的下载和配置详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,

  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

  • vue cli 3.0通用打包配置代码,不分一二级目录

    1.项目根目录下新建vue.config.js,进行如下配置即可 module.exports={ publicPath:'', }; 补充知识:Vue-CLI3.0更改打包配置 在实际项目开发中,我们一般会直接使用vue.vue-cli来搭建项目.vue框架的宗旨就是让初学者轻松上手,所以,对于打包配置的一些东西,vue的脚手架已经帮我们做好了完美的封装,让我们达到安装既用的效果,也不用担心太多不会做打包配置的问题. 在前期使用Vue-CLI2.0搭建项目时,我们可以在build目录下,直接修

  • node.js 模块和其下载资源的镜像设置的方法

    以前安装 electron 时总是失败,然后就在淘宝镜像上下载好相应版本的文件放到用户目录来解决问题. 后来研究发现 npm 不仅可以设置 node.js 模块仓库的代理, 同样可以设置像 electron.phantomjs. node-sass 等模块的镜像代理 一.设置淘宝镜像 (共三种方法) 1.环境变量 Unix: # electron export ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ # phantomjs

  • Node.js读写文件之批量替换图片的实现方法

    Node.js读写文件之批量替换图片的实现方法

    问题:文件夹A中有大量图片文件,需要用另外一个图片替换掉A中图片,但是命名保持不变. 手工的做法如下: 1)浏览器打开图片->2)另存为->3)目标文件夹->4)找到一个图片->5)替换->6)确定 然后,重复步骤2)和之后的步骤.不小心会漏掉或重复. 这么麻烦,使用node.js来处理改如何呢?代码如下: var fs=require('fs'), cp=require('child_process'); var url='Moriarty.jpg' var rs=fs.r

  • Node.js中防止错误导致的进程阻塞的方法

    在Node.js中,当某个回调函数发生了错误,整个进程都会崩溃,影响后面的代码执行. Node.js这样处理,是因为在发生未被捕获的错误时,进程的状态就不确定.之后也就无法正常工作了.如果错误始终不处理的话,就回一直抛出意料之外的错误,这样不利于调试. 防止错误导致的进程阻塞的方法主要有如下两种: 一. try-catch try-catch允许进行异常捕获,并让代码继续执行下去: 例如: 当函数抛出错误时,代码就停止执行了: (function() { var a = 0; a(); cons

随机推荐