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 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
npm webpack vue-cli的更多相关文章
- 手把手教你如何安装使用webpack vue cli
1.安装node.js:https://nodejs.org/en/download/(看电脑的系统是多少位下载相应版本) 我下载的是Windows Installer(.msi) x64 2.打开c ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- Vue CLI安装报错 npm ERR! Exit handler never called!
安装Vue CLI时报错: npm install –g vue-cli 试了四种办法 1.把全局安装-g放到后面 npm install @vue/cli –g 2.命令行输入 npm 缓存清理命令 ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- npm, webpack, vue-cli, vue-x, axios
1,什么是node.js,以及npm 简单的来说Node.js就是运行在服务端的JavaScript,是基于Chrome V8引擎的.npm是Node.js包的管理工具. 2,npm的安装和更新 No ...
- vue-cli安装以及创建一个简单的项目(一)(Node\npm\webpack简单使用)
1.关系介绍 1.简单的说 Node.js 就是运行在服务端的 JavaScript. 2.NPM是随同NodeJS一起安装的包管理工具(新版的nodejs已经集成了npm),能解决NodeJS代码部 ...
- npm 创建vue项目(指定目录进行创建)
1.先安装node,js和npm 检验mpm 和node的方式是 npm -v / node -v 2.安装最新版本 npm install @vue/cli -g 意外安装老版本的是代码 npm ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
- VS Code引用 vue/cli
npm i @vue/cli -g 引用cli脚手架 3.0版本 下载好后 找个空文件夹 vue create myvue 创建vue项目 myvue是自己项目名称 Your connec ...
- 使用Vue CLI脚手架搭建vue项目
本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...
随机推荐
- 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <au ...
- Within K stops 最短路径 Cheapest Flights Within K Stops
2018-09-19 22:34:28 问题描述: 问题求解: 本题是典型的最短路径的扩展题,可以使用Bellman Ford算法进行求解,需要注意的是在Bellman Ford算法的时候需要额外申请 ...
- English trip V1 - B 18. Workplaces 工作地方 Teacher:Russell Key: do / does
In this lesson you will learn to talk about workplaces. 课上内容(Lesson) My English Teacher name is Russ ...
- caffe-ssd
1.安装依赖 1 sudo apt-get install libprotobuf-dev libleveldb-dev libsnappy-dev libopencv-dev libhdf5-ser ...
- Confluence 6 为一个空间应用一个主题
主题允许你对 Confluence 的外表和显示进行自定义.你的 Confluence 空间管理员可以到 The Atlassian Marketplace 上下载主题. 一旦一个主题被安装到 Con ...
- SSH登录服务器修改VNC的问题
远程登陆服务器直接用 ssh hostname@ip_address 即可登陆.hostname就是自己的用户名,ip_address就是IP地址. 关于VNC使用的命令: 杀死VNC: vncser ...
- Python记录_day21 模块
引入模块的方式: 1. import 模块 2. from xxx import 模块 一.collections 模块 1.Counter() counter是一个计数器,主要用来计数,计算一个字符 ...
- react-native run-ios时报错xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
命令行运行react-native 项目时,报错:xcrun: error: unable to find utility "instruments", not a develop ...
- flex对象.show()的时候display变成block
在css中设置display: none;的对象会出现这种情况. 在JavaScript中用.hide()隐藏的对象不会出现.
- Liunx 更新环境时用到的命令
1.进入项目文件所在位置:cd/home/zhaorg/shelly62/apache-tomcat-7.0.5.2/bin 2.关闭服务:./shuntdown.sh或者 sh.shuntdown. ...