如何利用webpack搭建vue環境

summerpxy 發布于2019-08-21 17:35 / 1269人閱讀

摘要：環境介紹系統版本版本搭建過程新建一個新的文件夾，進入文件夾，命令行中輸入必要的信息安裝注可采用淘寶源，可以安裝一個工具，這個工具可用于切換包的獲取地址，具體非本文主要內容利用安裝以備使用在項目目錄下新建一個文件，內容代碼如下，官

環境介紹

系統：macOSHigh Sierra 10.13
node版本：v8.4.0
npm版本：5.3.0

搭建過程

新建一個新的文件夾，進入文件夾，命令行中npm init,輸入必要的信息

安裝webpack npm install webpack --save-dev(注：可采用淘寶源，可以安裝一個nrm工具，這個工具可用于切換npm包的獲取地址，具體非本文主要內容)

利用npm install --save-dev path安裝path以備使用

在項目目錄下新建一個文件，webpack.config.js,內容代碼如下，官網直接拿過來的

    var path = require("path");
    module.exports = {
        entry: "./app/index.js",
            output: {
            filename: "index.js",
            path: path.resolve(__dirname, "dist")
        }
    };

有了上面這些，按照官網就可以來進行編譯了，具體請查看官網，那么如何來進行vue項目的構建呢，請繼續往下看。

首先要安裝vue為了編譯*.vue文件，我們還需要vue-template-compiler，還需要vue-loader來加載vue

安裝完成之后，新建目錄結構如圖

其中，代碼如下
Examples.vue

index.js

import Vue from "vue";
import Examples from "./template/Examples.vue";

new Vue({
    el: "#app",
    components: {
        "Examples": Examples
    }
});

index.html

然后進行項目[請見github示例]編譯，打開瀏覽器，發現控制臺，報了如下錯誤

[Vue warn]: You are using the runtime-only build of Vue where the
template compiler is not available. Either pre-compile the templates
into render functions, or use the compiler-included build.

(found in )

看npm包中的vue的package.json可以知道，main的指向dist/vue.runtime.common.js 為了解決這個問題，只要我們在webpack.config.js中加上這個即可

resolve: {
    alias: {
        vue: "vue/dist/vue.js" // 注意此處為坑
    }
}

此時在再加載頁面發現

[Vue warn]: Do not mount Vue to  or  - mount to normal
elements instead.

其實是vue不允許在body上操作，因而我將id="app"放到了div上,此時一個vue項目基本搭建完成

有些朋友可能很喜歡css in js，當你寫某些組件時，將css放在組件當中，它的可移植性非常高，示例如下，在Examples.vue中添加

但是僅僅這樣無法進行成功編譯的，我們還需要loader來對這些樣式進行編譯，我們需要style-loader將style標簽注入到頁面當中，同時需要css-loader來加提取css,npm install --save-dev style-loader并在webpack.config.js中module中rules添加規則，css-loader同理,(注：use中是從右到左執行)

{test: /.css/, use: "style-loader!css-loader"}

此時再編譯即可，為了便于使用，可以再package.json中添加build命令，則可以用npm run build來進行編譯，如下，將build寫在這個位置

"scripts": {
    "build": "webpack --watch", // 就是這句，這樣可以熱更新
    "test": "echo "Error: no test specified" && exit 1" //這句是默認的，不用管
}

12.看起來是完了，是如果要引入一張背景圖片呢，看看會出現什么問題,發現編譯不通過，所以需要url-loader來進行url解析，同理10的安裝方法，效果再一次實現

結語

如果再遇到什么報錯，請看是不是還需要什么loader,利用webpack搭建vue基本就說到這了，示例地址：https://github.com/IhInspirat...,寫的如有錯誤或不完整之處，請評論交流，謝謝！

云服務器 GPU云服務器如何搭建java開發環境服務器如何搭建環境 webpack搭建如何在云服務器上搭建環境

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89714.html

手把手教你用es6+vue2+webpack2+vue-router2搭建個人blog

摘要：更新日志更新完成靜態頁面原型修復使用的正確姿勢更新添加靜態頁面更新添加使用方法請戳我主要作用就是在你開發環節在后端同學還未開發完成的情況下，提供一個。底下評論說是標題黨，或者是光扔個github地址上來的同學我就不說什么了。你們有看看倉庫的提交記錄么？我還沒有吃撐到開個倉庫去騙star.我的出發點就是每天更新一部分代碼，教大家用我所提到的技術棧搭建一個blog，我的出發點就是這么簡單...

weapon 2019-08-20 14:15 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
vue項目前端錯誤收集之sentry

摘要：我創建了一個名為的項目。錯誤信息查看在后臺找到我們的項目，點擊進去就能看到多了一條錯誤信息。它由以下幾部分組成，分別是協議公鑰私鑰主機路徑一般為空項目。 sentry簡介 Sentry 是一個開源的錯誤追蹤工具，可以幫助開發人員實時監控和修復系統中的錯誤。其專注于錯誤監控以及提取一切事后處理所需的信息;支持幾乎所有主流開發語言(JS/Java/Python/php)和平臺, 并提供了w...

RaoMeng 2019-08-26 13:57 評論0 收藏0