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中继承的三种方式
Oct 16 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
PHP插入排序实现代码
2013/04/04 PHP
php合并js请求的例子
2013/11/01 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
jQuery 动画基础教程
2008/12/25 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
javascript关于继承解析
2016/05/10 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
vue的mixins属性详解
2018/03/14 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Python如何在DataFrame增加数值
2020/02/14 Python
Python异常处理机制结构实例解析
2020/07/23 Python
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
仓库主管的岗位职责
2013/12/04 职场文书
设计师个人求职信范文
2014/02/02 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
担保书格式及范文
2014/04/01 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS