Node、webpack、脚手架vue-cli,介绍与安装,无缝连接教程

简介: Node、webpack、脚手架vue-cli,介绍与安装,无缝连接教程

nodejs简介:

1、Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 JavaScript程序可以运行在浏览器中 JavaScript程序可以运行在Node.js环境中 Node.js在浏览器外运行的。


安装Vue脚手架需要先安装Node.js (安装好了的不要随意卸载Nodejs)


安装Node.js:

1、win+r输入cmd 或者在我的电脑打开cmd


查看是否安装nodejs:node -v


下载Node.js:(找到与自己电脑对应的)
  中文文档地址:[](http://nodejs.cn/download/)
双击打开下载好的node.js,点击next,勾选两个复选框即可  
查看是否安装成功:node -v 出现node.js的版本号就是已经安装成功
安装Nodejs时会一起安装npm,npm的作用是对Nodejs依赖的包进行管理,也可以理解
用来安装或卸载nodejs需要的东西
如果不是安装在C盘就走1.~4
1.1配置一下npm在全局安装模块时的路径和缓存的路径
1.2 在安装node.js目录下,新建两个文件夹
node_global(全局)
node_cache(缓存)
1.3 打开cmd命令窗口
npm config set prefix "F:\nodejs\node_global"
npm config set cache "F:\nodejs\node_cache"
1.4打开我的电脑==》右击此电脑===>属性===>高级设置===>环境变量===>path===>编辑===>新建===>
node_global的文件位置放上去

由于npm是国外的服务器,所以下载比较慢,我们需要安装淘宝镜像 安装淘宝镜像:


1、复制网址:


2、复制淘宝镜像的指令: npm install -g cnpm --registry=https://registry.npm.taobao.org


3、打开cmd:将复制下来的指令粘贴即可


webpack:构建工具和打包的

安装webpack:


npm i(install) webpack-cli -g(global)


cnpm i(install) webpack-cli -g(global)


当webpack出现错误的时候(使用以下指令,重装webpack)


卸载webpack:


安装install

卸载uninstall

cnpm uninstall webpack-cli -g(global)


Vue脚手架:

vue-cli就是vue的脚手架工具,和我们在工地上看到的脚手架是一样的,它帮助我们搭建基本的开发环境, 就好比如架子搭好了,利用它搞定目录的结构、本地调试、单元测试、热加载及代码部署


热加载(不需要重启项目)

2.X版本的脚手架安装:

1、cnpm i vue-cli -----安装vue2.x版本的指令


2、vue -V(大写)----查看vue的版本(出现版本号,就是安装成功)


3、2x版本创建项目
  vue init webpack (项目名)--->回车
    注意:项目名字母不能大写,不能使用中文
    原因:这个指令的意思是初始化一个vue项目,webpack是构建工具,
    也就是整个项目是基于webpack的。其中项目名称是整个项目文件加的名称,
    这个文件夹会自动生成在你指定的目录中。
    project name ---> 项目名称 ---》回车
    author 作者      --->回车填写作者名
    vue-router  是否选择安装路由,这是官方的路由
    eslint  --->no 严格规范(规范写代码的格式)
    test 是否安装单元测试
    e2e 是否安装e2e测试
  在cmd命令窗口中:ctrl+C按2次,是停止操作

安装3.X版本

需要安装桥接工具 向下兼容: 如果使用npm安装较慢就使用cnpm安装

npm i -g @vue/cli-init cnpm i -g @vue/cli-init

安装3.X版本的脚手架指令
  cnpm i -g @vue/cli
创建项目
  vue create 项目名称
  使用什么方式运行项目:npm(第一个选项)---->弹出一个窗口
  default是一默认使用配置,默认安装及自动配置babel,eslint
  Manually select features是自定义配置,需要我们手动配置,可以自己选择配置什么东西
  使用↑↓k控制上下---》回车选择(确定)
    初始化项目
  cd 项目名
  运行项目:npm run serve
3.X版本相当于2.X版本:
  更简洁

最后

如果对您有帮助,希望能给个👍评论收藏三连!

想跟博主交朋友的可以通过查找,公_号❤:前端老实人,联系到博主。

博主为人老实,无偿解答问题哦❤

 

相关文章
|
11月前
|
JavaScript Unix Linux
nvm与node.js的安装指南
通过以上步骤,你可以在各种操作系统上成功安装NVM和Node.js,从而在不同的项目中灵活切换Node.js版本。这种灵活性对于管理不同项目的环境依赖而言是非常重要的。
3452 11
|
存储 JavaScript 搜索推荐
Node框架的安装和配置方法
安装 Node 框架是进行 Node 开发的第一步,通过正确的安装和配置,可以为后续的开发工作提供良好的基础。在安装过程中,需要仔细阅读相关文档和提示,遇到问题及时解决,以确保安装顺利完成。
1253 155
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
Node.js 是一种高效的 JavaScript 运行环境,基于 Chrome V8 引擎,支持在服务器端运行 JavaScript 代码。本文介绍如何在阿里云上一键部署 Node.js 环境,无需繁琐配置,轻松上手。前提条件包括 ECS 实例运行中且操作系统为 CentOS、Ubuntu 等。功能特点为一键安装和稳定性好,支持常用 LTS 版本。安装步骤简单:登录阿里云控制台,选择扩展程序管理页面,安装 Node.js 扩展,选择实例和版本,等待创建完成并验证安装成功。通过阿里云的公共扩展,初学者和经验丰富的开发者都能快速进入开发状态,开启高效开发之旅。
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
14812 23
|
JavaScript 前端开发 数据可视化
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
1006 2
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
|
JavaScript
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
nodejs安装之npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIRED reason: certificate has expired-证书错误通用问题解决方案-优雅草央千澈
3722 27
|
数据库
【YashanDB知识库】安装共享集群时报错:YAS-05721 invalid input parameter, reason: node name invalid
【YashanDB知识库】安装共享集群时报错:YAS-05721 invalid input parameter, reason: node name invalid
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
1051 2
2024年5月node.js安装(winmac系统)保姆级教程
|
JavaScript 前端开发 开发工具
从零开始使用node.js制作一个脚手架
本文介绍了如何从零开始使用Node.js制作一个项目脚手架,涵盖了脚手架的基本概念、所需准备的第三方库、项目结构的初始化、命令注册、项目创建流程及用户交互设计等内容。通过实例演示了如何利用commander、inquirer等库实现命令行工具的开发,最终完成了一个能够根据用户选择自动创建Vue或React项目的脚手架。
461 1
从零开始使用node.js制作一个脚手架