npm、webpack、vue-cli快速上手版

node.js和npm

npm的安装和更新

Node.js下载安装,npm自带的包管理工具。

查看安装版本信息:

  node -v 查看node.js版本信息

  npm -v 查看npm版本信息

更新npm到指定版本:

  npm install [email protected] -g  (install可以简写为i,-g是安装为全局模式下)

  npm i [email protected] -g 更新最新的稳定版本

npm 常用操作

进入项目目录下,进行一下的命令:

  npm init -y 输入-y使用默认配置项,生成package.json文件。管理目前所在的文件目录

  npm i [email protected] 简写install为i 下载依赖 不写@默认最新版本

  npm uninstall jQuery 卸载依赖包

  npm update jQuery 更新依赖包

  npm list 列出已安装的依赖

  npm i webpack --D 保存为开发环境依赖

  老版本需要--save参数

我们的项目目录下会生成一个node_modules目录,我们用npm下的包会在这个目录下。

我们所有的依赖信息在package.json文件中,包括我们所有的依赖以及版本。

如果我们删掉node_modules目录,可以使用npm i 来下载所有依赖。

npm 常用配置项

当我们用npm init 的时候用了参数-y,如果不用-y我们可以进行一些配置。

在我们的package.json文件中有很多配置项。

  name 项目名字中间不能有空格只能用小写

  version 项目版本

  description 项目描述信息

  main 项目的入口文件

  scripts 指定命令的快捷方式npm run test    test是scripts里的键名   值为具体命令

webpack4

webpack的新特性

1,webpack不在单独使用,需要webpack-cli

  全局安装 npm i webpack webpack-cli -g

  局部安装 npm i webpack webpack-cli -D

2,增加了模式区分(development,production)

  webpack --mode development/production 进行模式切换

  development开发者模式 打包默认不压缩代码

  production 生产者模式上线时使用,压缩代码。默认是这个模式

3,固定入口目录为src,与入口默认文件index.js,出口文件在新增的dist目录下main.js

  当只有一个入口文件也就是src/index.js时,无需增加webpack.config.js

vue-cli

vue-cli是官方提供的快速构建这个单页面应用的脚手架。

根据官方文档中的构件流程:

  前提是已经安装了node.js否则npm都用不了

  1,使用npm全局安装vue-cli

    npm i -g vue-cli

  2,安装完成后在自己的工作空间里

    vue init webpack wjs   (这里的wjs是创建的项目名称)

  3,切换到我们的项目目录下

    cd wjs

    npm run dev

目录结构:

  build里面是一些操作文件,使用npm run * 时其实执行的就是这里的文件

  config配置文件,执行文件需要的配置信息

  src资源文件,所有的组件以及所有的图片都在这个文件夹下

  node_modules 项目依赖包

  static 静态资源

  package.json  依赖包的json文件

原文地址:https://www.cnblogs.com/wjs521/p/9959872.html

时间: 2024-10-16 00:49:54

npm、webpack、vue-cli快速上手版的相关文章

npm、webpack、vue-cli 快速上手版

Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome V8 引擎的. npm 是Node.js 的包管理工具. npm的安装和更新 Node.js下载安装   Node.js 官网下载安装.npm自带的包管理工具. 查看安装版本信息: --  node -v  查看Node.js 版本信息 --  npm -v  查看npm版本信息 更新npm到指定版本: --  npm install [email

轻量级MVVM框架Vue.js快速上手(MVVM、SEO单页面应用)

轻量级MVVM框架Vue.js快速上手(MVVM.SEO单页面应用.×××服务器端渲染.Nuxt.js) 网盘地址:https://pan.baidu.com/s/1LkhepNpGAtRjrxp_CVJNIg 密码: d483备用地址(腾讯微云):https://share.weiyun.com/5tTLqQk 密码:pxezuj Vue.js是一套构建用户界面的轻量级MVVM框架,与其他重量级框架不同的是, Vue.js 的核心库只关注视图层,并且非常容易学习,很容易与其它前端技术或已有的项

手把手教你如何安装使用webpack vue cli

1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开cmd,查询npm -v看是否有版本号 3.输入指令: 1.npm install -g @vue/cli 2.npm install -g @vue/cli 这两种方式都是全局的(-g) 注意:如果觉得下载速度过于慢了(服务器在国外),可以使用淘宝镜像下载 在cmd中输入: npm install

webpack构建工具快速上手指南

最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).样式(含less/sass).图片等都作为模块来使用和处理.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只

从本地向 Github 上传项目步骤攻略(快速上手版)

最近想把之前自己做的一些好玩的项目共享到Github,网上找了一圈上传教程,都感觉写的太深奥.复杂,云里雾里,特把自己的方法纪录如下: PS:这种方式一般适用于:开始做项目时,没有直接在github上添加,等做到一半或做完才想添加的项目. 准备工作: 1.Github帐号 2.在Github上添加新的开源项目仓库 3.sourcetree工具,或其它git管理工具 (没有的童鞋可这里下载:http://pan.baidu.com/s/1kV52fyB   软件是mac版) 正文: 1.Githu

SQLite(快速上手版)笔记

原文 1. SQL语法关键字 关键字 描述 Create Table 创建数据表 Alter Table 修改数据表 Drop Table 删除数据表 Create Index 创建索引 Drop Index 删除索引 Create Trigger 创建触发器 Drop Trigger 删除触发器 Create View 创建视图 Drop View 删除视图 Insert 插入数据 Delete 删除数据 Update 更新数据 Select 查询数据 Begin 启动事务 Commit 提交

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库

译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 尽管我已经在工作上用了Vue.js一段时间,但我从不需要在npm上发布组件.但最近发现在不同的项目重写组件是件非

使用@vue/cli初始化项目

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 卸载它.附上vue-cli官方文档地址 首先检查你的node版本,Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+),命令为 node --version 1.安装vue-cli,-g表示全局安装,这样你才可以直接在命令行使用该指令,否则不行 npm insta

【Vue CLI】从安装到构建项目再到目录结构的说明 𰅨

目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 原文: http://blog.gqylpy.com/gqy/284 "Vue CLI是一个基于Vue.js进行快速开发的完整系统. Vue CLI致力于将Vue生态中的工具基础标准化.它确保了各种构建工具只需给予智能的默认配置便可平稳衔接. 这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题.于此同时,它还为每个工具提供了调整配置的灵活性.