上節(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-router和vuex
額外創(chuàng)建store route components文件夾姆钉,分別存放vuex配置,router配置抄瓦,和其他組件
安裝vue-router和vuex
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)
總結(jié)
到現(xiàn)在位置潮瓶,一個五臟俱全的vue開發(fā)環(huán)境就搭建完成了,已經(jīng)包括了:熱更新钙姊,組件化毯辅,vuex,vue-router等煞额,下一節(jié)我們來配置一些高級屬性思恐,包括預(yù)處理器,路由懶加載等
項目源碼在這里,看的舒服的話順便給個star ><