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

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

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

在浏览器中输入地址

可能遇到的坑

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

解决:

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

2.提示权限不足!

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

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

(0)

相关推荐

  • vue脚手架搭建过程图解

    vue脚手架是个好东西,能够快速搭建vue单页面应用,vue是基于node环境的,所以要先安装node,去官网下载安装就可以. 进入某个文件夹的命令为: 查看node版本: 搭建步骤为: 出现下图说明搭建成功: 按照提示输入: 如果出现下图说明运行成功: 在浏览器中按照指示输入: 运行结果为: ok,至此vue脚手架就搭建完成了! 总结 以上所述是小编给大家介绍的vue脚手架搭建过程图解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 使用vue-cli脚手架工具搭建vue-webpack项目

    最近更新了webpack配置详解,可移步vue-cli webpack详解 对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一系列的工具,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等.对于一个需要长期维护和大型的项目而言,这些工具是必不可少的,但是尝试配置初始化这些很痛苦.这就是我们发布vue官方提供的脚手架工具的原因,一个简单的构建工具,通过

  • vue-cli脚手架搭建的项目去除eslint验证的方法

    eslint验证,为我们提升我们的代码质量和良好的编码风格带来了非常大的帮助,但是由于其语法验证的严格,很多程序员在初期使用的时候很不适应,就想怎么能够去掉eslint验证. 其实把eslint验证去除的方法并不复杂,因为我们的脚手架是基于webpack的,那么一般的配置操作都会在webpack工具的配置文件中进行配置,那么我们就直接找webpack的配置文件就可以了.可能我们的很多刚开始接触vue-cli脚手架工具的朋友可能会说我搭建完项目后,build目录下有3个webpack开头的配置文件

  • 使用vue脚手架(vue-cli)搭建一个项目详解

    1.首先得下载node.js.方法可自行百度. 2. 3.一开始报很多错误,后来用管理员就没问题了. 4. 5.如上图会遇到卡住的问题,解决方法是 在最后一个选项上选择No,I will handle it myselft,然后cd vue_test,然后cnpm install,这样就成功了,然后执行npm run dev就出现: 6.浏览器端访问localhost:8081 7.项目目录 8.图片来源于网络 以上所述是小编给大家介绍的vue脚手架(vue-cli)搭建项目详解整合,希望对大家

  • 如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法

    忙里偷闲,整理了一下关于如何借助 vue-cli3 搭建 ts + 装饰器 的脚手架,并如何自定义 webpack 配置,优化. 准备工作 @vue/cli@4.1.1 vue 2.6 node v12.13.0 安装 node 安装 node 全局安装 nrm,npm 的镜像源管理工具. npm i nrm -g // 安装 nrm ls // 查看可用源,及当前源,带*的是当前使用的源 nrm use taobao // 切换源,使用源 nrm add <registry> <url

  • 仿vue-cli搭建属于自己的脚手架的方法步骤

    脚手架是啥 从前我总觉得脚手架是个很高大上的东西,好像得牛叉:ox:一点的人才写的出来,可望而不可即.其实并不是因为困难使我们放弃,而是因为放弃才显得困难(这是个好词好句:see_no_evil:).只要你肯花个一天半天的时间:fist:,也能写出属于你自己的脚手架. 早前脚手架这个词是从 vue-cli 这里认识的,我们通过 npm install -g vue-cli 命令全局安装脚手架后, 再执行 vue init webpack project-name 就能初始化好一个自己的项目,真是

  • 使用webpack搭建vue项目实现脚手架功能

    本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思维在调试的时候显得尤为重要,拥有良好的编程习惯和思维能力可以大幅度提高调试效率.而编程思维的培养往往需要经验的积累,只有把底层原理一遍遍地思考之后,才会有更深入的理解,这也是vue官方文档中不建议vue初学者直接使用vue-cli的原因之一. 所以今天特意一步步通过webpack配置,实现与vue-

  • vue脚手架搭建项目的兼容性配置详解

    使用vue-cli搭建项目,面临着解决ie兼容性问题(ie9+),因为ie浏览器并不支持es6语法等. 首先安装babel-polyfill,解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js第一行引入 import 'babel-polyfill' 安装引入成功之后,如果项目还不能正常运行 则需要安装babel进行解析 (推荐阮一峰老师的文章https://www.jb51.net/article/

  • vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 vue create --help 用法:create [options] <app-name> 创建一个由 `vue-cli-service` 提供支持的新项目 选项: -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项   -d

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

    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程序!") 进入终端

  • Linux虚拟机中node.js之开发环境搭建

    先说下nodejs这个哦,有人以为它是一种语言,其实不是,它是一个平台.下面来说下本次的话题:Vmware虚拟机node.js之开发环境搭建 一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这里使用Vmware. 安装好Vmware后,点击新建虚拟机,选择稍后安装操作系统,然后进行配置.虚拟机设置如下: { 客户机操作系统:其他: 版本:其他64位

  • PyTorch在Windows环境搭建的方法步骤

    一.安装Anaconda 3.5 Anaconda是一个用于科学计算的Python发行版,支持Linux.Mac和Window系统,提供了包管理与环境管理的功能,可以很方便地解决Python并存.切换,以及各种第三方包安装的问题. 二.下载和安装 个人建议推荐在清华的镜像来下载.选择合适你的版本下载,我使用的是Anaoonda3-5.1.0-Windows-x86_64.exe 可能安装速度有点慢,不太清楚是我电脑系统盘快慢的原因还是什么. 环境变量配置 将D:\ProgramData\Anac

  • Spring5.2.x 源码本地环境搭建的方法步骤

    1 克隆Spring源码 github 下载可能较慢,可以先 fork 官方仓库到自己的账户下,再从 gitee 导入. 使用 sourceTree 拉取代码到本地. 切换到5.2.x版本 git checkout origin/5.2.x 添加阿里云镜像 将下面这行代码粘贴到build.gradle文件中的repositories节点下即可 , maven { url "http://maven.aliyun.com/nexus/content/groups/public" } 预先

  • 基于Docker部署GitLab环境搭建的方法步骤

    注意:建议虚拟机内存2G以上,一定要配置阿里云的加速镜像 1.下载镜像文件 docker pull beginor/gitlab-ce:11.0.1-ce.0 2.创建GitLab 的配置 (etc) . 日志 (log) .数据 (data) 放到容器之外, 便于日后升级 mkdir -p /mnt/gitlab/etc mkdir -p /mnt/gitlab/log mkdir -p /mnt/gitlab/data 3.运行GitLab容器 进入/mnt/gitlab/etc目录,运行一

  • selenium3.0+python之环境搭建的方法步骤

    本文目标: 使用selenium3.0+python3操纵浏览器,打开百度网站.(相当于selenium的hello world) 环境基础:python3已安装,pycharm编辑器已安装. 第一步:安装selenium 打开cmd窗口,输入pip install selenium,然后回车. 第二步:安装WebDriver 1)下载WebDriver 由于selenium是通过调用浏览器的给的接口来操纵浏览器,所以WebDriver不统一,需要根据自己的浏览器登录相应的地址,下载最新的Web

  • windows server 2016 域环境搭建的方法步骤(图文)

    目录 搭建环境准备 搭建主DC 搭建辅DC 搭建和配置DNS 搭建和配置DHCP 域内加入主机和用户 创建OU 设立GPO 本文主要记录一下自己搭建的一个域环境进行测试 搭建环境准备搭建主DC搭建辅DC搭建和配置DNS搭建和配置DHCP域内加入主机和用户创建OU设立GPO 搭建环境准备 DC1:windows server 2016主机A: windows 10主机B: windows 10DC2:windows server 2019(辅) 搭建主DC 1)windows server 201

  • vue+axios+mock.js环境搭建的方法步骤

    在前后端分离开发模式下,前端项目通常在项目构建初期需要使用假数据以及相应的http请求来进行辅助开发,例如在后端接口还没开发好下,我们可以模拟http请求以及数据来进行前端的axios封装,接口设计,对http状态码处理等.前端模拟数据的方法有许多种,假如你熟悉node.js以及express框架,你可以快速地构建一个后端服务器来进行辅助开发,我本人也比较喜欢这种方式,这种方法在我日后的文章将会有介绍.如果你不熟悉node也没关系,我将一步一步教你如何在前端vue项目中使用mock.js来构建一

  • Vue生产环境调试的方法步骤

    目录 前言 原理 方法步骤 代码 缺点 长期解决方法 总结 前言 vue 生产环境默认是无法启用vue devtools的,如果生产应用出了问题,就很难解决.用本文提供的方法就可以实现线上debug vue,也不需要在浏览器上打断点. 原理 先说下vue如何判断devtools是否可用的. vue devtools扩展组件会在window全局注入__VUE_DEVTOOLS_GLOBAL_HOOK__变量,Vue就是根据这个变量判断是否需要调试的. vue根实例初始化之前判断Vue.config

  • Tensorflow环境搭建的方法步骤

    What? 我们需要通过VMware虚拟机平台+Ubuntu虚拟机+安装pip的方式来搭建TensorFlow的环境. 官网参考文档地址:https://www.tensorflow.org/install/,由于博主用的是ubuntu 14.04,因此以Ubuntu为例,进行说明,其他OS请参考上面给出的链接. 提示:最好别用windows,后面会有很多的兼容问题 安装的方式也有好几种,通过pip,docker,Anacodnda等,因为ubuntu是自带Python和pip的,因此这里给出的

随机推荐