# webpack处理vue
## 安装 vue
```
yarn add vue
```
## vue单文件组件
**single-file components(单文件组件)** ，文件扩展名为 `.vue` 的文件，需要安装`vetur`插件
[单文件组件文档](https://cn.vuejs.org/v2/guide/single-file-components.html)
单文件组件的结构说明
```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.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
```
+ 提供`App.vue`组件
```html
我是app
```
+ 编写入口文件`main.js`
```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
```
+ 创建路由实例
```js
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`文件
```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
```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配置, 非常方便
```js
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 中导入插件包
```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
```
发送请求
```js
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文件)
```js
module.exports = {
devServer: {
port: 3000,
open: true,
proxy: {
'/music': {
target: 'https://c.y.qq.com/mv/fcgi-bin/',
pathRewrite: { '^/music': '' }
}
}
},
// rem 的配置
// ....
}
```
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
