前端进阶(三) webpack处理vue以及vue-cli脚手架环境

2021年6月27日 383点热度 0条评论

webpack处理vue

安装 vue

yarn add vue

vue单文件组件

single-file components(单文件组件) ,文件扩展名为 .vue 的文件,需要安装vetur插件

单文件组件文档

单文件组件的结构说明

<template>
  <div>
    <h1>这是单文件组件的模板内容</h1>
  </div>
</template>

<script>
// 这是组件的js代码
export default {
  data () {
    return {
      msg: 'hello vue'
    }
  }
}
</script>

<style>
/* 这是单文件组件的样式 */
h1 {
  color: red;
}
</style>

vue-loader的配置

Vue Loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件的格式撰写 Vue 组件:

  • 安装依赖包
yarn add vue-loader vue-template-compiler  -D
  • webpack配置
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件!
    new VueLoaderPlugin()
  ]
}
  • 提供App.vue组件
<template>
  <div>我是app</div>
</template>

<script>
export default {

}
</script>

<style>

</style>
  • 编写入口文件main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  // render函数用于渲染一个组件作为根组件(固定写法)
  render (createElement) {
    // 把App组件作为根组件
    return createElement(App)
  }
})

webpack项目中路由的配置

基本步骤

  • 新建views文件夹,存放Home.vue组件和Login.vue组件
  • 安装vue-router
yarn add vue-router
  • 创建路由实例
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import Home from './components/Home.vue'
import Login from './components/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/login', component: Login }
  ]
})

new Vue({
  el: '#app',
  // render函数用于渲染一个组件作为根组件(固定写法)
  render (createElement) {
    // 把App组件作为根组件
    return createElement(App)
  },
  router
})

抽取路由代码

把路由功能从main.js中抽取出来

新建router/index.js文件

// 配置所有的路由的功能
// 模块化环境开发
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home}
  ]
})

export default router

修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  el: '#app',
  // render函数用于渲染一个组件作为根组件(固定写法)
  render (createElement) {
    // 把App组件作为根组件
    return createElement(App)
  },
  router
})

vue-cli 脚手架环境

通过学习webpack的配置, 我们更深入的理解了脚手架里面的一些配置原理,

下面会介绍一下, 脚手架中移动端的rem配置 和 反向代理配置, 这些都是实际工作中常用的

先通过脚手架创建项目

vue create vue-mobile

在项目根目录新建 vue.config.js进行配置, 这个vue.config.js 会覆盖默认cli的webpack配置, 非常方便

module.exports = {
  devServer: {
    port: 3000,
    open: true
  }
}

运行项目

yarn serve

rem 布局 - 插件 postcss-pxtorem的配置

https://www.cnblogs.com/lml2017/p/9953429.html

  1. 安装插件
    yarn add lib-flexible postcss-px2rem
  2. 在 public 中的 index.html 中删除 meta 标签

    flexible会为页面根据屏幕自动添加<meta name='viewport' >标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值。

  3. 在 src / main.js 中导入插件包
    // 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size
    import 'lib-flexible'
  4. 配置 vue.config.js
    module.exports = {
     devServer: {
       port: 3000,
       open: true
     },
     // rem 的配置
     css: {
       loaderOptions: {
         css: {},
         postcss: {
           plugins: [
             require('postcss-px2rem')({
               // 适配 375 屏幕, 设计图750中量出来的尺寸要 / 2
               // 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
               remUnit: 37.5
             })
           ]
         }
       }
     }
    }

反向代理的配置说明

webpack的反向代理, 可以起一个临时的代理服务器, 帮助解决在开发过程中的跨域问题, 就算跨域了也能拿到后台的数据

安装 axios, 发送ajax请求

yarn add axios

发送请求

import axios from 'axios'
export default {
  async created () {
    const url = `/music/getmv_by_tag?g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=GB2312&notice=0&platform=yqq.json&needNewCode=0&cmd=shoubo&lan=all`

    const res = await axios.get(url)
    console.log(res)
  }
}

配置代理 (配置vue.config.js文件)

module.exports = {
  devServer: {
    port: 3000,
    open: true,
    proxy: {
      '/music': {
        target: 'https://c.y.qq.com/mv/fcgi-bin/',
        pathRewrite: { '^/music': '' }
      }
    }
  },
  // rem 的配置
  // ....
}

harry

这个人很懒,什么都没留下

文章评论