從零開始基于webpack4 babel8搭建vue開發(fā)環(huán)境(二)

上節(jié)我們已經(jīng)完成vue環(huán)境的最原始版搭建办悟,地址躬厌,這節(jié)我們會來豐富vue的常用功能。

首先狠裹,templete模版語法是必須的虽界,不然所有組件都手寫reder函數(shù)是很痛苦的,所以我們可以選擇帶compiler版本的vue

當(dāng)我們在項目入口文件引入vue時涛菠,默認引入的是runtime only版本莉御,不包含compiler,(也就是把templete編譯成render函數(shù))俗冻,所以我們需要通過resolve的配置礁叔,修改一下默認引入的vue 文件

resolve:{
    alias:{
      'vue':"vue/dist/vue.esm.js"
    }
  },

通過alias 給引入的vue設(shè)置別名,引入自帶編譯版本的vue,這時我們就不用手寫render函數(shù)迄薄,可以使用templete語法了

import Vue from "vue";

new Vue({
    data(){
        return{
            text:123,
        }
    },
    el:"#app",
    //render:c=>c("h2",1223212321312123123)
    template:"<h1>123123</h1>"
})

npm run dev 可以看到項目運行成功琅关,頁面上出現(xiàn)123123

當(dāng)然,組件化的思想在vue中是一個重點讥蔽,并且vue的組件支持templete stytle script分開的寫法涣易,讓我們的樣式模版和數(shù)據(jù)分離的很清晰,如果想提供此功能就需要使用vue-loader

在loader中增加vue-loader的配置冶伞,vue-loader上節(jié)我們已經(jīng)安裝新症,另外,vue-loader15+的安裝碰缔,需要額外引入一個插件账劲,添加內(nèi)容如下

const VueLoaderPlugin = require('vue-loader/lib/plugin') //加在文件頭部引入

//加在rules的配置中
  module:{
    rules:[
      {
        test: /\.vue$/,
        use:["vue-loader"]
      }
    ],
  },

new VueLoaderPlugin(), //加在插件的配置中

這時我們的loader就可以正常解析import.vue類型結(jié)尾文件,這時我們來看下文檔中給出的vue-loader的特性

  • 允許為 Vue 組件的每個部分使用其它的 webpack loader金抡,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug瀑焦;
  • 允許在一個 .vue 文件中使用自定義塊,并對其運用自定義的 loader 鏈梗肝;
  • 使用 webpack loader 將 <style> 和 <template> 中引用的資源當(dāng)作模塊依賴來處理榛瓮;
  • 為每個組件模擬出 scoped CSS;
  • 在開發(fā)過程中使用熱重載來保持狀態(tài)巫击。

可以看到禀晓,我們還需要安裝vue-template-compiler包(將template)轉(zhuǎn)化為render函數(shù)和vue-style-loader包(將style插入到dom中的style標(biāo)簽)和css-loader包(處理css類依賴文件精续,包括template中的style的內(nèi)容)


npm install vue-template-compiler@^2.0.0 vue-style-loader@^4.0.0 css-loader@^2.0.0 --save-dev

vue-template-compiler這個插件也可以完成template編譯成render的過程,所以我們可以使用runtime only版本粹懒,而不需要引入帶compiler的vue版本重付,這時,主入口文件不可以使用template了凫乖,需要使用render函數(shù)确垫,但是vue文件中因為有vue-template-compiler的存在,仍可以使用template模版帽芽,此時的入口文件

import Vue from "vue";
import App from "./app.vue"
import { compile } from "vue-template-compiler";

new Vue({
    data(){
        return{
            text:123,
        }
    },
    el:"#app",
    render:c=>c("App"),
    components:{
        App
    }   
    //template:"<h1>123123</h1>"
})

app.vue文件

<template>
    <h1>{{test}}</h1>
</template>

<script>
export default {
    data(){
        return{
            test:213123,
        }
    }
}
</script>

<style>
h1{
    font-size: 100px;
}
</style>

entry.js文件

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: {
      main:'./index.js'
    },
  devServer:{
      index:"index.html",
      publicPath: "/",
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module:{
    rules:[
      {
        test: /\.vue$/,
        use:["vue-loader"]
      },
      {
        test:/\.css$/,
        use:["vue-style-loader","css-loader"]
      }
    ],
  },
  plugins:[
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true
      }),
  ]
}

這時npm run dev删掀,頁面上成功渲染出應(yīng)用了font-size:100px樣式的h1標(biāo)簽,

組件化的配置已經(jīng)完成导街,這時候我們可能需要增加對es6語法的支持披泪,所以要安裝babel
使用babel需要依賴三個包babel-loader(處理指定類型loader)babel-core(babel轉(zhuǎn)譯過程需要依賴這個包)和@babel/preset-env(指定javascript最新版本而無需配置多個版本)

npm install babel-loader@^8.0.0 @babel/core@^7.0.0 @babel/preset-env@^7.0.0 --save-dev

安裝完成之后在webpack入口配置中增加babel-loader的配置,同時在項目根目錄下增加一個.babelrc文件搬瑰,里面對babel-loader的屬性進行配置

  • 增加loader
      {
        test:/\.js$/,
        use:["babel-loader"]
      }

增加.babelrc配置

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/transform-runtime"]
}

安裝transform-runtime插件增加對async await的支持款票,

npm install  @babel/plugin-transform-runtime --save-dev

安裝polyfill 來支持es67的特殊屬性

npm install --save @babel/polyfill

當(dāng)前.banelrc配置

{
    "presets": [["@babel/preset-env",{"useBuiltIns": "usage"}]],
    "plugins": ["@babel/transform-runtime"]
}

然后我們測試一下,在上面的app.vue中跌捆,將展示的元素修改一下

<template>
    <h1>{{test()}}</h1>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    methods:{
        test:function(){
            let a= data=>{
                console.log(2)
            };
            return a
        }
    }
}
</script>

<style>
h1{
    font-size: 100px;
}
</style>

展示的為定義的函數(shù)徽职,我們npm run dev 可以看到,展示在頁面上的是轉(zhuǎn)譯后的function(){console.log(2)}babel轉(zhuǎn)譯成功佩厚,

接下來我們引入vue-routervuex
額外創(chuàng)建store route components文件夾姆钉,分別存放vuex配置,router配置抄瓦,和其他組件

安裝vue-routervuex

npm install vue-router@^3.0.0 vuex@^3.0.0 --save

主入口文件

import Vue from "vue";
import App from "./app.vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
import router from "./route/route.js"
import store from "./store/store.js"

new Vue({
    data(){
        return{
            text:123,
        }
    },
    router,
    store,
    el:"#app",
    render:c=>c("App"),
    components:{
        App
    }   
    
    //template:"<h1>123123</h1>"
})

route配置文件

import routercomp from "../components/routercomp.vue"
import VueRouter from "vue-router"

export default new VueRouter({
    routes:[
                {   
                    name:'routercomp',
                    path:'/',
                    component:routercomp
                }
            ]
})

store配置文件

import Vuex from "vuex"
import Vue from "vue"

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
      text: 0
    },
  })

app.vue文件

<template>
   <!-- <h1>{{test()}}</h1> -->
   <Router-View to="/"></Router-View>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
   /* methods:{
        test:function(){
            let a= data=>{
                console.log(2)
            };
            return a
        }
    }*/
}
</script>

<style>
h1{
    font-size: 100px;
}
</style>

routercomp.vue文件

<template>
    <div>
        <h1>routercom</h1>
        <h2>store:{{this.$store.state.text}}</h2>
    </div>
</template>

<script>
export default {
}
</script>
<style>
</style>

當(dāng)前目錄結(jié)構(gòu)

image.png

總結(jié)

到現(xiàn)在位置潮瓶,一個五臟俱全的vue開發(fā)環(huán)境就搭建完成了,已經(jīng)包括了:熱更新钙姊,組件化毯辅,vuex,vue-router等煞额,下一節(jié)我們來配置一些高級屬性思恐,包括預(yù)處理器,路由懶加載等

項目源碼在這里,看的舒服的話順便給個star ><

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末膊毁,一起剝皮案震驚了整個濱河市胀莹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌婚温,老刑警劉巖描焰,帶你破解...
    沈念sama閱讀 212,599評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異栅螟,居然都是意外死亡荆秦,警方通過查閱死者的電腦和手機篱竭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來步绸,“玉大人掺逼,你說我怎么就攤上這事∶遗” “怎么了坪圾?”我有些...
    開封第一講書人閱讀 158,084評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長惑朦。 經(jīng)常有香客問我,道長漓概,這世上最難降的妖魔是什么漾月? 我笑而不...
    開封第一講書人閱讀 56,708評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮胃珍,結(jié)果婚禮上梁肿,老公的妹妹穿的比我還像新娘。我一直安慰自己觅彰,他們只是感情好吩蔑,可當(dāng)我...
    茶點故事閱讀 65,813評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著填抬,像睡著了一般烛芬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上飒责,一...
    開封第一講書人閱讀 50,021評論 1 291
  • 那天赘娄,我揣著相機與錄音,去河邊找鬼宏蛉。 笑死遣臼,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的拾并。 我是一名探鬼主播揍堰,決...
    沈念sama閱讀 39,120評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼嗅义!你這毒婦竟也來了屏歹?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,866評論 0 268
  • 序言:老撾萬榮一對情侶失蹤芥喇,失蹤者是張志新(化名)和其女友劉穎西采,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體继控,經(jīng)...
    沈念sama閱讀 44,308評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡械馆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,633評論 2 327
  • 正文 我和宋清朗相戀三年胖眷,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片霹崎。...
    茶點故事閱讀 38,768評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡珊搀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出尾菇,到底是詐尸還是另有隱情境析,我是刑警寧澤,帶...
    沈念sama閱讀 34,461評論 4 333
  • 正文 年R本政府宣布派诬,位于F島的核電站劳淆,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏默赂。R本人自食惡果不足惜沛鸵,卻給世界環(huán)境...
    茶點故事閱讀 40,094評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望缆八。 院中可真熱鬧曲掰,春花似錦、人聲如沸奈辰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽奖恰。三九已至吊趾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間房官,已是汗流浹背趾徽。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留翰守,地道東北人孵奶。 一個月前我還...
    沈念sama閱讀 46,571評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像蜡峰,于是被迫代替她去往敵國和親了袁。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,666評論 2 350

推薦閱讀更多精彩內(nèi)容