Node.js+Vue脚手架环境搭建的方法步骤


Posted in Javascript onMarch 08, 2020

Node.js的下载

node下载地址:https://nodejs.org/zh-cn/download/

下载后安装即可。新版Node.js自带npm包管理器

# 查看node的版本
node -v
# v12.16.1
# 查看npm版本
npm -v
#6.13.4

第一个Node.js程序,新建helloworld.js文件,内容如下

console.log("Hello World")
console.log("第一个Node.js程序!")

进入终端 node helloworld.js

注意:
node安装路径默认为/usr/local/bin/node
npm路径为/usr/local/bin/npm

搭建Vue CLI脚手架

Vue CLI是一个基于Vue.js进行快速开发的完整系统
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -gyarn global remove vue-cli 卸载它。
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

设置淘宝镜像

npm config set registry https://registry.npm.taobao.org

# 查看是否设置成功
npm get registry

安装

# -g表示全局安装
sudo npm install -g @vue/cli
# 或则
sudo yarn global add @vue/cli

安装好后就可以在终端终端中访问vue命令

vue -V

安装全局插件,详情见官网

sudo npm install -g @vue/cli-service-global

# 安装成功提示
+ @vue/cli-service-global@4.2.3
added 1216 packages from 866 contributors in 83.013s

创建第一个应用程序

# 通过图形化界面方式创建项目(新手推荐)
vue ui

Node.js+Vue脚手架环境搭建的方法步骤

Node.js+Vue脚手架环境搭建的方法步骤

下一步->预设(选择默认) -> 下一步

Node.js+Vue脚手架环境搭建的方法步骤

Node.js+Vue脚手架环境搭建的方法步骤

在浏览器中输入地址

Node.js+Vue脚手架环境搭建的方法步骤

可能遇到的坑

1.输入npm install -g @vue/cli后,停留在此界面

Node.js+Vue脚手架环境搭建的方法步骤

解决:

设置淘宝镜像: npm config set registry https://registry.npm.taobao.org

2.提示权限不足!

Node.js+Vue脚手架环境搭建的方法步骤

再npm命令前加sudosudo npm install -g @vue/cli

到此这篇关于Node.js+Vue脚手架环境搭建的方法步骤的文章就介绍到这了,更多相关Node.js Vue脚手架搭建内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
JS中的const命令你真懂它吗
Mar 08 #Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 #Javascript
Vue vm.$attrs使用场景详解
Mar 08 #Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 #Javascript
vue-cli点击实现全屏功能
Mar 07 #Javascript
vue全屏事件开发详解
Jun 17 #Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 #Javascript
You might like
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
vue项目实战总结篇
2018/02/11 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
详解Python爬虫的基本写法
2016/01/08 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
有趣的广告词
2014/03/18 职场文书
农村党员一句话承诺
2014/05/30 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android