前端进阶(三) webpack处理vue以及vue-cli脚手架环境
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
安装插件
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-size import '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.y.qq.com/mv/fcgi-bin/',pathRewrite: { '^/music': '' }}}},// rem 的配置// ....
}
免责声明:本内容仅方便后续使用过程中当作笔记使用。如因本人发布的作品内容涉及版权或存在其他问题,请于文章发布后的30日内联系我进行删除。
前端进阶(三) webpack处理vue以及vue-cli脚手架环境相关推荐
- vue搭建cli脚手架环境(出现问题及解决,主要是node版本低)
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) 参考文章: (1)vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) (2)https://www.cnblogs. ...
- webpack服务器性能,高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui...
接上篇 本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! element-ui 介绍 饿了么前端开发组件框架 ...
- 11_04_第六阶段:大前端进阶||07-Vue详解||P6:Vue绑定事件【观看狂神随笔】
前序: 1. v-on 可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码 参考:jQuery事件 v-on监听事件: 事件有Vue的事件.和前端页面本身的一些事件!我们这里 ...
- 丁鹿学堂:前端进阶学习vue3最新教程之vue的单文件组件深入理解
在vue3中,template模版中的html代码,并不能直接在网页中执行,而是会在项目运行时,在浏览器中被编译为js 的函数去执行. 问题:在template模版中写html,体验很差,智能提示都不 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
EasyDSS流媒体解决方案总体可划分成三个部分:前端视频源设备(PC.手机.摄像机)流媒体数据获取并即时回传.流媒体服务器端直播和录像与回放.客户端直播播放与录像检索回放.前端推流我们使用跨平台的R ...
- 前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽 <slot>_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
- 【2019 前端进阶之路】深入 Vue 响应式原理,活捉一个 MVVM
作者:江三疯,专注前端开发.欢迎关注公众号前端发动机,第一时间获得作者文章推送,还有各类前端优质文章,致力于成为推动前端成长的引擎. 前言 作为 Vue 面试中的必考题之一,Vue 的响应式原理,想必 ...
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间...
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...
- 前端进阶必备技能:Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
最新文章
- ServiceMesh架构的演变过程概述
- 解决 yum时 Error: Protected multilib versions报错
- yum-fastestmirror模块的使用 提升yum速度的!
- C++中类的继承方式的区别以及private public protected 范围
- C语言学习笔记--动态库和静态库的使用
- wxWidgets:wxWindow类用法
- sinaapp mysql连接_手把手教你在新浪云上免费部署自己的网站--连接数据库
- c++实现字符串类的封装
- python编码和解码_Python中的编码与解码(转)
- android 预约挂号代码_告别排队!用Python定时自动挂号和快捷查询化验报告
- 专访清华大学姚期智院士:量子计算的未来
- 花滑三周连跳_花滑女单短节目惊现三周半跳 称就像做梦一样
- winform布局、控件
- CV领域的实验室及研究组
- 记各常见手机屏幕尺寸
- MATLAB/Simulink仿真 并网型风光混储直流微电网 实现:功率分配、削峰填谷、平抑功率波
- solr全文搜索的使用
- Linux中ifconfig command not found
- 合肥工业大学宣城校区2018年-2019年第一学期(大三上学期)物联网工程专业资料汇总(含课件、个人实验报告、实验代码、课设报告等)
- Discuz二次元风格The_C_Style模板源码下载
热门文章
- 【PHPExcel】数学公式
- playsound函数Linux使用,函数PlaySound和sndPlaySound的用法
- css图片和文字一样高,css里图片和文字如何等高
- 超融合架构的优缺点_超融合服务器与传统架构服务器的区别哪?定制服务器厂家简要分析...
- c语言结构体反射解析,C语言结构体解析
- python套接字编程_Python套接字编程(1)——socket模块与套接字编程
- vue-vue项目中mock.js的使用
- 淘宝自营“护肤品”精准引流加粉分享
- CentOS-7-64bit 配置Apache + MySQL + PHP
- mysql中的意向锁IS,IX