Vue之Webpack入門及學習總結

時間  2020-02-27
標籤 vue webpack 入門 學習 總結 简体版
原文   原文鏈接

Babel 是一個通用的多功能 JavaScript 編譯器，但與通常編譯器不一樣的是它只是把同種語言的高版本規則轉換爲低版本規則，而不是輸出另外一種低級機器可識別的代碼，而且在依賴不一樣的拓展插件下可用於不一樣形式的靜態分析。（靜態分析：指在不須要執行代碼的前提下對代碼進行分析以及相應處理的一個過程，主要應用於語法檢查、編譯、代碼高亮、代碼轉換、優化、壓縮等等）javascript

安裝babel css

//打開終端，輸入命令
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node

//安裝完畢以後，再次輸入命令安裝
npm install --save @babel/polyfill

建立babel.config.js html

const presets = [
            ["@babel/env",{
                targets:{
                    //最低支持的瀏覽器版本
                    edge:"17",
                    firefox:"60",
                    chrome:"67",
                    safari:"11.1"
                }
            }]
        ]

export導出/暴露vue

//export default默認導出，即外部JS文件import（引入）後可使用的屬性
// export default只能處處一次
export default {
  //屬性
  a,
  //方法
  show
}
//按須要暴露（導出），不限制導出次數，引入名字須要跟暴露同樣
export let s1 = 's1'
export let s2 = 's2'
export function say() {
  console.log('say')
}

import導入java

//默認導入，默認導入沒法獲取按需暴露的內容
import m1 from './m1.js'

// 按需導入，名字要與導入文件內暴露的名字同樣
//s2 as ss2中s2是原名字，經過as改別名
import m1, { s1, s2 as ss2, say } from './m1.js'

//若是導出文件沒有默認導出，或者按需導出能夠直接import執行js文件內容
import './m1.js'

使用npx執行js文件 node

npx babel-node ./index.js

Webpack基本使用jquery

//初始化文件夾，會生成package.json文件
npm init -y

//建立src文件夾，存放代碼文件

//這裏舉個例子，引入jquery，實際看需求，
//此時項目運行會有錯誤，由於import $ from "jquery";這句代碼屬於ES6的新語法代碼，在瀏覽器中可能會存在兼容性問題
因此咱們須要webpack來幫助咱們解決這個問題
import $ from "jquery";


//安裝webpack和webpack-cli
npm install webpack webpack-cli -D

//建立webpack.config.js 的配置文件用來配置webpack
module.exports = {
        //能夠設置爲development(開發模式)，production(發佈模式)
        mode:"development"
    }

//修改項目中的package.json文件添加運行腳本dev
"scripts":{
        "dev":"webpack"
    }

//編譯，獲得轉換低版本的js文件，默認的dist路徑中生成的main.js文件，將其引入到html頁面中。
npm run dev

設置webpack的打包入口/出口 （ 默認會將dist/main.js 做爲默認的打包輸出js文件 ）webpack

//webpack.config.js內設置
module.exports = {
  //須要打包文件信息
  entry: path.join(__dirname, './src/index.js'),
  //輸出打包信息
  output: {
    path: path.join(__dirname, './dist'), // 輸出文件的存放路徑
    filename: 'bundle.js' // 輸出文件的名稱
  },
}

設置webpack的自動打包 web

//第一步
npm install webpack-dev-server --D

//第二部，修改package.json中的dev指令以下：
"scripts":{
                "dev":"webpack-dev-server"
}

//第三步，將引入的js文件路徑更改成：（根目錄下）
//這裏的bundle.js是本身在webpack.config.js配置的輸出文件名！
<script src="/bundle.js"></script>

//第四步 從新打包
npm run dev

//第五步 登陸網址查看效果
http://localhost:8081/

配置html-webpack-plugin chrome

由於自動打包每次都要訪問 http://localhost:8081/還有找到對應的index.html，比較繁瑣。因此配置html-webpack-plugin ​​​​​​後訪問 http://localhost:8081/能夠直接打開html文件。

//第一步
npm install html-webpack-plugin -D

//第二部在webpack.config.js文件引入包
const HtmlWebpackPlugin = require('html-webpack-plugin')
//第三步配置
const htmlPlguin = new HtmlWebpackPlugin({
    //設置生成預覽頁面的模板文件（須要打開的html文件模板/源文件，但打開的不是這個文件）
    template: './src/index.html',
    //設置生成的預覽頁面名稱（另外生成一個template配置的html文件，在根目錄，用於自動打開）
    filename: 'index.html'
})

//第四步導出(暴露)
module.exports = {
    plugins: [htmlPlguin],
}

測試時報錯，引入後解決（查詢說是webpack全局問題？待驗證，多是webpack安裝了全局）
npm link webpack --save-dev

配置自動打包相關參數  (自動打包後vscode能夠直接彈出頁面)

//在package.json文件中配置
//自動打包後自動彈出網頁
"dev": "webpack-dev-server --open",

//host設置IP，port設置端口
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888",

webpack中的加載器

經過loader打包非js模塊：默認狀況下，webpack只能打包js文件，若是想要打包非js文件，須要調用loader加載器才能打包 loader加載器包含：

1).less-loader

2).sass-loader

3).url-loader:打包處理css中與url路徑有關的文件

4).babel-loader:處理高級js語法的加載器

5).postcss-loader

6).css-loader,style-loader

安裝style-loader,css-loader來處理樣式文件

沒有安裝前用webpack打包css文件會報錯！

import './css/index.css'

//第一步
npm install style-loader css-loader -D

//第二步 配置規則：更改webpack.config.js的module中的rules數組
 module : {
            rules:[
                {
                    //test設置須要匹配的文件類型，支持正則
                    test:/\.css$/,
                    //use表示該文件類型須要調用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }

安裝less,less-loader處理less文件

//第一步
npm install less-loader less -D

//第二步 導入less文件
import './css/index.less'

//第三步
        module : {
            rules:[
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }

安裝sass-loader,node-sass處理less文件

//導入文件
import './css/index.scss'

//下載包
npm install sass-loader node-sass -D

//配置文件
 module : {
            rules:[
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }

安裝post-css自動添加css的兼容性前綴（-ie-,-webkit-），即自動給那些有兼容性問題的樣式自動加前綴

//下載包
npm install postcss-loader autoprefixer -D

//在項目根目錄建立並配置postcss.config.js文件，內容以下；
const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}

//配置規則：更改webpack.config.js的module中的rules數組，在css配置項加'postcss-loader'
use:['style-loader','css-loader','postcss-loader']

打包樣式表中的圖片以及字體文件

在樣式表css中有時候會設置背景圖片和設置字體文件，同樣須要loader進行處理使用url-loader和file-loader來處理打包圖片文件以及字體文件

//下載包
npm install url-loader file-loader -D

//配置webpack.config.js的module中的規則
{
                //這裏配置文件類型
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用來設置字節數，只有小於limit值的圖片，纔會轉換爲base64圖片
                use:"url-loader?limit=16940"
            }

打包js文件中的高級語法

在編寫js的時候，有時候咱們會使用高版本的js語法,有可能這些高版本的語法不被兼容，咱們須要將之打包爲兼容性的js代碼,因此須要安裝babel系列的包

//安裝babel轉換器
npm install babel-loader @babel/core @babel/runtime -D

//安裝babel語法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

//在項目根目錄建立並配置babel.config.js文件，內容以下；
module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }

//配置規則：更改webpack.config.js的module中的rules數組
{
                test:/\.js$/,
                use:"babel-loader",
                //exclude爲排除項，意思是不要處理node_modules中的js文件
                exclude:/node_modules/
            }

.Vue單文件組件

傳統Vue組件的缺陷： 全局定義的組件不能重名，字符串模板缺少語法高亮，不支持css(當html和js組件化時，css沒有參與其中) 沒有構建步驟限制，只能使用H5和ES5，不能使用預處理器（babel）

解決方案： 使用Vue單文件組件，每一個單文件組件的後綴名都是.vue 每個Vue單文件組件都由三部分組成

1).template組件組成的模板區域

2).script組成的業務邏輯區域

3).style樣式區域

<template>
    <div>
        <h1>你好vue</h1>
    </div>
</template>

<script>
export default {
    data(){
        return {};
    }
}
</script>

<style scoped>
    h1{
        color: red
    }
</style>

配置.vue文件的加載器 ​​​​​​​

//下載包
npm install vue-loader vue-template-compiler -D

//配置規則：更改webpack.config.js的module中的rules數組
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();

module : {
            rules:[
                { 
                    test:/\.vue$/,
                    loader:"vue-loader",
                 }
             ]
          }

在webpack中使用vue ​​​​​​​

//下載包
npm install vue -S

//在js文件中引入
import Vue from 'vue'
//導入vue單文件
import Vuw from 'components/app.vue'

const vm=new Vue({
    el:'#app',
    //渲染指定組件
    render:h=>h(app)
})

//vue操做區域，在html頁面中
<div id="app"></div>

使用webpack打包發佈項目 ​​​​​​​

//配置package.json
 "scripts":{
        "build":"webpack -p"
    }

//運行打包命令
npm run build

//生成的dist文件夾就是打包出來的文件夾

Vue腳手架 ​​​​​​​   Vue腳手架能夠快速生成Vue項目基礎的架構。

使用命令建立Vue項目 ​​​​​​​

//安裝3.x版本的Vue腳手架：
npm install -g @vue/cli

//使用命令建立Vue項目
vue create my-project

//選擇Manually select features(選擇特性以建立項目)

//勾選特性能夠用空格進行勾選。

Use history mode for router? (Requires proper server setup for index fallback in production)
//是否選用歷史模式的路由：n

//ESLint選擇：ESLint + Standard config

//什麼時候進行ESLint語法校驗：Lint on save

//babel，postcss等配置文件如何放置：In dedicated config files(單獨使用文件進行配置)

//是否保存爲模板：n

//切換路徑
$ cd my-project
//運行
$ npm run serve
//獲得地址
http://localhost:8081/

基於ui界面建立Vue項目 ​​​​​​​

//執行命令後打開操做頁面
vue ui

基於2.x的舊模板，建立Vue項目 ​​​​​​​

//下載包
npm install -g @vue/cli-init
//建立
vue init webpack my-project

分析Vue腳手架生成的項目結構 ​​​​​​​

node_modules:依賴包目錄

public：靜態資源目錄

src：源碼目錄

src/assets:資源目錄

src/components：組件目錄

src/views:視圖組件目錄

src/App.vue:根組件

src/main.js:入口js

src/router.js:路由js

babel.config.js:babel配置文件

Vue腳手架的自定義配置 ​​​​​​​

經過 package.json 進行配置 [不推薦使用]

"vue":{
            "devServer":{
                "port":"9990",
                "open":true
            }
        }

經過單獨的配置文件進行配置，建立vue.config.js ​​​​​​​

module.exports = {
            devServer:{
                port:8888,
                open:true
            }
        }

Element-UI的基本使用 ​​​​​​​

//下載包
npm install element-ui -S
//導入組件庫
import ElementUI from "element-ui";
//導入相關樣式
import "element-ui/lib/theme-chalk/index.css";
//配置vue插件
Vue.use(ElementUI)

//配置完成後就能夠在element-ui官網複製代碼到xxx.vue單文件組件中

基於圖形化界面自動安裝

//經過 vue ui 啓動界面
//在插件面板下載 vue-cli-plugin-element
//用vscode打開項目，在app.vue內添加element-ui官網案例代碼便可看到效果
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程