Vue学习之vue-cli脚手架下载安装及配置:https://www.cnblogs.com/clschao/articles/10650862.html

  1. 先下载node.js,下载地址:https://nodejs.org/en/download/

    

    找个目录保存,解压下载的文件,然后配置环境变量,将下面的路径配置到环境变量中。

    

    由于 Node.js 中默认安装了 npm,所以不用额外配置就能在全局命令中使用 npm命令,如果要使用自己安装的 npm 时,如 cnpm ,那么就需要像上面一样添加相应的环境变量

    然后在cmd或者shell中测试一下是否安装成功了:输入 node -v 与 npm -v

C:\> node -v
v10.14.1
C:\> npm -v
6.4.1

    可以看到当前 node 和 npm 的安装版本分别为:v10.14.16.4.1

  2. npm配置

    查看npm配置信息,使用 npm config list 当前配置,或使用 npm config ls -l 全部配置信息。

C:\WINDOWS\system32>npm config list
; cli configs
metrics-registry = "http://registry.npm.taobao.org/"
scope = ""
user-agent = "npm/5.6.0 node/v8.9.4 win32 x64" ; userconfig C:\Users\zequan\.npmrc
cache = "d:\\nodejs\\node_cache"
prefix = "d:\\nodejs\\node_global"
registry = "http://registry.npm.taobao.org/" ; builtin config undefined ; node bin location = D:\nodejs\node.exe
; cwd = C:\WINDOWS\system32
; HOME = C:\Users\zequan
; "npm config ls -l" to show all defaults.

  3 . 全局模块目录 及 缓存目录

    配置 npm 安装的 全局模块目录,以及 缓存目录

    在执行全局安装语句时,如:

npm install express -g    注:express是nodejs做后端的时候的一个框架

    -g:可选参数 -g,g 代表 global,全局安装的意思

    当前是基于解压版安装的,默认会将 express 模块安装至 {解压目录}\node_modules 目录中,如我当前的是:D:\nodejs\node_modules;npm 的缓存文件会保存至 C:\Users\%USERNAME%\AppData\Roaming\npm-cache 目录。如果是基于安装文件直接安装的,那么这两个文件夹都默认在 C 盘下,这样就会占用我们 C 盘的空间。

    接下来开始配置这两个目录,指定「全局模块的安装目录」、「缓存目录」:

    我们试图把这2个目录移动回到D:\nodejs,先如下图建立2个目录

    

    然后运行以下2条命令

      npm config set prefix "D:\nodejs\node_global",将来全局安装的东西就会跑到这个文件夹的node_modules文件夹里面去了。

      npm config set cache "D:\nodejs\node_cache"

    如上图,我们再来关注一下npm的本地仓库,输入命令npm list -global

    

  4. 配置npm镜像源

    现在我们通过npm安装某些包的时候,使用的是国外的镜像源,速度比较慢,所以我们配置称国内的镜像源,现在比较nb的是淘宝的镜像源,修改镜像源的方式有两种:

    a. 临时使用:npm --registry https://registry.npm.taobao.org install express -g

    b.永久使用   

下面两种写法都行,是将npm的指令直接修改为国内镜像源,如果用着不爽,可以看下面配置成cnpm指令的方式。
npm config set registry https://registry.npm.taobao.org
npm config set registry=http://registry.npm.taobao.org
# 配置后可通过下面方式来验证是否成功
npm config get registry
# 或
npm info express cnpm的方式:
npm install -g cnpm --registry=https://registry.npm.taobao.org # 使用,都通过cnpm指令来下载
cnpm install express -g # 如果不能使用 cnpm,可能是指定了 npm 的全局模块目录导致,需要配置相应的系统环境

  

  输入命令npm config list 显示所有配置信息,我们关注一个配置文件

  C:\Users\Administrator\.npmrc

    

  使用文本编辑器编辑它,可以看到刚才的配置信息

    

    

  检查一下镜像站行不行命令1:npm config get registry

    

  检查一下镜像站行不行命令2:Npm info vue 看看能否获得vue的信息  

          

    

  注意,此时,默认的模块D:\nodejs\node_modules 目录将会改变为D:\nodejs\node_global\node_modules 目录,如果直接运行npm install等命令会报错的。

  我们需要做1件事情:

    1、增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules

    

    (注意,一下操作需要重新打开CMD让上面的环境变量生效)

  一、测试NPM安装vue.js

    命令:npm install vue -g

    这里的-g是指安装到global全局目录去

    

    

  二、测试NPM安装vue-router

    命令:npm install vue-router -g    

    

    

    

  运行npm install vue-cli -g安装vue脚手架,前端框架(架子):关于脚手架的安装,看官网:https://cli.vuejs.org/zh/guide/,2.x的没有,目前只有3.x版本的,但是是兼容的,所以我们可以看官网说的老版本的那个文档:https://github.com/vuejs/vue-cli/tree/v2#vue-cli--,我们重点看这个文档。

    

  以后也可以通过下面这个命令来安装,安装新的版本的vue-cli:

npm install -g @vue/cli

  你还可以用这个命令来检查其版本是否正确 (3.x):

vue --version

  如果你用的上面这个npm install -g @vue/cli指令安装的,那么这是3.x版本的,和2.x版本的有些不同,我们使用2.x版本的来学,所以我们需要拉取一下2.x版本的,官网有说法:Vue CLI >= 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:网址

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project /#执行这个指令就能生成项目

  编辑环境编辑path

    

  对path环境变量添加D:\nodejs\node_global,因为全局安装vue和全局安装其他的模块不太一样,vue安装在了node_global这个文件夹里面,而不是这个文件夹里面的那个ndoe_modules文件夹中,如果想在cmd窗口直接使用vue这个命令,就需要配置环境变量,win10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】

    

  重新打开CMD,并且测试vue是否使用正常

    

  注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,他的配置并不全放在根目录下的 webpack.config.js 中。然后我们下载一个稳定版本的webpack,而不是最新的昂,不是越新的越好,这个咱们说过的,不再重复啦,下载webpack的指令是:

npm i webpack@3.12.0 -g    注:i的意思是install,vue不支持最新的vue-cli中的webpack,所以我们指定一个3.12.0版本

    

    

  初始化,安装依赖,运行npm install安装依赖

    

  npm run dev

    

  你会看到下面的内容:

    

  成功界面,提示打开地址http://localhost:8080

    

  自动打开浏览器http://localhost:8080

  npm run build,打包整个项目用的,打开dist文件夹下新生成的index.html文件,这个指令和我们的package.json文件有关,默认是这个指令。

    

  

  nmp下新建出来的vue01的目录描述:

    

Vue学习之vue-cli脚手架下载安装及配置的更多相关文章

  1. day 84 Vue学习之vue-cli脚手架下载安装及配置

    Vue学习之vue-cli脚手架下载安装及配置   1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量 ...

  2. day 85 Vue学习之vue-cli脚手架下载安装及配置

      1. 先下载node.js,下载地址:https://nodejs.org/en/download/ 找个目录保存,解压下载的文件,然后配置环境变量,将下面的路径配置到环境变量中. 由于 Node ...

  3. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  4. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  5. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  6. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  7. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  8. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  9. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

随机推荐

  1. 数据结构实验之链表九:双向链表(SDUT 2054)

    #include <bits/stdc++.h> using namespace std; typedef struct node { int data; struct node *nex ...

  2. MySQL安装及基础命令

    介绍数据库安装基础命令 linux的下载和安装 mac的下载和安装 windows的下载和安装 介绍: 数据库在开发中占据的位置? 数据库能更简单的使用存储在文件中的数据能更好的解决并发问题,数据统一 ...

  3. CodeForces 631D Messenger —— (kmp的应用)

    这题是一个kmp的应用,思路是有,但是代码实现能力太弱,细节考虑不全,敲了很长时间才AC.. 题意:字符串用如下的方法表示,例如aaabbbbcc表示为3-a,4-b,2-c.那么问t串在s串中出现了 ...

  4. 事件处理机制与Handler消息传递机制

    一.基于监听的事件处理机制 基于监听的时间处理机制模型: 事件监听机制中由事件源,事件,事件监听器三类对象组成 处理流程如下: Step 1:为某个事件源(组件)设置一个监听器,用于监听用户操作 St ...

  5. godaddy SSL证书不信任

    在使用网上教程的部署godaddy证书,会出现证书不受信任的情况. 各别审核比较严格的浏览器会阻止或者要求添加例外.情况如下: 利用在线证书测试工具会提示根证书的内容为空.从而导致证书不受信任. 解决 ...

  6. mysql 查看当前正在执行的语句

    查看当前正在执行的语句 show processlist:show processlist; 结束正在执行的语句进程 kill 进程id

  7. 优化webpack打包速度方案

    基本原理要么不进行打包:要么缓存文件,不进行打包:要么加快打包速度. 不进行打包方案: 1,能够用CDN处理的用CDN处理,比如项目引入的第三方依赖jquery.js,百度编辑器 先进行打包或者缓存然 ...

  8. Win10蓝牙鼠标老是断连卡顿的解决方法

    一直用一个微软家的蓝牙鼠标,饱受鼠标卡顿困扰,今天找到了一个解决方案,用了下,效果显著.具体操作见下文. 原文地址:https://jingyan.baidu.com/article/c85b7a64 ...

  9. Eclipse取消汉化以及设置语言的方法

    Eclipse取消汉化以及设置语言的方法 转 https://jingyan.baidu.com/article/11c17a2c2c1939f446e39d13.html Eclipse下载以后都是 ...

  10. 基于MybatisUtil工具类,完成CURD操作

    package loaderman; import java.io.IOException; import java.io.Reader; import java.sql.Connection; im ...