唯恋殊雨

Web前端学习笔记——Webpack结合VueJS使用、Mint-UI、MUI

注意：

有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D

在普通页面中使用render函数渲染组件


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">
    <p>444444p>
  div>

  <script>

    var login = {
      template: '这是登录组件
'
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
        return createElements(login)
        // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
      }
    });
  script>
body>

html>

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

运行cnpm i vue -S将vue安装为运行依赖；
运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；
在webpack.config.js中，添加如下module规则：


module: {

    rules: [

      { test: /\.css$/, use: ['style-loader', 'css-loader'] },

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

    ]

  }

// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的
var path = require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
var htmlWebpackPlugin = require('html-webpack-plugin')

// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建
module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: { // 指定输出选项
    path: path.join(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 指定输出文件的名称
  },
  plugins: [ // 所有webpack  插件的配置节点
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
      filename: 'index.html' // 设置生成的内存页面的名称
    })
  ],
  module: { // 配置所有第三方loader 模块的
    rules: [ // 第三方模块的匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
      // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
      { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
    ]
  },
  resolve: {
    alias: { // 修改 Vue 被导入时候的包的路径
      // "vue$": "vue/dist/vue.js"
    }
  }
}

创建login.vue组件页面：

创建main.js入口文件：

// 如何在 webpack 构建的项目中，使用 Vue 进行开发

// 复习 在普通网页中如何使用vue： 
// 1. 使用 script 标签 ，引入 vue 的包
// 2. 在 index 页面中，创建 一个 id 为 app div 容器
// 3. 通过 new Vue 得到一个 vm 的实例


// 在webpack 中尝试使用 Vue：
// 注意： 在 webpack 中， 使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式；
import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'
// 回顾 包的查找规则：
// 1. 找 项目根目录中有没有 node_modules 的文件夹
// 2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
// 3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
// 4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

// var login = {
//   template: '这是login组件，是使用网页中形式创建出来的组件
'
// }


// 1. 导入 login 组件
import login from './login.vue'
// 默认，webpack 无法打包 .vue 文件，需要安装 相关的loader： 
//  cnpm i vue-loader vue-template-compiler -D
//  在配置文件中，新增loader哦配置项 { test:/\.vue$/, use: 'vue-loader' }

var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  // components: {
  //   login
  // }
  /* render: function (createElements) { // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
    return createElements(login)
  } */

  render: c => c(login)
})


// 总结梳理： 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 实例要控制的区域；

在使用webpack构建的Vue项目中使用模板对象？

在webpack.config.js中添加resolve属性：

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

ES6中语法使用总结

使用 export default 和 export 导出模块中的成员; 对应ES5中的 module.exports 和 export
使用 import ** from ** 和 import '路径' 还有 import {a, b} from '模块标识' 导入其他模块
使用箭头函数：(a, b)=> { return a-b; }

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

vue-router官网

导入路由模块：


import VueRouter from 'vue-router'

安装路由模块：


Vue.use(VueRouter);

导入需要展示的组件:


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

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

创建路由对象:


var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});

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


var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});

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


    登录

    注册

组件中的css作用域问题

抽离路由为单独的模块

main.js

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 上
})

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

router.js

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

App.vue

使用饿了么的 MintUI 组件

Github 仓储地址

Mint-UI官方文档

导入所有MintUI组件：


import MintUI from 'mint-ui'

导入样式表：


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

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


Vue.use(MintUI)

使用的例子：

primary

Mint-UI中按需导入的配置方式

main.js

import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)


// 导入bootstrap样式
import 'bootstrap/dist/css/bootstrap.css'
import './css/app.css'

// 导入 MUI 的样式表， 和 Bootstrap 用法没有差别
import './lib/mui/css/mui.min.css'


// 导入所有的 MIntUI 组件
// 导入 Mint-UI
// import MintUI from 'mint-ui' //把所有的组件都导入进来
// // 这里 可以省略 node_modules 这一层目录
// import 'mint-ui/lib/style.css'
// // 将 MintUI 安装到 Vue 中
// Vue.use(MintUI) // 把所有的组件，注册为全局的组件


// 按需导入 Mint-UI组件
import { Button } from 'mint-ui'
// 使用 Vue.component 注册 按钮组件
Vue.component(Button.name, Button)
// console.log(Button.name)


// 导入 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 上
})

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

App.vue

<template>
  <div>
    <h1>这是 App 组件</h1>

    <!-- 为什么这里叫做 mt-button 的 button 直接就能用 -->
    <mt-button type="danger" icon="more" @click="show">default</mt-button>

    <mt-button type="danger" size="large" plain>default</mt-button>

    <mt-button type="danger" size="small" disabled>default</mt-button>


    <button type="button" class="mui-btn mui-btn-royal">
      紫色
    </button>


    <!-- <mybtn type="primary">12345</mybtn> -->

  
    <router-link to="/account">Account</router-link>
    <router-link to="/goodslist">Goodslist</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
// 按需导入 Toast 组件
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      toastInstanse: null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 模拟获取列表的 一个 AJax 方法
      // 在获取数据之前，立即 弹出 Toast 提示用户，正在加载数据
      this.show();
      setTimeout(() => {
        //  当 3 秒过后，数据获取回来了，要把 Toast 移除
        this.toastInstanse.close();
      }, 3000);
    },
    show() {
      // Toast("提示信息");
      this.toastInstanse = Toast({
        message: "这是消息",
        duration: -1, // 如果是 -1 则弹出之后不消失
        position: "top",
        iconClass: "glyphicon glyphicon-heart", // 设置 图标的类
        className: "mytoast" // 自定义Toast的样式，需要自己提供一个类名
      });
    }
  }
};
</script>


<style>

</style>

使用 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，尝试使用相关的组件

Web前端学习笔记——Webpack结合VueJS使用、Mint-UI、MUI

注意：

在普通页面中使用render函数渲染组件

这是登录组件

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

这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}

这是login组件，是使用网页中形式创建出来的组件

在使用webpack构建的Vue项目中使用模板对象？

ES6中语法使用总结

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

组件中的css作用域问题

抽离路由为单独的模块

这是 App 组件

这是Account的登录子组件

使用饿了么的 MintUI 组件

Mint-UI中按需导入的配置方式

使用 MUI 代码片段

你可能感兴趣的:(Web前端,WEB前端开发)

Web前端学习笔记——Webpack结合VueJS使用、Mint-UI、MUI

注意：

在普通页面中使用render函数渲染组件

这是登录组件

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

这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}

这是login组件，是使用网页中形式创建出来的组件

在使用webpack构建的Vue项目中使用模板对象？

ES6中语法使用总结

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

组件中的css作用域问题

抽离路由为单独的模块

这是 App 组件

这是Account的登录子组件

使用 饿了么的 MintUI 组件

Mint-UI中按需导入的配置方式

使用 MUI 代码片段

你可能感兴趣的:(Web前端,WEB前端开发)

使用饿了么的 MintUI 组件