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.jsconst 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的配置
/lml/p/9953429.html
安装插件
yarn add lib-flexible postcss-px2rem
在 public 中的 index.html 中删除 meta 标签
flexible会为页面根据屏幕自动添加<meta name='viewport' >
标签,动态控制initial-scale,maximum-scale,minimum-scale
等属性的值。
在 src / main.js 中导入插件包
// 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-sizeimport 'lib-flexible'
配置 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¬ice=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./mv/fcgi-bin/',pathRewrite: {'^/music': '' }}}},// rem 的配置// ....}
免责声明:本内容仅方便后续使用过程中当作笔记使用。如因本人发布的作品内容涉及版权或存在其他问题,请于文章发布后的30日内联系我进行删除。