Javascript

vue 进阶学习(二):node.js、npm、webpack、vue-cli

本文主要是介绍vue 进阶学习(二):node.js、npm、webpack、vue-cli,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

node.js、npm、webpack、vue-cli

前言:主要对插件的描述,安装,卸载、使用以及注意点

1 node.js

  1. 说明:是一个基于 Chrome V8 引擎的 JavaScript 运行环境,即运行时建立的一个平台,是运行在服务端的 JavaScript;相当于 java 体系中对应的 jdk;也可以使用 node.js 可以单独用来编写 javascript。
  2. 安装:安装的方式很多种,可以从官网获取安装包;node.js 中文官网下载链接
  3. 查看版本:node -v;安装之后可以通过查看版本看是否安装成功。

2. npm

  1. 说明:包管理工具,相当于 maven 中的包依赖管理,解决包依赖问题,可以从 npm 服务器下载别人的包使用,也可以将自己的包上传到 npm 服务器供别人使用;
  2. 安装:无需手动安装,node.js 中已经集成了 npm;
  3. 查看版本:npm -v
  4. 升级更新:npm install npm -g,如果版本不兼容,需要升级版本
  5. 使用 npm 命令安装模块
    • 安装命令:npm install
    • 查看所有版本号:npm view versions --json
    • 全局和本地安装区别:本地安装(local)、全局安装(global)两种,从敲的命令行来看,差别只是有没有-g 而已
    • 如果要安装指定的版本,使用@拼接,如 npm install webpack@5.35.1 -g
    • 卸载命令:npm uninstall

3. webpack 静态模块打包器

  1. 说明:是基于 nodejs 实现的,是一款前端模块加载器兼工程化打包工具,是一种模块化的解决方案,相当于 maven 中工程自动化,能够把各种资源作为模块来处理和使用,主要作用打包、压缩、合并、按序加载
  2. 安装:npm install webpack webpack-cli --save-dev (两个模块同时一起安装)
  3. 检查安装是否成功:webpack -v

4. vue-cli

  1. 说明:基于 Vue.js 进行快速开发的完整系统,实现的交互式的项目脚手架。
  2. 安装:
    • 2.0 版本:npm install -g vue-cli
    • 3.0 版本:npm install -g @vue/cli(保证 node 版本>=8.9)
  3. 查看安装是否成功(版本):vue -V 或者 vue --version
  4. 卸载:npm uninstall -g vue-cli
  5. 基于 vue-cli3.0 搭建项目,网上教程挺多的,就不写了;命令:vue create 项目名称

vue3.0 是没有 webpack 配置文件的,vue3.0 自己封装了 webpack 的配置;我们只需要在根目录创建 vue.config.js 文件,即可对 webpack 进行配置

这篇关于vue 进阶学习(二):node.js、npm、webpack、vue-cli的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!