從零開始的vue-cli（簡易版）

時間  2020-03-06
標籤 開始 vue cli 簡易 简体版
原文   原文鏈接

你能學到什麼？

這裏將介紹如何從零開始搭建一套包含調試，構建的vue腳手架，其中主要是對webpack的學習，以及如今一些經常使用的集成在腳手架中前端功能的使用好比：babel,代碼壓縮，代碼熱更新等等。本文適合掌握了前端基礎以及vue相關知識的程序猿觀看學習，最主要的是要有顆熱愛這個行業的心（滑稽），也請各位大神指教指教，不喜勿噴，若是對你起到了一絲絲的幫助也請給咱點個贊~javascript

安裝依賴

安裝webpack以及webpack-cli（使用webpack必須的依賴）css

npm i webpack webpack-cli
複製代碼

安裝webpack-dev-server（用於調試，熱更新等）html

npm i webpack-dev-server
複製代碼

初始化項目

新建package.json前端

npm init -y
複製代碼

新建index.htmlvue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-cli-simple</title>
</head>
<body>
</body>
</html>
複製代碼

新建src目錄而且新建main.js用於作入口文件java

在根目錄新建webpack.config.js用於webpack配置node

module.exports = {};
複製代碼

最終項目結構爲webpack

webpack打包以及調試

首先在main.js中寫入es6

alert('這是一個頁面')
複製代碼

接着將webpack配置文件webpack.config.js更改web

const path = require('path');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/', 
        filename: 'app.js' 
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    }
};
複製代碼

entry：要打包的js文件

path:最後生成文件的路徑

publicPath:使用調試模式時文件的位置

filename:最後生成的文件名

最後修改index.html引入打包好的js，因爲path，publicPath咱們寫的是相同的因此這邊咱們只要用/dist/app.js就都能訪問（無論是調試模式仍是最後打包出來）

index.html加上

<script src="/dist/app.js"></script>
複製代碼

最後改動package.json加入調試以及打包的命令

"scripts": {
    "serve": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  }
複製代碼

運行 npm run serve

而且當你改動main.js的值的時候會同步刷新（熱更新）

運行 npm run build

Babel

首先babel咱們知道是用來適配新語法的因此咱們修改main.js，加入一些語法，如箭頭函數，let

let babelTest= ()=>{
    alert('這裏是babelTest方法')
}
babelTest()
複製代碼

運行後能夠找到app.js

因此若是是這樣的話一些諸如ie或者老版本的瀏覽器就沒法運行起來，因此咱們來安裝babel 

npm install babel-loader @babel/core @babel/preset-env babel-polyfill
複製代碼

在根目錄建立.babelrc文件（用於配置），如今咱們先放空

{}
複製代碼

接着在改動webpack.config.js中加入

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
複製代碼

簡單介紹一下這邊的rules，webpack在進行編譯的時候會讀取rules選項，並根據裏面的配置處理文件。

test說明須要處理的文件類型，exclude是要忽略的文件，use中就是處理的方法。

這裏的配置就是處理全部的js文件，可是忽略全部node_modules中的js，最後使用babel-loader去處理匹配到的js文件。

如今再次運行

能夠看到已經將代碼修改好了。還有一點要提的是babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，好比async/await。若想要轉化的話要使用babel-polyfill 

npm install  babel-polyfill
複製代碼

把webpack.config.js的entry改一下

entry: ['babel-polyfill', './src/main.js']
複製代碼

用es6中的async/await試一下，改動main.js

function sendMes() {
    return new Promise((resolve, reject) => {
        resolve('這裏是數據');
    })
}
async function getData(){
    const data = await sendMes();
    console.log(data)
}
getData()
複製代碼

運行後

關於babel-polyfill的話，它提供一個環境讓瀏覽器能夠使用不支持的那些語法，好比舊的瀏覽器中不支持await，則babel-polyfill會在全局定義一個await並實現它，到最後瀏覽器就能夠正常使用。

引入vue

安裝vue

npm install vue
複製代碼

改動main.js

import Vue from 'vue';

var app = new Vue({
  el: '#app',
  data: {
    message: '這裏是vue'
  }
複製代碼

改動index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-cli-simple</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script src="/dist/app.js"></script>
</body>
</html>
複製代碼

運行

不過因爲vue引入時默認的是不帶編譯器的版本，因此沒有辦法解釋模板，這個時候運行的話會報錯，因此要把vue的版本轉到帶編譯器的版本

在webpack.config.js加入

resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
複製代碼

再次運行便可

添加scss與css

安裝依賴

npm i node-sass css-loader vue-style-loader sass-loader
複製代碼

在src目錄下新建一個styles文件夾並在其中新建common.css

body{
    font-size: 30px;
}
複製代碼

改動webpack.config.js

rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            }
        ]
複製代碼

這邊咱們用了一個新的rule是關於css文件的處理，值得一提的是，若是use中有多個處理方法，那麼會從下往上依此處理，這邊就是先用css-loader加載css，再用vue-style-loader把加載好的樣式加入近vue中。

修改main.js加入

import './styles/common.css';
複製代碼

能夠看到樣式生效了

因此若是要加載scss的話，只要多一步將scss轉化成css的loader便可（sass-loader） 改動webpack.config.js 

 rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ],
            }
        ]
複製代碼

styles中建立scssTest.scss

body{
    div{
        color: red;
    }
    
}
複製代碼

main.js中引入，再次運行便可看到效果

引入.vue文件

安裝依賴

npm i vue-loader vue-template-compiler 
複製代碼

改動webpack.config.js加入一個針對.vue文件的loader

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            'scss': [
                'vue-style-loader',
                'css-loader',
                'sass-loader'
            ]
        }
    }
}
複製代碼

而且添加一個vueloader的插件，多說一句這裏在vue-loader中又多加了一個針對scss的loader，使得咱們能夠在vue文件中使用scss。

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
...
plugins: [
        new VueLoaderPlugin()
    ]

...
}
複製代碼

在src中新建App.vue

<template>
   <div>
       <p>{{ userInput }}</p>
        <input v-model="userInput">
   </div>
</template>

<script>
export default {
    data(){
        return{
            userInput:'測試'
        }
    }
}
</script>
<style scoped lang="scss">
div{
    p{
        color: blue
    }
}
</style>
複製代碼

修改main.js

import Vue from 'vue';
import App from './App.vue';
import './styles/common.css';
import './styles/scssTest.scss'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
複製代碼

修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-cli-simple</title>
</head>
<body>
    <div id="app"></div>
    <script src="/dist/app.js"></script>
</body>
</html>
複製代碼

運行

錯誤調試

咱們在日常的開發中遇到的報錯後面都會有詳細的信息，如錯誤行數等，方便咱們定位錯誤。而在webpack中輸出的是編譯事後的錯誤位置。如今咱們在App.vue中輸出一個值。

export default {
    data(){
        return{
            userInput:'測試'
        }
    },
    mounted(){
        console.log('測試')
    }

}
複製代碼

能夠看到是從一個未知的js中輸出出來的，這樣不利於咱們調試，要解決這個問題咱們改動webpack.config.js 

module.exports = {
...
devtool: '#eval-source-map'
...
}
複製代碼

再次運行的話

就知道在咱們源碼中的哪一個部分了

打包

執行打包命令 npm run build

發現打包出來的js竟然有1.68M的大小，緣由是咱們加入了調試時的提示以及未進行壓縮

壓縮使用webpack中的UglifyJSPlugin插件便可

npm install uglifyjs-webpack-plugin
複製代碼

修改webpack.config.js，再加入一個插件

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
...
plugins: [
        new UglifyJSPlugin(),
        new VueLoaderPlugin()
    ]

...
}
複製代碼

由於加入了錯誤調試的代碼，咱們須要將上一步所加的東西去除，可是爲了調試的時候有，打包的時候沒有就須要加入一個環境變量，安裝

npm i cross-env --save-dev
複製代碼

cross-env用於改變環境

改動package.json

"scripts": {
    "serve": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --mode production  --progress --hide-modules"
  }
複製代碼

這樣webpack.config.js就能夠經過判斷process.env.NODE_ENV來進行區別

改動webpack.config.js，在最後加上

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '';
}
複製代碼

再次打包

發現咱們的js只剩下了192k很是穩。

結語

瞭解了這簡單版本的腳手架如何構建，總的來講webpack給前端帶來便利性，工程性是史無前例的， 雖然慢慢有更好的方案開始代替它，可是他的思想仍是值得咱們去學習的。固然cli的構建遠沒有這麼簡單，不過有了雛形以後一點點完善它也是一種樂趣所在吧。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程