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 [email protected] -g 更新最新的穩定版本
npm 常用操作
之前我們用JQuery或者Bootstrap用cdn 或者直接手動下載並放入專案,而且要管理版本。
有了npm,我們管理自己的依賴包以及版本更加簡單。
到自己專案目錄下,進行以下命令:
-- npm init -y 輸入-y使用預設配置項 生成package.json檔案。
-- npm i [email protected]
-- 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
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 [email protected] -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