webpack中如何使用vue

1、安装 vue包：npm i vue -S

2、由于在webpack中，推荐使用.vue这个组件模版文件来定义组件，不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的loader：npm 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实例要控制的区域

源码-main.js：

import $ from 'jquery'
import './css/index.css'
import './css/index.less'
import './css/index.scss'
import 'bootstrap/dist/css/bootstrap.css'
//import Vue from '../node_modules/vue/dist/vue.js'
import Vue from 'vue'
import login from './login.vue'

$(function () {
    $('li:odd').css('backgroundColor', 'cyan'),
        $('li:even').css('backgroundColor', function () {
            return '#' + 'F8F8F8'
        })
})

//class关键字是es6中提供的新语法，用来实现es6中面向对象编程的方式
class Person {
    //使用static关键字，可以定义静态属性，所谓的静态属性就是可以直接通过 类名直接访问的属性
    //与静态属性对立的是实例属性：只能通过类的实例来访问的属性
    //该语法属于高级语法，es6或以上，webpack自身是处理不了的，它需要借助第三方的loader来处理：Babel，它可以将高级语法转为低级语法，在webpack中可以运行两套命令：
    //第一套：npm i babel-core babel-loader babel-plugin-transform-runtime -D
    //第二套：npm i babel-preset-env babel-preset-stage-0 -D
    static info = { name: 'zs', age: 20 }
}

//访问Person 类身上的 info静态属性
console.log(Person.info)

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Cristin'
    },
    // components:{
    //     login
    // }

    //在webpack中，如果想要通过vue把一个组件放到页面中展示，vm实例中的render函数可以实现，传统的components是不可以的
    // render:function(createElements){
    //     return createElements(login)
    // }

    //原始的render:function(createElements)简写
    render: c => c(login)
})
import m222, { title as xiaoxingxing, content } from "./test";
console.log(m222)
console.log(xiaoxingxing + "----" + content)

//1、导入vue-router包
import VueRouter from 'vue-router'

//导入app组件
import app from './App.vue'
//导入Account 组件
import account from './main/Account.vue'
//导入 GoodsList 组件
import goodslist from './main/GoodsList.vue'

//2、手动安装VueRouter
Vue.use(VueRouter)



//3、创建路由对象
var router = new VueRouter(
    {
        routes: [
            // account goodslist
            { path: '/account', component: account },
            { path: '/goodslist', component: goodslist }
        ]
    }
)

var rv = new Vue(
    {
        el: '#router',
        render: c => c(app),
        //4、路由对象挂在到rv上
        router
    }
)

源码：webpack.config.js

const path = require('path')
const htmlWebpackplugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//这个配置文件，其实就是一个js文件，通过Node中的模块操作向外暴露一个配置对象，然后命令行通过webpack命令直接被执行
module.exports = {
    //配置文件中，需要手动指定入口和出口
    //入口
    entry: {
        //表示要使用的webpack打包哪个文件
        path: path.join(__dirname, './src/main.js'),
    },
    //出口
    output: {
        //指定打包好的文件输出到哪个目录里
        path: path.join(__dirname, './dist'),

        //指定输出文件的名称
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        //new一个热更新的模块对象（步骤：1、devServer增加配置 2、引用webpack对象（const webpack = require('webpack') 3、插件数组中 new一个热启动对象 ））
        new webpack.HotModuleReplacementPlugin(),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new htmlWebpackplugin({
            title: 'Output Management',
            //根据模版页面来在缓存中生成想要的页面文件，指定模版文件路径
            template: path.join(__dirname, './src/index.html'),
            //生成的页面名称
            filename: 'index.html'
        })
    ],
    devServer: {
        //contentBase: './dist',
        // 设置服务器访问的基本目录
        //contentBase: path.resolve(__dirname, 'dist'), //最好设置成绝对路径
        // 设置服务器的ip地址,可以是localhost
        host: 'localhost',
        // 设置端口
        port: 8090,
        // 设置自动拉起浏览器
        open: true,
        // 设置热更新
        hot: true
    },
    devtool: 'inline-source-map',

    //用于配置所有的第三方模块加载器规则的，它【module】是一个对象
    module: {
        rules: [
            //配置处理.css文件的第三方loader规则
            { test: /.css$/, use: ['style-loader', 'css-loader'] },
            //配置处理.less文件的第三方loader规则，需要安装less-loaderless
            { test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //配置处理.scss文件的第三方loader规则，需要安装node-sasssass-loader
            { test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            //配置处理图片文件的第三方loader规则，需要安装url-loader 
            { test: /.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=99639&name=[hash:8]-[name].[ext]' },
            //处理字体文件的loader配置信息
            { test: /.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            //处理class文件的loader配置信息,需要安装 babel-coreabel-loaderabel-plugin-transform-runtime
            { test: /.js$/, use: 'babel-loader', exclude: /node_modules/ },
            //处理vue文件的loader配置信息
            { test: /.vue$/, use: 'vue-loader' },
        ]
    },
    resolve: {
        //修改Vue被导入时候的包的路径
        alias: {
            //"vue$": "vue/dist/vue.js"
        }
    }
}

源码：login.vue

<template>
   <div>
    <h1>自动化平台前端---{{msg}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Robin"
    };
  },
  methods: {
    show() {
      console.log("调用了 login.vue 中的 show 方法");
    }
  }
};
</script>

<style>
</style>

源码：前端

<!DOCTYPE html>
<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>Document</title>
</head>

<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
        <li>这是第10个li</li>
    </ul>
    <div class="box"></div>
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
    <div id="app">
        <p>{{msg}}</p>

        <login></login>
    </div>

    <div id="router">

    </div>
</body>

</html>