資訊專欄INFORMATION COLUMN
摘要：環(huán)境介紹系統(tǒng)版本版本搭建過程新建一個(gè)新的文件夾，進(jìn)入文件夾，命令行中輸入必要的信息安裝注可采用淘寶源，可以安裝一個(gè)工具，這個(gè)工具可用于切換包的獲取地址，具體非本文主要內(nèi)容利用安裝以備使用在項(xiàng)目目錄下新建一個(gè)文件，內(nèi)容代碼如下，官
環(huán)境介紹
系統(tǒng)：macOSHigh Sierra 10.13
node版本：v8.4.0
npm版本：5.3.0
搭建過程
新建一個(gè)新的文件夾，進(jìn)入文件夾，命令行中npm init,輸入必要的信息
安裝webpack npm install webpack --save-dev(注：可采用淘寶源，可以安裝一個(gè)nrm工具，這個(gè)工具可用于切換npm包的獲取地址，具體非本文主要內(nèi)容)
利用npm install --save-dev path安裝path以備使用
在項(xiàng)目目錄下新建一個(gè)文件，webpack.config.js,內(nèi)容代碼如下，官網(wǎng)直接拿過來的
var path = require("path");
module.exports = {
entry: "./app/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist")
}
};
有了上面這些，按照官網(wǎng)就可以來進(jìn)行編譯了，具體請(qǐng)查看官網(wǎng)，那么如何來進(jìn)行vue項(xiàng)目的構(gòu)建呢，請(qǐng)繼續(xù)往下看。
首先要安裝vue為了編譯*.vue文件，我們還需要vue-template-compiler，還需要vue-loader來加載vue
安裝完成之后，新建目錄結(jié)構(gòu)如圖
其中，代碼如下
Examples.vue
Hello,{{name}}
index.js
import Vue from "vue";
import Examples from "./template/Examples.vue";
new Vue({
el: "#app",
components: {
"Examples": Examples
}
});
index.html
然后進(jìn)行項(xiàng)目[請(qǐng)見github示例]編譯，打開瀏覽器，發(fā)現(xiàn)控制臺(tái)，報(bào)了如下錯(cuò)誤
[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 為了解決這個(gè)問題，只要我們?cè)?b>webpack.config.js中加上這個(gè)即可
resolve: {
alias: {
vue: "vue/dist/vue.js" // 注意此處為坑
}
}
此時(shí)在再加載頁面發(fā)現(xiàn)
[Vue warn]: Do not mount Vue to or
- mount to normal
elements instead.
其實(shí)是vue不允許在body上操作，因而我將id="app"放到了div上,此時(shí)一個(gè)vue項(xiàng)目基本搭建完成
有些朋友可能很喜歡css in js，當(dāng)你寫某些組件時(shí)，將css放在組件當(dāng)中，它的可移植性非常高，示例如下，在Examples.vue中添加
但是僅僅這樣無法進(jìn)行成功編譯的，我們還需要loader來對(duì)這些樣式進(jìn)行編譯，我們需要style-loader將style標(biāo)簽注入到頁面當(dāng)中，同時(shí)需要css-loader來加提取css,npm install --save-dev style-loader并在webpack.config.js中module中rules添加規(guī)則，css-loader同理,(注：use中是從右到左執(zhí)行)
{test: /.css/, use: "style-loader!css-loader"}
此時(shí)再編譯即可，為了便于使用，可以再package.json中添加build命令，則可以用npm run build來進(jìn)行編譯，如下，將build寫在這個(gè)位置
"scripts": {
"build": "webpack --watch", // 就是這句，這樣可以熱更新
"test": "echo "Error: no test specified" && exit 1" //這句是默認(rèn)的，不用管
}
12.看起來是完了，是如果要引入一張背景圖片呢，看看會(huì)出現(xiàn)什么問題,發(fā)現(xiàn)編譯不通過，所以需要url-loader來進(jìn)行url解析，同理10的安裝方法，效果再一次實(shí)現(xiàn)
結(jié)語
如果再遇到什么報(bào)錯(cuò)，請(qǐng)看是不是還需要什么loader,利用webpack搭建vue基本就說到這了，示例地址：https://github.com/IhInspirat...,寫的如有錯(cuò)誤或不完整之處，請(qǐng)?jiān)u論交流，謝謝 ！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89714.html
摘要：更新日志更新完成靜態(tài)頁面原型修復(fù)使用的正確姿勢更新添加靜態(tài)頁面更新添加使用方法請(qǐng)戳我主要作用就是在你開發(fā)環(huán)節(jié)在后端同學(xué)還未開發(fā)完成的情況下，提供一個(gè)。 底下評(píng)論說是標(biāo)題黨，或者是光扔個(gè)github地址上來的同學(xué)我就不說什么了。你們有看看倉庫的提交記錄么？我還沒有吃撐到開個(gè)倉庫去騙star.我的出發(fā)點(diǎn)就是每天更新一部分代碼，教大家用我所提到的技術(shù)棧搭建一個(gè)blog，我的出發(fā)點(diǎn)就是這么簡單...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：我創(chuàng)建了一個(gè)名為的項(xiàng)目。錯(cuò)誤信息查看在后臺(tái)找到我們的項(xiàng)目，點(diǎn)擊進(jìn)去就能看到多了一條錯(cuò)誤信息。它由以下幾部分組成，分別是協(xié)議公鑰私鑰主機(jī)路徑一般為空項(xiàng)目。 sentry簡介 Sentry 是一個(gè)開源的錯(cuò)誤追蹤工具，可以幫助開發(fā)人員實(shí)時(shí)監(jiān)控和修復(fù)系統(tǒng)中的錯(cuò)誤。其專注于錯(cuò)誤監(jiān)控以及提取一切事后處理所需的信息;支持幾乎所有主流開發(fā)語言(JS/Java/Python/php)和平臺(tái), 并提供了w...
閱讀 1100·2021-11-16 11:44
閱讀 1379·2019-08-30 13:12
閱讀 2420·2019-08-29 16:05
閱讀 3084·2019-08-28 18:29
閱讀 920·2019-08-26 13:41
閱讀 3241·2019-08-26 13:34
閱讀 2610·2019-08-26 10:35
閱讀 946·2019-08-26 10:28
