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  開發環境的依賴

 

webpack

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