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 npm@5.3.0 -g
-- npm install npm@latest -g 更新最新的稳定版本
npm 常用操作
之前我们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目,而且要管理版本。
有了npm,我们管理自己的依赖包以及版本更加简单。
到自己项目目录下,进行以下命令:
-- npm init -y 输入-y使用默认配置项 生成package.json文件。
-- npm i jquery@0.0.0 简写install 为 i 下载依赖 不写@ 默认最新版本
-- npm uninstall jquery 卸载依赖包
-- npm update jquery 更新依赖包
-- npm list 列出已安装的依赖
-- npm install 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里的键名 值为具体命令
-- author 作者
-- license 许可证
-- dependencies 生成环境依赖的包以及版本信息
-- devDependencies 开发环境的依赖
webpack3
webpack是什么
webpack是一个模块打包器,它将根据模块的依赖关系进行静态分析,
然后将这些模块按照指定的规则生成静态资源。
那么,我们为什么要用这个东西呢~~因为前端的包袱太多,历史遗留问题太重~~~脑补吧......
安装和配置
webpack是跑在Node.js环境下的,所以确定自己有node环境。
安装方式:
-- npm install webpack -g 全局安装
-- webpack <要打包文件> <打包后文件> 全局这种方式进行打包
-- npm install webpack 在自己的项目下 npm init 后在下载webpack 这就是局部安装
-- node_modules/.bin/webpack <要打包文件> <打包后文件> 项目里要打包文件是入口文件
-- 路径太长 太烦 可以自定义命令 在package.json 文件的 scripts下面自定义
entry 和 output
entry 入口文件 output 出口文件
上面我们自定义命令的时候 命令太长了~~而且我们命令太多的时候我们需要每次都自定义多条命令~~
我们可以把命令写在webpack.config.js文件中~~
module.export = {// 所有的入口文件 entry: {home: './main.js', login: './login.js',}, // 出口文件 output: {filename: '[name].bundle.js',path: __dirname + '/dist',} } // backage.json 下的scripts scripts: {"pack": "node_moudles/.bin/webpack --watch" }// 运行命令 npm run pack
webpack.config.js
webpack4
webpack的新特性
1, webpack不在单独使用,需要webpack-cli
-- 全局安装 npm install webpack webpack-cli -g -D
-- 局部安装 npm install webpack webpack-cli -D
2, 增加了模式区分 (development, production)
--webpack --mode development/production 进行模式切换
-- development 开发者模式 打包默认不压缩代码
-- production 生产者模式 上线时使用,压缩代码。 默认是这个模式
3,固定入口目录为src,与入口默认文件index.js,打包后文件在新增的dist目录下
-- 当只有一个入口文件也就是src/index.js时,无需增加webpack.config.js
4,多入口以及多出口
entry: {// 多入口a: "./src/js/index.js",b: "./src/js/index2.js", } output: {// 多出口path: path.resolve(__dirname, 'dist'),filename: './js/[name].bundle.js' }
webpack.config.js
vue-cli
vue-cli是官方提供的快速构建这个单页面应用的脚手架。
根据官方文档中的构件流程:
-- 前提是已经安装了node.js 否则npm都用不了
-- 1,使用npm全局安装vue-cli
npm install -g vue-cli
-- 2, 安装完成后在自己的工作空间里
vue init webpack vue-demo
输入命令后进入安装阶段,需要用户输入一些信息 这里省略了.....
-- 3,切换到我们的项目目录下
cd vue-demo
npm run dev
目录结构:
-- build 里面是一些操作文件,使用npm run * 时其实执行的就是这里的文件
-- config 配置文件,执行文件需要的配置信息
-- src 资源文件 所有的组件以及所有的图片 都在这个文件夹下
-- node_modules 项目依赖包
-- static 静态资源
-- package.json 依赖包的json文件
其实这里面命令很多~我们在后续项目中应用到再说~~~
vue-cli配置JQuery、bootstrap
第一步 下载安装
-- npm install jquery
-- npm install bootstrap
第二步 修改build/webpack.base.conf.js
const webpack = require('webpack') // 在module.exports里添加插件 plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","windows.jQuery": "jquery",// Popper: ['popper.js', 'default'] }) ], // *******下面是如果手动下载bootstrap用的******* resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),// 如果是手动下载的bootstrap需要添加这个配置// 'assets': path.resolve(__dirname, '../src/assets'),// 'jquery': 'jquery/src/jquery' }},
修改配置文件
第三步 修改主程序的js文件 main.js
import $ from 'jquery' import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js'
main.js
可以用啦~~~~~
vue-cli 3.0
第一步 下载vue-cli 3.0
-- npm install -g @vue/cli
-- 报错 npm error 可以运行下面命令
-- npm cache clean --force && npm cache verify
第二步 创建项目
-- vue create xxxx
之后会出现很多选项,我们可以根据自己的习惯去选择~~
第三步 目录结构以及配置文件
-- vue-cli3 目录更加简单
-- 我们手动在项目根目录下创建 vue.config.js 里面写vue的配置信息
vue-cli3 配置jQuery、bootstrap
-- 跟vue-cli2一样的配置,手动创建一个webpack.base.conf.js
转载于:https://www.cnblogs.com/caodneg7/p/9954803.html
npm、webpack、vue-cli 快速上手版相关推荐
- Vue 3 快速上手
Vue 3 快速上手 官网: 配置环境变量和nodejs node vue 开发环境搭建 第二天的时候,vue create xxx.xxx.xxx(项目名)失败! 前端项目问题解决 ==第二天修改环 ...
- Vue实战快速上手-vue+ElementUI
Vue实战快速上手-vue+ElementUI 前言 创建工程 安装依赖 使用 创建组件 配置路由 导入路由 展示 运行 问题 前言 ElementUI是饿了么的官方组件库,可以将vue和Elemen ...
- Vue简单快速上手 idea版
文章目录 版本 插件安装和通过CDN使用Vue Vue的基本语法 v-bind 条件判断 循环 监听事件 表单双绑 1.什么是双向数据绑定 2.在表单中使用双向数据绑定 组件 什么是组件 第一个Vue ...
- 安装nvm nodejs npm webpack vue vue-cli
nvm: https://github.com/coreybutler/nvm-windows/releases 选择,下载解压安装 cmd中设置淘宝镜像,加快下载nodejs速度 nvm node_ ...
- webpack构建工具快速上手指南
最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器 ...
- vite以及webpack(@vue/cli 5.x) vue3 alias别名配置
一.vite 之前写了一个vite的项目,配置找了半天,结果如下: import { defineConfig } from 'vite' import vue from '@vitejs/plugi ...
- Visual Studio 2019/2017 安装使用教程(快速上手版)
Visual Studio 2017 安装使用教程(详细) 在此鸣谢范华对本文工作的大力支持 一.下载 二.安装 2017版本新建项目过程 2019版本新建项目过程 新建源文件 然后你就可以简单编写一 ...
- cli vue 卸载,vue Cli 环境删除与重装教程 - 版本文档
vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 3.0+版本,使用的不是vue-cli,而是@vue/cli: 如果用以上的安装 ...
- vue Cli 环境删除与重装 - 版本文档
文章目录 vue-cli 卸载,版本选择,安装 · 检测(图文教程:vue Cli 环境删除与重装) 重要说明: vue-cli 的 `卸载:` vue-cli 的 `安装:` Vue CLI 官方介 ...
最新文章
- 科大讯飞董事长:AI创业,做平台已没有机会
- 启动PyCharm,提示No Python interpreter selected的问题
- asp.net MVC3 弹出窗口里嵌一个View代码
- PyTorch 1.7 发布:支持 CUDA 11、FFT 新 API、及 Windows 分布式训练
- cad一键卸载工具叫什么_CAD专用卸载修复工具,一键完全彻底卸载删除CAD软件的专用卸载工具...
- 02、DHT11温湿度传感器
- sublime linux 中文 版,Linux 下 Sublime Text 3 中文输入 (Debian 系通用)
- python化学公式配平_用Python配平化学方程式的方法
- C++常用的大小写转换的方法
- 移动端APP测试总结
- win7 wi-fi热点_如何将Windows PC变成Wi-Fi热点
- qrcode获取图片链接在安卓/ios上的问题
- 【excel】隔行引用另一表中连续数据
- [4]Python数据类型【1】
- luogu P2887 [USACO07NOV]防晒霜Sunscreen
- 介绍一款好用的头像上传插件
- 广联达计算机采用硬盘缓存,买硬盘的时候别忽略 硬盘缓存了解下
- 代码管理(git)及代码规范
- 国庆家电两位数下滑!海尔智家逆增份额持续第一
- Java中utf-8占几个字节
热门文章
- 8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...
- leaflet加载离线OSM(OpenStreetMap)
- CMake 使用方法
- Go在谷歌:以软件工程为目的的语言设计
- linux内核模块常见问题
- PyRun_SimpleFile()崩溃问题
- VMware Tools installation cannot be started manually while Easy Install is in progress.
- React开发(279):ant design 改变按钮状态判断方式
- [Redux/Mobx] Redux由哪些组件构成?
- [react-router] React-Router怎么设置重定向?