【Vue】Vue开发环境搭建
Vue前置学习环境
IDE
WebStorm 官网下载:https://www.jetbrains.com/webstorm/download/
VSCode 官网下载:https://code.visualstudio.com/Download
Node.js
Node:https://nodejs.org/en/
下载安装
配置下环境变量 Path 加上
D:\Environments\nodejs\
D:\Environments\nodejs\node_global\
NODE_PATH D:\Environments\nodejs\node_modules
安装好node后,要设置一下node_global和node_cache(node缓存文件夹)
C:\Users\x1c>npm config set prefix "D:\Environments\nodejs\node_global"
C:\Users\x1c>npm config set cache "D:\Environments\nodejs\node_cache"
C:\Users\x1c>npm install express -g
+ express@4.17.1
updated 3 packages in 3.597s
nvm介绍:node多版本管理的最佳工具
开发环境&工具
为什么要使用nvm 管理node版本
npm安装方法介绍(Linux,MacOS,Windows)
https://github.com/nvm-sh/nvm
Windows
nvm-windows 最新下载地址:
https://github.com/coreybutler/nvm-windows/releases
下载安装即可
nvm简单的使用方法(nvm install,nvm use)
nvm
nvm ls
nvm ls -remote
node --version
npm --version
nvm ls
nvm use vxxx
nvm install vxxx
配置阿里云镜像
https://developer.aliyun.com/mirror/NPM?from=tnpm
有时候用npm拉取包可能会很慢,可以用淘宝npm镜像代替npm进行拉包,就像github和gitee,Github下载拉取比较慢,我就导入码云下载。
npm install -g cnpm --registry=https://registry.npm.taobao.org
or
npm config set registry https://registry.npm.taobao.org
npm config get registry
执行:npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\x1c>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
D:\Environments\nodejs\node_global\cnpm -> D:\Environments\nodejs\node_global\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
updated 1 package in 21.466s
C:\Users\x1c>
调试环境
chrome浏览器
vue.js devtools https://github.com/vuejs/vue-devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN
工程环境
node --version
npm install -g vue-cli
vue --version
C:\Users\x1c>npm install -g vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\Environments\nodejs\node_global\vue-init -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue-init
D:\Environments\nodejs\node_global\vue -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue
D:\Environments\nodejs\node_global\vue-list -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue-list
+ vue-cli@2.9.6
added 238 packages from 205 contributors in 48.081s
C:\Users\x1c>node --version
v11.9.0
C:\Users\x1c>vue --version
2.9.6
C:\Users\x1c>
node --version
vue --version
删除vue-cli, npm install -g vue-cli 装的,就 npm uninstall -g vue-cli 删。
npm install -g @vue/cli 装的,就 npm uninstall -g @vue/cli 删。
C:\Users\x1c>node --version
v11.9.0
C:\Users\x1c>vue --version
2.9.6
C:\Users\x1c>npm uninstall -g vue-cli
removed 238 packages in 3.35s
C:\Users\x1c>npm install -g vue-cli
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\Environments\nodejs\node_global\vue -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue
D:\Environments\nodejs\node_global\vue-init -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue-init
D:\Environments\nodejs\node_global\vue-list -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue-list
+ vue-cli@2.9.6
added 238 packages from 205 contributors in 20.165s
C:\Users\x1c>vue --version
2.9.6
C:\Users\x1c>
小结
【Vue】Vue开发环境搭建的更多相关文章
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- vue的开发环境搭建命令加图解
vue的开发环境的搭建 不管什么软件我们都要去官网下载安装,这是作为专业程序员的安全意识. 1.安装node.js 官方下载的页面:点击这里 大约展示的页面是这样子的!我们演示是windows 64位 ...
- 应用一:Vue之开发环境搭建
简单分享下vue项目的开发环境搭建流程~ 1.安装nodeJS vue的运行是要依赖于node的npm的管理工具来实现,下载地址:https://nodejs.org/en/.安装完成之后以管理员身份 ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- Electron+Vue+ElementUI开发环境搭建
Node环境搭建 本文假定你完成了nodejs的环境基础搭建: 镜像配置(暂时只配置node包镜像源,部分包的二进制镜像源后续讨论).全局以及缓存路径配置,全局路径加入到了环境变量 $ node -v ...
- vue.js开发环境搭建
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
- 【vue基础学习】vue.js开发环境搭建
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
- vue.js 开发环境搭建
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
- Vue.js开发环境搭建的介绍
包含了最基础的Vue.js的框架,包含了打包工具和测试工具,开发调试的最基本的服务器,不需要关注细节,只需关注Vuejs对项目的实现 npm在国内的网络使用较慢,所以推荐下载安装淘宝的镜像 1: 2: ...
- Vue+VSCode开发环境搭建
时间2019.9月 1. 安装 nodeJS; 安装VScode 安装好nodeJS之后,默认会安装好npm 测试 nodeJS 和npm是否可以执行 node -v npm -v 1.1 VScod ...
随机推荐
- OpenCV Error: Assertion failed (src.size == dst.size && src.channels() == dst.channels()) in cvConvertScale
发现问题:在做kinect采集的深度图去噪的时候遇到了cvConvertScale格式转换的问题. OpenCV Error: Assertion failed (src.size == dst.si ...
- PCRE正则表达式语法
字符 描述 \ 将下一个字符标记为一个特殊字符,或一个原义字符,或一个向后引用,或一个八进制转义符.例如,"\n"匹配一个换行符. ^ 匹配输入字符串的开始位置. $ 匹配输入字符 ...
- Unity 保存游戏,读取游戏,退出游戏
1 using System.Collections; 2 using System.Collections.Generic; 3 using UnityEngine; 4 using System. ...
- web服务器专题:tomcat(二)模块组件与server.xml 配置文件
web服务器专题:tomcat(二)模块组件与server.xml 配置文件 回顾: Web服务器专题:tomcat(一) 基础模块 一个Server.xml的实例 <?xml version= ...
- js上 十四、对象
十四.对象 #1.初识对象 什么是对象? 在js中,一切皆是对象. 对象,生活中可见和不可见的东西,在世界中,客观存在的都是一个对象. 桌子,笔记本,手机,人. 在日常生活中,我们是如何来描述这个对象 ...
- 线段树入门详解,洛谷P3372 【模板】线段树 1
关于线段树: 本随笔参考例题 P3372 [模板]线段树 1 所谓线段树就是把一串数组拆分成一个一个线段形成的一棵树. 比如说像这样的一个数组1,2,3,4,5: 1 ~ 5 / ...
- Spark性能调优篇八之shuffle调优
1 task的内存缓冲调节参数 2 reduce端聚合内存占比 spark.shuffle.file.buffer map task的内存缓冲调节参数,默认是3 ...
- kali没有tcptraceroute如何安装
问题描述 尝试使用kali进行路由信息的收集,发现kali没有自带tcptraceroute.在网上搜索教程发现都是Linux下安装,且都是使用yum安装,看了一下发现kali用的也不是yum 这就很 ...
- VS批量添加多个文件
步骤 1.设置项目,显示所有文件.2.点击项目,右键在资源管理器中打开.3.将要导入的文件复制到对应的文件中去.4.在解决方案中就可以看到刚才添加的多个文件.5.在新加的文件夹上右键,包括在项目中.
- Sentinel入门学习记录
最近公司里面在进行微服务开发,因为有使用到限流降级,所以去调研学习了一下Sentinel,在这里做一个记录. Sentinel官方文档:https://github.com/alibaba/Senti ...