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

江南才子

webpack处理vue

安装 vue

yarn add vue

vue单文件组件

　　single-file components(单文件组件) ，文件扩展名为 .vue 的文件，需要安装vetur插件
单文件组件文档　　单文件组件的结构说明
`html    这是单文件组件的模板内容```## vue-loader的配置 Vue Loader 是一个 [webpack](https://webpack.js.org/) 的 loader，它允许你以一种名为[单文件组件](https://vue-loader.vuejs.org/zh/spec.html)的格式撰写 Vue 组件： + 安装依赖包```yarn add vue-loader vue-template-compiler  -D```+ webpack配置```js// webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {  module: {    rules: [      // ... 其它规则      {        test: /\.vue$/,        loader: 'vue-loader'      }    ]  },  plugins: [    // 请确保引入这个插件！    new VueLoaderPlugin()  ]}```+ 提供`App.vue`组件```html　　我是app
　　```+ 编写入口文件`main.js````jsimport 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```+ 创建路由实例```jsimport 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`文件```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```jsimport 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配置, 非常方便```jsmodule.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会为页面根据屏幕自动添加``标签，动态控制`initial-scale，maximum-scale，minimum-scale`等属性的值。3. 在 src / main.js 中导入插件包   ```js   // 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size   import 'lib-flexible'   ```4. 配置 vue.config.js   ```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```发送请求```jsimport 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文件)```jsmodule.exports = {  devServer: {    port: 3000,    open: true,    proxy: {      '/music': {        target: 'https://c.y.qq.com/mv/fcgi-bin/',        pathRewrite: { '^/music': '' }      }    }  },  // rem 的配置  // ....}```