webpack-vue【二】

一、在webpack中配置.vue组件页面的解析

1、运行cnpm i vue -S将vue安装为运行依赖；

解释：
- 1）在main.js文件中引入import Vue from 'vue'，但是这样引入的功能不全，只提供了runtime-only的方式，并没有提供像网页那样的使用方式
- 2）解决方案：①指定路径import Vue from 'vue'改为import Vue from '../node_modules/vue/dist/vue.js' 　② 在webpack.config.js中添加resolve属性：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

2、创建login.vue组件模板文件

<template>
  <div>
    <h1>这是登录组件</h1>
  </div>
</template>

<script>
</script>

<style>
</style>

3、运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包（.vue组件模板文件）安装为开发依赖；
4、在main.js文件中，导入vue模块import Vue form 'vue'
5、import login from './login.vue' 导入组件
6、创建vm实例，使用render渲染组件

var vm = new Vue({
  el: '#app',
  render:function(createElements) {  //在webpack中，向通过vue把一个组件放到页面中去展示，vm实例中的render函数可以实现
    return createElements(login);
  },
  //简写ES6
  rener : c => c(login)
  
});

7、在页面中创建一个id为app的元素，作为我们vm实例要控制的区域
8、在webpack.config.js中，添加如下module规则：


module: {
    rules: [
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  }

补充：回顾包的查找规则：import Vue from 'vue'

找项目目录中有没有node-modules的文件夹
在这个文件夹中根据包名，找对应的VUE文件夹
在vue文件夹中找package.json的包配置文件
在package.json文件中，查找一个main属性（main属性指定了包在被加载的时候的入口文件）

二、ES6语法使用总结

 <script>
    export default {
      data() {
        return {
          msg: 'OK'
        }
      }
    }
</script>

在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象

node中导入和导出模块
- 1）导入：var 名称 = require('模块标识符')
- 2）导出：module.export和exports来暴露模块
ES6中导入和导出模块
- 1）导入：impotr 模块 from 模块标识符 import 表示路径
- 2）导出：使用export default 和 export向外暴露成员
- export default向外暴露的成员，可以使用任何的变量来接收。但是只能暴露一个成员
- export向外暴露成员，只能使用{ }的形式来接收，且名字不能改变，叫做【按需导出】。可以暴露多个成员。如果有多个成员，我们不需要时，可以不在{ }中定义。如果非要改变名称的话可以import {title as title123 from 'test.js'}
- 可以同时使用export default 和export来暴露成员

var info = {
	name:'WSR',
	age:18
}
export default info;    //方式1
export var title = '小星星';  //方式2

三、在vue组件页面中，集成vue-router路由模块

[vue-router官网](https://router.vuejs.org/)

1、导入路由模块：

import VueRouter from 'vue-router'

2、安装路由模块：

Vue.use(VueRouter);

3、导入需要展示的组件:

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

4、创建路由对象

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

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

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

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

  <h1>这是 App 组件</h1>
  <router-link to="/login">登录</router-link>
  <router-link to="/register">注册</router-link>
  <router-view></router-view>

因为render会把el指定的容器中。所有的内容都清空覆盖，所以不要把路由的router-view和router-link直接写到el所控制的元素中。可以写在组件中。
login和register组件，是通过路由匹配监听到的，所以这两个组件，只能展示到属于路由的<router-view></router-view>中去

四、路由嵌套

var router = new VueRouter({
	routes:[
		{
			path:'./account',
			component:account,
			children:[
				{path:'login',component:login},
				{path:'register',component:register}
			]
		},
		{path:'/goodslist',component:goodslist}
	]
})

然后在account组件中创建两个链接

<router-link to="./login">登录</router-link>
<router-link to="./register">注册</router-link>

<router-view></router-view>

五、组件样式

在组件中的style标签中写样式

作用域：在style中的样式会作用到全部的组件上，添加scoped属性表示只作用于当前的组件。推荐都加上scoped属性
样式类型：普通的style标签只支持普通的样式，如果想要启用scss和less，需要为style元素设置lang属性

<style lang="scss" scoped>
</style>

六、Mint-UI的使用（饿了么的 MintUI 组件）

[Github 仓储地址](https://github.com/ElemeFE/mint-ui) [Mint-UI官方文档](http://mint-ui.github.io/#!/zh-cn)

6.1 完整导入

导入所有MintUI组件：

import MintUI from 'mint-ui'

导入样式表：

import 'mint-ui/lib/style.css'

在 vue 中使用 MintUI中的Button按钮和Toast弹框提示：

Vue.use(MintUI)

使用的例子：

<mt-button type="primary" size="large">primary</mt-button>

6.2 按需导入

http://mint-ui.github.io/docs/#/zh-cn2/quickstart - 安装 babel-plugin-component

npm install babel-plugin-component -D

按照官方操作即可

七、使用 MUI 代码片段

注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap；而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；

官网首页

文档地址

导入 MUI 的样式表：

import '../lib/mui/css/mui.min.css'

在webpack.config.js中添加新的loader规则：

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }

根据官方提供的文档和example，尝试使用相关的组件

从github网站下载项目，在 mui/examples/hello-mui/examples/ 目录下查找所需的组件