• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 2周前 (04-29) 4次浏览

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
喜欢 (0)