使用webpack一步一步构建Vue项目

在普通网页中使用Vue：

1、使用script标签引入Vue的包

2、在index页面中创建一个id为app的div容器

3、通过new vue得到一个vm的实例

在使用webpack构建Vue项目前，要先对webpack基本用法及简单的配置了解。

webpack基本用法

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

1、cnpm i vue -S    将Vue安装为运行依赖

2、在main.js文件中导入Vue包  import Vue from 'vue'

3、由于在webpack中，推荐使用.vue这个组件模板文件定义组件，默认webpack无法打包.vue文件，所以需要安装能解析这种文件的loader ：cnpm i vue-loader vue-template-compiler -D

注意：vue-loader，15.*版本之后的版本的使用都需要添加plugin的配置

4、cnpm i style-loader css-loader -D 将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式

5、在webpack.config.js中配置规则

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

6、定义一个.vue结尾的组件，其中组件有三部分组成： template script style

login.vue

<template>
<div>
    <h1>登陆组件</h1>
</div>
</template>


<script>
export default {};
</script>


<style>
</style>

7、使用import login from './login.vue' 在main.js中导入这个组件

8、创建vm的实例 var vm = new Vue({ el: '#app', data:{ })

9、在页面中创建一个id为app的div元素，作为我们的vm实例要控制的区域

10、在vue中结合render函数渲染指定的组件到容器中

在利用webpack的Vue项目中，在main.js中使用import Vue from 'vue' 导入的Vue的包，功能不完善，只是提供了runtime-only的方式；所以，不能使用components组件的方式，向页面中渲染组件

在webpack中，如果想要通过Vue，把一个组件放到页面中去展示，vm实例中的render函数可以实现

// main.js 是项目的JS入口文件
import Vue from 'vue';
import login from './login.vue';
var vm = new Vue({
    el: '#app',
    data: {
        msg: '1234'
    },
    render: c => c(login)
})