笔记npm安装vue-cli

Stitch晨 Stitch晨     2022-09-16     386

关键词:

最近完成了慕课网的 高仿饿了么webApp 课程,对于vue 的认识有了更深一步的认识,但是其脚手架 vue-cli 的安装流程还是有点懵,于是今天重新试了一遍加深认识

网上参考过一些有用的教程在这里分享一下:

npm 全局安装完vue-cli 命令行输入 vue 不是内部命令的解决方法 http://www.cnblogs.com/cindy79/p/7082281.html

vue-cli 初始化工程: http://www.cnblogs.com/pearl07/p/6247389.html

 

好了下面就是我的步骤了:

  首先我们需要安装 node.js 它会自带一个npm, 国内镜像点这里: https://pan.baidu.com/s/1kU5OCOB#list/path=%2Fpub%2Fnodejs

  安装的时候我们的路径最好不要安装在c 盘了,安装在其他盘,然后修改一下系统的环境变量:

  

  

 

   在变量值的最后输入你的nodejs 路径即可。

   然后打开命令行,输入 node -v  npm -v 有结果出现证明安装成功

  

  

  然后,修改npm 全局安装的路径,如果不修改万一电脑重装系统 那么你之前安装的模块将会丢失,这样会非常麻烦所以:

      第一步你需要在你的nodejs 目录下创建两个文件夹,如下图

      

      第二步在命令行输入以下两条命令,修改npm 的全局安装路径

      npm config set prefix "你的nodejs 文件夹下node_global 文件夹的路径"

      npm config set cache "你的nodejs 文件夹下 node_cache 文件夹路径"

      最后! 关键的一步 在系统环境变量那里写入 nodejs 下 node_global 文件夹的路径

      

      不设置的话 安装完vue-cli 在命令行输入 vue 指令会显示 “vue 不是内部命令” 

      

 

  好了,最后一步就是通过vue-cli 安装 vue工程了

      首先,在命令行用cd 命令 进入到你想存放vue 项目的路径,我这里是这样写的

      

      这里我在e 盘建立我的vue 项目并且这个内容将会使用webpack 这个打包工具,webpack 的声明也算是一种对项目风格的限定把我个人的理解,回车之后下面就会出现一些选项,跟着选项填写对应内容。

      值得注意的是,安装选项中会提示你是否安装 ESLint, 这个会对你的代码格式限制很大,如果你不想被限制得太多建议不要安装

      一下是我的一些选项配置

      

 

      安装完成之后你会看见你的安装盘下会出现你的vue 项目

      

      但是这个项目还需要安装一些他们的依赖模块

      于是,我们还要进行多一步,就是用cd 命令 进入到你项目的文件夹 然后在命令行输入 npm install

      

      等待依赖安装完成

      然后在命令行输入 npm run dev

      

        ok 大功告成!

        如果你的 8080 端口被占用,可以这样修改,用编译器打开项目找到如下路径修改标致中的端口号

        

 

介绍vue-cli

一、安装vue-cli安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm-v检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本为3.10.10... 查看详情

npm安装vue-cli

TIP:win10下安装,使用管理员身份进行,否则会有权限限制。1,安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下,进行命令行全局安装vue-cli。(npminstall--globalvue-cli)----想安装速度快点,可以使用淘宝镜... 查看详情

vue-cli搭建(代码片段)

一、安装vue-cli安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm-v  检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本... 查看详情

npm 错误!安装 vue-cli 时编码 EPERM

】npm错误!安装vue-cli时编码EPERM【英文标题】:npmERR!codeEPERMwhileinstallingvue-cli【发布时间】:2018-02-1815:27:27【问题描述】:当我运行npminstall-gvue-cli时,它不断抛出此错误消息:npm错误!路径C:\\Users\\EndUser\\AppData\\Roaming\\npm\\node_mod... 查看详情

前端vue-cli安装

...网下载:https://nodejs.org/en/右边稳定版,左边最新版下载安装程序之后双击运行,无脑下一步 打开终端输入版本查看命令:node-vnodejs有npm,类似linux的rpm包管理器的东西同理这个也有版本npm-v 不推荐使用npm获取vue-cli程序,... 查看详情

vue3学习笔记01:使用npm方法安装vue3(代码片段)

文章目录一、使用淘宝NPM镜像(一)为何使用淘宝镜像(二)安装淘宝NPM镜像(三)查看淘宝NPM镜像版本二、使用CNPM安装Vue最新稳定版(一)安装Vue最新稳定版(二)查看Vue命令行工具vue-cl... 查看详情

安装nodejs安装npm安装cpnm安装vue-cli脚手架

...本,https://nodejs.org/en/download/下一步下一步就好2、为什么安装npm它是Nodejs下的包管理器。安装好nodejs就可以使用npm检查是否成功安装好之后,对npm安装的全局模块所在路径以及缓存所在路径,进行环境配置。是因为以后在执 查看详情

vuer-cli安装笔记

电脑上装的软件全卸载了。需要重装。整理了一下vue-cli脚手架搭建1先下载git2再下载node 3安装淘宝镜像(https://npm.taobao.org/)4安装webpack(cnpminstallwebpack-g)5安装vue-cli(cnpminstall-gvue-cli) 6创建项目vueinitwebpack项目名称7进入项... 查看详情

局部安装并使用vue-cli(或者其他npm包)

新建目录:mkdirvue-cli2切换目录:cd vue-cli2初始化项目:npminit-y安装:npmivue-cli查看版本:npxvue-V使用:npxvueinitwebpackproject补充:安装vue-cli3.x:npmi@vue/cli@3使用:npxvuecreateproject  查看详情

vue-cli安装步骤

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node条件: node在4.以上,npm在3以上安装指令:1、npminstall-gvue-cli在全局下安装vue-cli #安装vue-clinpminstall-gvue-cli#初始化webpack项目vueinitwebpackmy-projectcdmy-project#np... 查看详情

vue-cli安装与vue项目创建

...先查看npm版本   npm是node的命令 没有的先安装node然后执行npminstall-gvue-cli  如果执行这句命令有问题,则需要将npm的仓库地址改为淘宝镜像    npm install-gcnpm--registry=https://registry.npm.taobao.org    然后... 查看详情

vue学习笔记——组件化实现todolist

 一、环境搭建  1.npm    大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用。具体安装步骤请参考网上的诸多教程。完成后使用如下命令安装vue。$npminstallvue    安装完成后,命令行运行命令vue... 查看详情

vue-cli安装

第一步,需要下载并安装node.js以及他的npm组件;第二步,用node-v;npm-v来测试node.js以及npm是否安装成功第三步,下载vue-cli,在命令行中输入npminstall-gvue-cli,自动下载vue-cli,全局安装第四步,命令行中输入vue,测试vue是否安装成... 查看详情

vue-cli的安装

 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node1、安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定... 查看详情

vue-cli教程(代码片段)

1.安装vue-cli再安装完成npm之后,利用npm安装vue-cli,全局安装:npminsall-gvue-cli。倘若npm速度慢,建议替换为cnpm(https://npm.taobao.org/)。2.初始化vue项目命令格式为:vue-cliinit重要文件讲解:package.jsonpackage.json文件是项目根目录下的... 查看详情

vue-cli环境配置(代码片段)

1.安装npm从node.js官网下载并安装nodenode-v命令,查看node的版本,若出现相应的版本号,则说明你安装成功了。npm包管理器,是集成在node中的,所以安装了node也就有了npm,直接输入npm-v命令,显示npm的版本信息。 设置全集和缓... 查看详情

vue-cli使用scss安装

第一步npminstallnode-sass--save-dev(一直安装失败,github位置搬了所以换成下面的命令)  1。npminstall--savenode-sass--registry=https://registry.npm.taobao.org--disturl=https://npm.taobao.org/dist--sass-binary-site=http://npm.ta 查看详情

怎么构建vue-cli项目

1.安装node.js(已安装可直接跳过,建议查看node版本,node-v);2.npm包管理器,是集成在node中的,可跳过(npm-v);3.由于npm的有些资源被墙,为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。(全局安装:npminstall-gcnpm,... 查看详情