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

2. 2. 打开 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 :

1. 安装vue的包： cnpm i vue -S
2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中，导入 vue 模块 import Vue from 'vue'
4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
5. 使用 import login from './login.vue' 导入这个组件
6. 创建 vm 的实例 var vm = new Vue({ el: '#app', render: c => c(login) })
7. 在页面中创建一个 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:

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

• lang：

普通的 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: [
    // account  goodslist
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

// 把路由对象暴露出去
export default router