day06-vuejs-webpack（3.81）（二） day06-vuejs-webpack（3.81）（二）

1.webpack中url-loader的使用： 1.1处理图片路径的 loader

{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' },

limit 给定的值，是图片的大小，单位是 byte，如果我们引用的图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串，如果图片小于给定的 limit 值，则会被转为 base64的字符串
1.2.webpack中使用url-loader处理字体文件: 1.2.1在main文件中的引入bootstrap：

mport 'bootstrap/dist/css/bootstrap.css'

注意：如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略路径前面的 node_modules 这一层目录，直接写包的名称，然后后面跟上具体的文件路径
不写 node_modules 这一层目录，默认就会去 node_modules 中查找
1.3使用url-loader处理字体文件:

{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理字体文件的 loader

2.webpack中babel的配置: 在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader把高级语法转为低级的语法之后，会把结果交给 webpack 去打包到 bundle.js中通过 Babel ，可以帮我们将高级的语法转换为低级的语法
2.1. 在 webpack 中，可以运行如下两套命令，安装两套包，去安装 Babel 相关的loader功能：
2.1.1 第一套包：

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

2.1.2 第二套包：

cnpm i babel-preset-env babel-preset-stage-0 -D

1. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个新的匹配规则：
  2.2.1

{ test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }

2.2.2 注意：在配置 babel 的 loader规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
2.2.2.1 如果不排除 node_modules，则Babel 会把 node_modules 中所有的第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
2.2.2.2 哪怕，最终，Babel 把所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
2.3. 在项目的根目录中，新建一个叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范：不能写注释，字符串必须用双引号
2 3.1 在 .babelrc 写如下的配置：大家可以把 preset 翻译成【语法】的意思:

{ "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] }

3.使用vue实例的render方法渲染组件：

444444

这里 return 的结果，会替换页面中 el 指定的那个容器
4.区分webpack中导入vue两种方式: 4.1指定文件路径：

import Vue from '../node_modules/vue/dist/vue.js

4.2,在webpack.config中

resolve: { alias: { // 修改 Vue 被导入时候的包的路径 "vue$": "vue/dist/vue.js" } }

5.在vue中结合render函数渲染指定的组件到容器中： 5.1. 导入 login 组件

import login from './login.vue'

默认，webpack 无法打包 .vue 文件，需要安装相关的loader：

cnpm i vue-loader vue-template-compiler -D

/在配置文件中，新增loader哦配置项:

{ test:/\.vue$/, use: 'vue-loader' }

总结梳理： webpack 中如何使用 vue :

安装vue的包： cnpm i vue -S
由于在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
在 main.js 中，导入 vue 模块 import Vue from 'vue'
定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
使用 import login from './login.vue' 导入这个组件
创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

6.export default 和 export 的使用方式: 在 ES6中，也通过规范的形式，规定了 ES6 中如何导入和导出模块
ES6中导入模块，使用 import 模块名称 from '模块标识符' import '表示路径'
在 ES6 中，使用 export default 和 export 向外暴露成员：
6.1export default

var info = { name: 'zs', age: 20 }export default info /* export default { address: '北京' } */

注意： export default 向外暴露的成员，可以使用任意的变量来接收
注意：在一个模块中，export default 只允许向外暴露1次
注意：在一个模块中，可以同时使用 export default 和 export 向外暴露成员。
暴露多次报的错如下：

文章图片
image.png 6.2export：

export var title = '小星星' export var content = '哈哈哈'

注意：使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做【按需导出】
注意： export 可以向外暴露多个成员，同时，如果某些成员，我们在 import 的时候，不需要，则可以不在 {} 中定义
注意：使用 export 导出的成员，必须严格按照导出时候的名称，来使用 {} 按需接收；
注意：使用 export 导出的成员，如果就想换个名称来接收，可以使用 as 来起别名；
引入后：

import m222, { title as title123, content } from './test.js' console.log(m222) console.log(title123 + ' --- ' + content)

文章图片
image.png 7.结合webpack使用vue-route(官网：https://router.vuejs.org)r: 装包：

npm i vue-router -S

7.1.导入路由模块：

import VueRouter from 'vue-router'

7.2安装路由模块：

Vue.use(VueRouter);

7.3导入需要展示的组件:

import login from './components/account/login.vue'import register from './components/account/register.vue'

7.4创建路由对象:

var router = new VueRouter({routes: [{ path: '/', redirect: '/login' },{ path: '/login', component: login },{ path: '/register', component: register }]});

7.5将路由对象，挂载到 Vue 实例上:

var vm = new Vue({ el: '#app', // render: c => { return c(App) } render(c) { return c(App); }, router // 将路由对象，挂载到 Vue 实例上 });

render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中

7.6改造App.vue组件，在 template 中，添加router-link和router-view：

登录注册

注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染组件，渲染出来的组件，只能放到 el: '#app' 所指定的元素中；
Account 和 GoodsList 组件，是通过路由匹配监听到的，所以，这两个组件，只能展示到属于路由的中去；
8.结合webpack实现children子路由: app:

文章图片
app组件.png

文章图片
Accoynt组件.png

文章图片
goodslist组件.png

文章图片
Accoyn的注册的组件.png

文章图片
Accoyn的登陆组件.png
导入：

import Vue from 'vue' // 1. 导入 vue-router 包 import VueRouter from 'vue-router' // 2. 手动安装 VueRouter Vue.use(VueRouter)// 导入 app 组件 import app from './App.vue'// 导入自定义路由模块 import router from './router.js'var vm = new Vue({ el: '#app', render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以不要把路由的 router-view 和 router-link 直接写到 el 所控制的元素中 router // 4. 将路由对象挂载到 vm 上 })

8.组件中style标签lang属性和scoped属性的介绍:

scoped:

div { color: red; }

此方式给样式设定了作用域

lang：

body { div { font-style: italic; } }

【day06-vuejs-webpack（3.81）（二）】普通的 style 标签只支持普通的样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */
只要 style 标签，是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性
--
抽离路由模块:

import VueRouter from 'vue-router'// 导入 Account 组件 import account from './main/Account.vue' import goodslist from './main/GoodsList.vue'// 导入Account的两个子组件 import login from './subcom/login.vue' import register from './subcom/register.vue'// 3. 创建路由对象 var router = new VueRouter({ routes: [ // accountgoodslist { path: '/account', component: account, children: [ { path: 'login', component: login }, { path: 'register', component: register } ] }, { path: '/goodslist', component: goodslist } ] })// 把路由对象暴露出去 export default router