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 相关文章推荐
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jsPDF导出pdf示例
May 02 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
js实现图片实时时钟
Jan 15 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
解析PHP无限级分类方法及代码
2013/06/21 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
同学聚会主持词
2014/03/18 职场文书
英语教研活动总结
2014/07/02 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
法人代表证明书
2014/09/18 职场文书
小学远程教育工作总结
2015/08/13 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript