webpack中,vue组件页面的解析 --Y.

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

---

1.运行cnpm i vue -S将vue安装为运行依赖；
2.运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
3.运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；
4.在webpack.config.js中，添加如下module规则：

    module: {

        rules: [

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

          { test: /\.vue$/, use: 'vue-loader' }

        ]

      }

5.创建App.js组件页面：

        <template>

          <!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->

          <div>

            <h1>这是APP组件 - {{msg}}</h1>

            <h3>我是h3</h3>

          </div>

        </template>

     <script>

        // 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象

        export default {

          data() {

            return {

              msg: 'OK'

            }

          }

        }

        </script>

      <style scoped>

        h1 {

          color: red;

        }

        </style>

6.创建main.js入口文件：

     // 导入 Vue 组件

        import Vue from 'vue'

     // 导入 App组件

        import App from './components/App.vue'

      // 创建一个 Vue 实例，使用 render 函数，渲染指定的组件

        var vm = new Vue({

          el: '#app',

          render: c => c(App)

        });