zoukankan      html  css  js  c++  java
  • Vue 08.webpack中使用.vue组件

    webpack中使用.vue组件

    1. 运行npm i vue -S将vue安装为运行依赖;

    2. 运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖;

    3. webpack.config.js中,添加如下module规则:

    const path = require('path');
    const htmlWebpackPlugin = require('html-webpack-plugin');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');  // 必须加
    
    
    module.exports = {
        entry: path.resolve(__dirname, 'src/vuemain.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/vueindex.html'),
                filename:'index.html'
            }),
            new VueLoaderPlugin() // 必须加
        ],
        module: {
            rules: [
                { test: /.scss$/, use: ['style-loader', 'css-loader'] },
                { test: /.vue$/, use: 'vue-loader' } // 必须加
            ]
        }
    }
    
    1. 创建login.vue组件页面
    <template>
      <div>
        <h1>这是登录组件,使用 .vue 文件定义出来的 --- {{msg}}</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        // 注意:组件中的 data 必须是 function
        return {
          msg: "456"
        };
      },
      methods: {
        show() {
          console.log("调用了 login.vue 中的 show 方法");
        }
      }
    };
    </script>
    
    <style>
    
    </style>
    
    1. 创建main.js入口文件:
    import Vue from 'vue'
    import login from './login.vue'
    
    // 在 webpack 中如果想要通过vue,把一个组件放到页面中去展示,使用vm实例中的render函数
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'123'
        },
        render : c => c(login) //简写
        //render: function (createElements) { 
        //return createElements(login)
        //}
    })
    

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

    1. webpack.config.js中添加resolve属性:
    resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js'
        }
      }
    

    ES6中语法使用总结

    1. 使用 export defaultexport 导出模块中的成员; 对应ES5中的 module.exportsexport

    2. 使用 import ** from **import '路径' 还有 import {a, b} from '模块标识' 导入其他模块

    3. 使用箭头函数:(a, b)=> { return a-b; }

    .vue中的css样式

    • scoped属性:保证样式的作用域只在当前.vue中生效
    • lang属性:普通的style标签只支持普通的样式,如果想要启用scss或less等,需要为标签设置lang属性
    <style lang="scss" scoped>
    div {
      color: red;
    }
    </style>
    

    在.vue组件中集成路由模块

    路由

    vue-router官网

    1. 安装
    npm i vue-router -S
    
    1. 导入并安装路由模块(main.js)
    import Vue from 'vue'
    // 导入 vue-router 包
    import VueRouter from 'vue-router'
    // 手动安装 VueRouter 
    Vue.use(VueRouter)
    
    1. 导入需要展示的组件(main.js)
    import app from './app.vue'
    import login from './components/account/login.vue'
    import register from './components/account/register.vue'
    
    1. 创建路由对象(main.js)
    var router = new VueRouter({
      routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });
    
    1. 将路由对象挂载到 Vue 实例上(main.js)
    var vm = new Vue({
      el: '#app',
      render: c => c(app), // 将app组件渲染到index.html中的id='app'的容器
      router // 将路由对象,挂载到 Vue 实例上
    });
    
    1. 改造App.vue组件,在 template 中,添加router-linkrouter-view
    <template>
        <div>
            <router-link to="/login">登录</router-link>
            <router-link to="/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>
    

    路由嵌套并抽离路由

    1. 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: [
        {
          path: '/account',
          component: account,
          children: [    // 路由嵌套
            { path: 'login', component: login },
            { path: 'register', component: register }
          ]
        },
        { path: '/goodslist', component: goodslist }
      ]
    })
    
    // 把路由对象暴露出去
    export default router
    
    1. 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), 
      router // 将路由对象挂载到 vm 上
    })
    
    1. app.vue
    <template>
      <div>
        <h1>这是 App 组件</h1>
    
        <router-link to="/account">Account</router-link>
        <router-link to="/goodslist">Goodslist</router-link>
    
        <router-view></router-view>
      </div>
    </template>
    

    MintUI 组件

    Github mint-ui

    Mint-UI官方文档

    Quickstart

    1. 安装
    npm install mint-ui -S
    
    1. 导入MintUI组件
    // 引入全部组件
    import Vue from 'vue';
    import MintUI from 'mint-ui';
    
    1. 导入样式表
    import 'mint-ui/lib/style.css'
    // 注意配置webpack.config.js中样式加载器
    
    1. 在 vue 中使用 MintUI
    Vue.use(MintUI)
    
    1. 使用
    <mt-button type="primary" size="large">primary</mt-button>
    

    按需导入

    1. 安装 babel-plugin-component
    npm install babel-plugin-component -D
    
    1. 配置webpack.config.js的加载器
    module: {
            rules: [
                { test: /.js$/, use: 'babel-loader', exclude: /node_modules/ },
                { test: /.vue$/, use: 'vue-loader' }
            ]
        }
    
    1. 将.babelrc修改为
    {
      "presets": ["env", "stage-0"],
      "plugins": ["transform-runtime", ["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]]]
    }
    
    1. 导入需要的组件
    import { Button, Cell } from 'mint-ui'
    
    Vue.component(Button.name, Button); // 名字可以自定义
    Vue.component(Cell.name, Cell)
    

    MUI 组件

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

    注意:不能使用npm下载,需要从 github 上下载现成的包并解压,然后拷贝到项目中使用

    官网首页

    文档地址

    1. 导入 MUI 的样式表:
    import '../lib/mui/css/mui.min.css'
    
    1. 根据官方提供的文档和example,尝试使用相关的组件

    在.vue组件中使用vue-resource

    1. 运行npm i vue-resource -S安装模块

    2. 导入 vue-resource 组件

    import VueResource from 'vue-resource'
    
    1. 在vue中使用 vue-resource 组件
    Vue.use(VueResource);
    
  • 相关阅读:
    797. 所有可能的路径
    1286. 字母组合迭代器
    216. 组合总和 III
    77. 组合
    784. 字母大小写全排列
    90. 子集 II
    78. 子集
    47. 全排列 II
    46. 全排列
    40. 组合总和 II
  • 原文地址:https://www.cnblogs.com/LittlePanger/p/12626301.html
Copyright © 2011-2022 走看看