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 protected] -g
-- npm install npm@latest -g 更新最新的穩定版本
npm 常用操作
之前我們用JQuery或者Bootstrap用cdn 或者直接手動下載並放入項目，而且要管理版本。
有了npm，我們管理自己的依賴包以及版本更加簡單。
到自己項目目錄下，進行以下命令：
-- npm init -y 輸入-y使用默認配置項 生成package.json文件。
-- npm i [email protected] 簡寫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 packwebpack.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 bootsrap
第二步 修改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