從零開發一套完整的vue項目開發環境

時間 2020-02-10

標籤開發一套完整 vue 項目開發環境简体版

原文原文鏈接

不論是工做須要仍是面試加分，vue技術棧已經成爲了前端開發工程師必備的技術點。接下來，我將從零開發一套完整的vue項目開發環境，提供給須要的同行小夥伴觀看也方便本身之後複習。css

倉庫地址

項目源碼地址： https://github.com/tangmengch...

目標

完全 Vue 官方腳手架 Cli 幫咱們初始化作了那些事，經過 webpack4.x 幫咱們完成了哪些常見功能：html

ES6/7/8/9等高級語法轉換成ES5
stylus/less/scss等css預處理器轉換成css
解析字體font、圖片(jpg、png...)等靜態資源
壓縮js、css等文件
自動添加css各大瀏覽器廠商前綴
定義環境變量
抽離公共代碼
項目熱更新和懶加載
區別生產環境和開發環境
每次打包刪除上一次打包記錄
...

項目初始化

檢查 node 環境配置

先本地全局安裝node環境，vue的運行是依賴於node的npm的管理工具來實現的，node下載地址。下載好node以後，打開cmd管理工具，輸入node -v，回車，查看node版本號，出現版本號則說明安裝成功前端

node -v  npm -v

初始化項目目錄

在命令行依次輸入：vue

mkdir my-vue-cli 新建項目目錄
cd my-vue-cli/ 切換到項目目錄
npm init 生成項目的一些信息，最終會生成一個package.json文件。注意：能夠輸入npm init -y能夠不用按回車

安裝 webpack

webpack 是一個模塊打包機，自動分析項目依賴的模塊以及一些瀏覽器不能直接轉換的高級語法等轉換成瀏覽器能夠解析的 js、css文件等。在項目根目錄本地安裝webpack, 本項目將使用webpack4.x版本node

npm install webpack webpack-cli -D

初始化項目目錄和文件

在項目根目錄新建一下文件：webpack

src: 存放項目源碼的目錄
index.js: 須要被 webpack 編譯的文件
build：存放項目的 webpack 配置文件
webpack.config.js 項目的webpack核心配置文件
index.html: 項目打包後自動將打包的文件添加在該文件裏面

添加webpack配置文件的基本信息

mode: 模式, development開發環境、production生產環境
entry: 項目的打包的入口文件
output: 項目的打包後輸出文件
module: 模塊, 在webpack中全部文件皆模塊, 解析css、js、圖片以及字體圖標等
plugins: 插件, 用來擴展webpack功能
...

在package.json文件 scripts 屬性中添加運行 npm run build 便可打包

"build": "webpack --config ./build/webpack.config.js"

在index.js中添加測試代碼驗證webpack打包是否正確

function sum(a, b) {
    return a + b;
}
var sum = sum(1, 2)
console.log(sum)

若是項目dist目錄生成了一個bundle.js文件，說明webpack打包正確.
git

配置核心功能

ES6/7/8/9等高級語法轉換成ES5

在index.js中添加ES6/7/8等高級語法的代碼測試代碼驗證webpack是否能將其轉換爲ES5等讓瀏覽器可以解析的低級語法

安裝相關依賴

npm install babel-loader @babel/core @babel/preset-env -D
    
    babel-loader是將ES6等高級語法轉換爲能讓瀏覽器可以解析的低級語法
    @babel/core是babel的核心模塊，編譯器。提供轉換的API
    @babel/preset-env 能夠根據配置的目標瀏覽器或者運行環境來自動將ES2015+的代碼轉換爲es5

修改核心配置文件webpack.config.js

而後運行npm run build，就能夠看到咱們輸入的ES6+等高級語法被轉換爲ES5了。注意：babel-loader只會將 ES6/7/8等高級語法轉換爲ES5語法，可是對新api並不會轉換。好比Promise、Iterator、Set、Proxy、Symbol等全局對象，以及一些定義在全局對象上的方法（好比Object.assign）都不會轉碼。此時，咱們必須使用babel-polyfill，爲當前環境提供一個墊片。es6

npm install @babel/polyfill -S
    
    babel-polyfill是解決babel-loader不能對新的api進行轉換爲當前環境添加一個墊片

重點：當咱們執行打包後，打包的文件裏含有大量的重複代碼，那麼咱們須要提供統一的模塊化的helper來減小這些helper函數的重複輸出。github

npm install @babel/runtime @babel/plugin-transform-runtime -D
    
    @babel/runtime就是提供統一的模塊化的helper, 使用能大大減小打包編譯後的體積
    @babel/plugin-transform-runtime它會幫我自動動態require @babel/runtime中的內容
    注意：還有一些常見的babel:
    @babel/plugin-proposal-decorators將es6+中更高級的特性轉化---裝飾器
    @babel/plugin-proposal-class-properties將es6中更高級的API進行轉化---類

在index.js中編寫ES6+等高級語法

let fn = () => {
        console.log('箭頭函數')
    }
    fn()
    
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(123)
        }, 1000)
    })
    promise.then(res => {
        console.log(res);
    })

stylus/less/scss等css預處理器轉換成css

在項目src目錄中添加index.less文件，並在index.js文件中引入其文件

如下就以less預處理器爲例，詳細介紹下其用法，其他兩種相似：web

安裝相關依賴

npm install stylus stylus-loader less less-loader sass-loader node-sass css-loader style-loader -D
    
    css-loader主要的做用是解析css文件, 像@import等動態語法
    style-loader主要的做用是解析的css文件渲染到html的style標籤內
    stylus、less、sass是CSS的常見預處理器
    stylus-loader、less-loader、sass-loader主要是將其對應的語法轉換成css語法

修改核心配置文件webpack.config.js

添加index.less文件

@color: red;
    #div1 {
        color: @color;
        font-size: 36px;
    }

注意：CSS3 的許多特性來講，須要添加各類瀏覽器兼容前綴，開發過程當中，這樣加太麻煩，postcss 幫你自動添加各類瀏覽器前綴

npm install postcss-loader autoprefixer -D
    
    postcss-loader autoprefixer 處理瀏覽器兼容,自動爲CSS3的某些屬性添加前綴

解析字體font、圖片(jpg、png...)等靜態資源

項目中一般會使用圖片、字體等靜態資源，不使用對應的loader項目會報錯

安裝相關依賴

npm install file-loader url-loader -D
    
    file-loader能夠用來幫助webpack打包處理一系列的圖片文件；好比：.png 、 .jpg 、.jepg等格式的圖片。打包的圖片會給每張圖片都生成一個隨機的hash值做爲圖片的名字
    url-loader封裝了file-loader,它的工做原理：1.文件大小小於limit參數，url-loader將會把文件轉爲Base64；2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader

修改核心配置文件webpack.config.js

壓縮打包後的js、css

因爲項目打包後會生成不少js文件，代碼之間有不少空格、引號等，若是咱們將其去掉，這樣會大大減小打包的體積

安裝相關依賴

npm install mini-css-extract-plugin -D
    // or 或
    npm install extract-text-webpack-plugin@next -D // 不推薦使用
    npm install optimize-css-assets-webpack-plugin -D
    npm install uglifyjs-webpack-plugin -D
    // 擴展 消除未使用的css
    npm install purify-webpack purify-css -D

注意：在生產模式下，webpack自動將JS進行壓縮。MiniCssExtractPlugin 推薦只用於生產環境，由於該插件在開發環境下會致使HMR功能缺失，因此平常開發中，仍是用style-loader。

修改核心配置文件webpack.config.js

經常使用選項以及插件的使用方法

你們都習慣的Ctrl+S保存代碼後就想瀏覽器自動刷新來更新咱們的頁面

安裝相關依賴

npm install webpack-dev-server -D

修改核心配置文件webpack.config.js

經過html-webpack-plugin插件來建立html文件，並自動引入打包後的js文件

安裝相關依賴

npm install html-webpack-plugin -D
    
    html-webpack-plugin主要有兩個做用: 一、爲html文件中引入的外部資源如script、link動態添加每次compile後的hash，防止引用緩存的外部文件問題。二、能夠生成建立html入口文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

修改核心配置文件webpack.config.js

經過clean-webpack-plugin插件來自動刪除上一次打包的文件

安裝相關依賴

npm install clean-webpack-plugin -D
    
    clean-webpack-plugin是刪除webpack打包後的文件夾以及文件

修改核心配置文件webpack.config.js

webpack識別.vue文件

目前絕大多數的vue項目裏核心業務代碼都是.vue文件結尾的，但瀏覽器不支持對.vue文件的解析，故需webpack將.vue文件轉換爲瀏覽器能識別的js文件。

安裝相關依賴

npm install vue-loader vue-template-compiler cache-loader thread-loader -D
    npm install vue -S
    
    vue-loader 做用解析.vue文件
    vue-template-compiler 做用編譯模板
    cache-loader 做用緩存loader編譯的結果
    thread-loader 做用使用 worker 池來運行loader，每一個 worker 都是一個 node.js 進程
    vue 一個用於構建用戶界面漸進式的MVVM框架

修改核心配置文件webpack.config.js

<template>
        <div>
            測試123
        </div>
    </template>
    <script>
    export default {
        
    }
    </script>

修改index.js

import Vue from 'vue';
    import App from './App.vue';
    
    new Vue({
        render: h => h(App)
    }).$mount('#app')

經過以上操做後執行npm run build，則能夠看到webpack將.vue文件解析爲瀏覽器能夠識別的js語法。也能夠經過運行npm run dev看到瀏覽器頁面上會渲染出123。

Vue集成VueRouter和Vuex

安裝相關依賴

npm install vue-router vuex -S
    
    vue-router是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌
    vuex是一個專爲 Vue.js 應用程序開發的狀態管理模式

集成vue-router

新建Home.vue和About.vue兩個組件

// Home.vue
    <template>
        <div>
            home1231
        </div>
    </template>
    <script>
    export default {
        name: 'Home'
    }
    </script>
    <style lang="scss" scoped>
    </style>

// About.vue
    <template>
        <div>
            about
        </div>
    </template>
    <script>
    export default {
        name: 'About'
    }
    </script>
    <style lang="scss" scoped>
    </style>

新增路由的配置文件

在項目的src目錄裏，新建/src/router/index.js。注意：在加載路由時，可使用路由懶加載的方式進行加載組件

import Vue from 'vue';
    import VueRouter from 'vue-router';
    // import Home from '../views/Home.vue';
    // import About from '../views/About.vue';
    Vue.use(VueRouter); // 向Vue再註冊路由
    export default new VueRouter({
        mode: 'hash',
        routes: [
            {
                path: '/Home',
                name: 'Home',
                // component: Home
                component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue') // 路由懶加載方式
            },
            {
                path: '/about',
                name: 'About',
                // component: About
                component: () => import(/* webpackChunkName: 'About' */ '../views/About.vue')
            },
            {
                path: '*', // 匹配任何路由
                redirect: '/Home'
            }
        ]
    })

修改index.js文件

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    new Vue({
      router, // 新增
      render: h => h(App)
    }).$mount('#app')