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-loader\less
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //配置处理.scss文件的第三方loader规则，需要安装node-sass\sass-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-core\babel-loader\babel-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>