技术改变生活

Technology changes life,Life-long learning

从零开始基于webpack4 babel8搭建vue开发环境(二)

上节我们已经完成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": ["@babel/transform-runtime"] } 

安装transform-runtime插件增加对async await的支持,

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

然后我们测试一下,在上面的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-routervuex
额外创建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> 

当前目录结构

《从零开始基于webpack4 babel8搭建vue开发环境(二)》

image.png

总结

到现在位置,一个五脏俱全的vue开发环境就搭建完成了,已经包括了:热更新,组件化,vuex,vue-router等,下一节我们来配置一些高级属性,包括预处理器,路由懒加载等

项目源码在这里,看的舒服的话顺便给个star ><

原文始发于:从零开始基于webpack4 babel8搭建vue开发环境(二)

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注