上节我们已经完成vue环境的最原始版搭建，地址，这节我们会来丰富vue的常用功能。
首先，templete模版语法是必须的，不然所有组件都手写reder函数是很痛苦的，所以我们可以选择带compiler版本的vue
当我们在项目入口文件引入vue时，默认引入的是runtime only版本，不包含compiler，（也就是把templete编译成render函数），所以我们需要通过resolve的配置，修改一下默认引入的vue 文件
resolve:{
alias:{
'vue':"vue/dist/vue.esm.js"
}
},
通过alias 给引入的vue设置别名，引入自带编译版本的vue,这时我们就不用手写render函数，可以使用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 可以看到项目运行成功，页面上出现123123
当然，组件化的思想在vue中是一个重点，并且vue的组件支持templete stytle script分开的写法，让我们的样式模版和数据分离的很清晰，如果想提供此功能就需要使用vue-loader
在loader中增加vue-loader的配置，vue-loader上节我们已经安装，另外，vue-loader15+的安装，需要额外引入一个插件，添加内容如下
const VueLoaderPlugin = require('vue-loader/lib/plugin') //加在文件头部引入
//加在rules的配置中
module:{
rules:[
{
test: /\.vue$/,
use:["vue-loader"]
}
],
},
new VueLoaderPlugin(), //加在插件的配置中
这时我们的loader就可以正常解析import的.vue类型结尾文件，这时我们来看下文档中给出的vue-loader的特性
- 允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
- 允许在一个 .vue 文件中使用自定义块，并对其运用自定义的 loader 链；
- 使用 webpack loader 将 <style> 和 <template> 中引用的资源当作模块依赖来处理；
- 为每个组件模拟出 scoped CSS；
- 在开发过程中使用热重载来保持状态。
可以看到，我们还需要安装vue-template-compiler包(将template)转化为render函数和vue-style-loader包(将style插入到dom中的style标签)和css-loader包(处理css类依赖文件，包括template中的style的内容)
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函数，但是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，页面上成功渲染出应用了font-size:100px样式的h1标签，
组件化的配置已经完成，这时候我们可能需要增加对es6语法的支持，所以要安装babel包
使用babel需要依赖三个包babel-loader(处理指定类型loader)babel-core(babel转译过程需要依赖这个包)和@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": []
}
然后我们测试一下，在上面的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>
展示的为定义的函数，我们npm run dev 可以看到，展示在页面上的是转译后的function(){console.log(2)}babel转译成功，
接下来我们引入vue-router和vuex
额外创建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>
当前目录结构
image.png
总结
到现在位置，一个五脏俱全的vue开发环境就搭建完成了，已经包括了：热更新，组件化，vuex，vue-router等，下一节我们来配置一些高级属性，包括预处理器，路由懒加载等
项目源码在这里,看的舒服的话顺便给个star ><
网友评论