【笔记】npm 安装 vue-cli

最近完成了慕课网的 高仿饿了么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 端口被占用,可以这样修改,用编译器打开项目找到如下路径修改标致中的端口号

        

时间: 2024-11-05 13:46:35

【笔记】npm 安装 vue-cli的相关文章

使用 npm 安装 Vue

2.使用 npm 安装 需要 node.js 就不多说了(从 nodejs.org 中下载 nodejs ) (1)安装 Vue,在 cmd 里直接输入: npm install -g cnpm --registry=https://registry.npm.taobao.org 回车,等待 (2)安装 Vue Cli,在 cmd 里直接输入: npm install -g @vue/cli (3)检查 Vue vue -V 原文地址:https://www.cnblogs.com/xpwi/p

使用 NPM 安装Vue并创建项目

一.下载node.js 官方下载地址:https://nodejs.org/en/download/ 选择相应版本安装 下载完成后一路next安装完成. 一般环境变量会自动添加,打开命令行测试是否安装成功 二.安装cnpm 使用下面命令安装淘宝镜像npm npm install -g cnpm --registry=https://registry.npm.taobao.org 等待安装完成后,使用npm -v命令测试是否安装成功. 三.安装Vue 全局安装Vue CLI 3.X版本 npm i

vue不是内部命令、安装@vue/cli失败、找不到vue.cmd文件等问题的解决方法

最近打算用vue-cli写项目,发现用官网提供的安装方式npm install @vue/cli -g怎么都安装不上,一直报如下错误 EPERM: operation not permitted, rename 'C:\Users\xxx\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\abbrev\package.json.352729074' -> 'C:\Users\xxx\AppData\Roaming\npm\node_mo

Vue2.0 实战项目(一) ——安装vue.cli

1.打开Vue脚手架的github地址:https://github.com/vuejs/vue-cli,在README查看如何安装 2.通过npm安装vue $ npm install -g vue-cli 3.通过webpack安装 $ vue init webpack myProjectName 4.切换到创建的项目目录,然后安装依赖文件 npm install

vue开发搭建(npm安装 + vue脚手架安装)

一.概念 1.npm:  Nodejs下的包管理器. 2.webpack: 它主要的用途是通过CommonJS的语法,把所有浏览器端需要发布的静态资源,做相应的准备,比如资源的合并和打包. 3.vue-cli:   用户生成Vue工程模板.(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装) 原文:https://www.cnblogs.com/goldlong/p/8027997.html (部分步骤有些修改) 参考文:htt

使用npm安装vue的步骤

第一步:使用npm install  -g vue-cli,全局安装vue-cli 第二步:下载模板代码,使用vue init webpack 项目名,之后的选项按照所需的选择即可 第三步:进入创建的项目中,可以使用dir查看当前项目中的文件 第四步:使用npm install 安装package.json里面配置的各种东西,安装完成之后,package.json中有的设置项就会自动配置好 第五步:使用npm run dev 启动热加载,就会自动执行scripts中配置的"dev"

cnpm 安装vue与vue/cli

cnpm 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 vue npm install -g npm 安装 vue/cli npm install -g @vue/cli 原文地址:https://www.cnblogs.com/pythonPath/p/11531530.html

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 尽管我已经在工作上用了Vue.js一段时间,但我从不需要在npm上发布组件.但最近发现在不同的项目重写组件是件非

【Vue CLI】从安装到构建项目再到目录结构的说明 𰅨

目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 原文: http://blog.gqylpy.com/gqy/284 "Vue CLI是一个基于Vue.js进行快速开发的完整系统. Vue CLI致力于将Vue生态中的工具基础标准化.它确保了各种构建工具只需给予智能的默认配置便可平稳衔接. 这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题.于此同时,它还为每个工具提供了调整配置的灵活性.

npm安装教程(vue.js)

https://www.cnblogs.com/goldlong/p/8027997.html 首先理清nodejs和npm的关系: node.js是javascript的一种运行环境,是对Google V8引擎进行的封装.是一个服务器端的javascript的解释器. 包含关系,nodejs中含有npm,比如说你安装好nodejs,你打开cmd输入npm -v会发现出啊线npm的版本号,说明npm已经安装好. 引用大神的总结: 其实npm是nodejs的包管理器(package manager