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

一、什麼是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 開發環境的依賴**

五、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. 多入口以及多出口

- vue-cli

1. 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

2. 目錄結構：

-- build 裡面是一些操作檔案，使用npm run * 時其實執行的就是這裡的檔案

-- config 配置檔案，執行檔案需要的配置資訊

-- src 資源檔案 所有的元件以及所有的圖檔 都在這個檔案夾下

-- node_modules 項目依賴包

-- static 靜态資源

-- package.json 依賴包的json檔案