Vue 08.webpack中使用.vue组件

LittlePanger

发布于 2020-04-14 15:47:09

1.1K0

发布于 2020-04-14 15:47:09

文章被收录于专栏：LittlePanger的代码之路LittlePanger的代码之路

webpack中使用.vue组件

运行npm i vue -S将vue安装为运行依赖；
运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
在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' } // 必须加
        ]
    }
}

创建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>

创建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项目中使用模板对象

在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中的css样式

scoped属性：保证样式的作用域只在当前.vue中生效
lang属性：普通的style标签只支持普通的样式，如果想要启用scss或less等，需要为标签设置lang属性

<style lang="scss" scoped>
div {
  color: red;
}
</style>

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

路由

vue-router官网

安装

npm i vue-router -S

导入并安装路由模块(main.js)

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

导入需要展示的组件(main.js)

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

创建路由对象(main.js)

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

将路由对象挂载到 Vue 实例上(main.js)

var vm = new Vue({
  el: '#app',
  render: c => c(app), // 将app组件渲染到index.html中的id='app'的容器
  router // 将路由对象，挂载到 Vue 实例上
});

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

<template>
    <div>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

路由嵌套并抽离路由

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

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

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

安装

npm install mint-ui -S

导入MintUI组件

// 引入全部组件
import Vue from 'vue';
import MintUI from 'mint-ui';

导入样式表

import 'mint-ui/lib/style.css'
// 注意配置webpack.config.js中样式加载器

在 vue 中使用 MintUI

Vue.use(MintUI)

使用

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

按需导入

安装 babel-plugin-component

npm install babel-plugin-component -D

配置webpack.config.js的加载器

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

将.babelrc修改为

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime", ["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

导入需要的组件

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 上下载现成的包并解压，然后拷贝到项目中使用

官网首页

文档地址