【Vue】Re11 Vue 与 Webpack

一、案例环境前置准备：

创建一个空目录用于案例演示

mkdir vue-sample

初始化案例和安装webpack

cd vue-sample

npm install webpack@3.6.0 --save-dev

安装Vue

npm install vue --save

保留之前的webpack.config.js

const path = require('path'); /* 这里依赖一个path，这个path来自于npm的包中的一个模块，必须要有path包才能用 */

/* 所以需要装包 npm init */

module.exports = {

    entry : './src/main.js', /* 打包的程序入口 */

    output : { /* 打包输出的文件，出口路径 分为路径和文件名 */

        // path :  './dist', /* 路径可以动态获取 */

        path : path.resolve(__dirname, 'dist'),

        /* __dirname是一个全局变量 值是当前webpackconfig.js文件所在的绝对路径， cans参数二就是我们自定义的目录名称 */

        filename : 'bundle.js', /* bundle 意思打包 就是打包好的JS文件 */

    },

}

和package.json的打包脚本

"build": "webpack"

还是一样的目录结构

二、引用Vue

在Main.js中导入Vue：

import Vue from 'vue';  /* 模块化使用需要导入 */

const app = new Vue({

    el : '#v',

    data : {

        message : 'Hello Module Vue!!!'

    },

});

index.html编写：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="v">

    <p>{{message}}</p>

</div>

<script type="text/javascript" src="./dist/bundle.js"></script>

</body>

</html>

虽然打包成功，但是并没有看到页面出现效果

浏览器控制台发生Vue的警告：

bundle.js:925 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

是因为runtime-only 与runtime-compiler的区别？

解决方法是在webpack.config.js配置中设置这个别名解析：

    resolve : {

        alias : {

            'vue$' : 'vue/dist/vue.esm.js'

        }

    }

解析正常：

三、Template & El 属性

补充概念：SPWA概念【Simple Page Web Application】

正常的开发不会在页面编写任何代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="v">

    <p>{{message}}</p> <!-- 这里不会编写任何东西 -->

</div>

<script type="text/javascript" src="./dist/bundle.js"></script>

</body>

</html>

编写的方式变更为这样【main.js】：

import Vue from 'vue';  /* 模块化使用需要导入 */

const app = new Vue({

    el : '#v',

    template : `

      <p>{{message}}</p>

    `,

    data : {

        message : 'Hello Module Vue!!!'

    },

});

template的模板将会把绑定的内容直接替换覆盖掉

四、Component演变渐进

上述的template定义方式只能插入一些简单的内容

如果模板的结构庞大复杂，则需要专门定义声明

main.js的改变：

import Vue from 'vue';  /* 模块化使用需要导入 */

/* 1、移交到这个组件对象中声明管理 */

const App  = {

    template : `

      <p>{{message}}</p>

    `,

    data () {

        return {

            message : 'Hello Module Vue!!!'

        }

    },

}

new Vue({ /* const app 常量赋值可以不写 */

    el : '#v',

    components : {

        App /* 2、 以组件的方式注册 */

    },

    template : '<App/>', /* 3、 以模板的方式把组件渲染 */

    // template : `

    //   <p>{{message}}</p>

    // `,

    // data : {

    //     message : 'Hello Module Vue!!!'

    // },

});

也就是说组件对象它也是一个JS对象

那么组件不久可以移交到JS文件中吗

我们直接创建一个JS文件【app.js】：

export default {

    template : `

      <p>{{message}}</p>

    `,

    data () {

        return {

            message : 'Hello Module Vue!!!'

        }

    },

}

在Main中引入：

import Vue from 'vue';  /* 模块化使用需要导入 */

import App from './js/app';

/* 1、移交到这个组件对象中声明管理 */

// const App  = {

//     template : `

//       <p>{{message}}</p>

//     `,

//     data () {

//         return {

//             message : 'Hello Module Vue!!!'

//         }

//     },

// }

new Vue({ /* const app 常量赋值可以不写 */

    el : '#v',

    components : {

        App /* 2、 以组件的方式注册 */

    },

    template : '<App/>', /* 3、 以模板的方式把组件渲染 */

    // template : `

    //   <p>{{message}}</p>

    // `,

    // data : {

    //     message : 'Hello Module Vue!!!'

    // },

});

我们对APP组件的修改只需要在app.js文件中就行了

但是目前的问题是模板的HTML代码还没有和JS代码进行分离

所以Vue创建了一个新的文件【组件文件】XXX.vue

<template>

</template>

<script>

export default {

  name: "app"

}

</script>

<style scoped>

</style>

template就表示我们的模板

script表示编写的JS代码

而style专门处理样式编写

五、Loader支持

.vue文件并不能被识别解析，所以需要对应的提供一套Loader帮助webpack

npm install vue-loader@13.0.0 vue-template-compiler --save-dev

然后配置：

const path = require('path'); /* 这里依赖一个path，这个path来自于npm的包中的一个模块，必须要有path包才能用 */

/* 所以需要装包 npm init */

module.exports = {

    entry : './src/main.js', /* 打包的程序入口 */

    output : { /* 打包输出的文件，出口路径 分为路径和文件名 */

        // path :  './dist', /* 路径可以动态获取 */

        path : path.resolve(__dirname, 'dist'),

        /* __dirname是一个全局变量 值是当前webpackconfig.js文件所在的绝对路径， cans参数二就是我们自定义的目录名称 */

        filename : 'bundle.js', /* bundle 意思打包 就是打包好的JS文件 */

    },

    module: {

        rules: [

            {

                test: /\.css$/,

                use: [ 'style-loader','css-loader' ] /*'style-loader',*/

            },

            {

                test: /\.vue$/,

                use: [ 'vue-loader' ]

            },

        ]

    },

    resolve : {

        alias : {

            'vue$' : 'vue/dist/vue.esm.js'

        }

    }

}

注意main.js的导入

import Vue from 'vue';  /* 模块化使用需要导入 */

import App from './component/app.vue';

/* 1、移交到这个组件对象中声明管理 */

// const App  = {

//     template : `

//       <p>{{message}}</p>

//     `,

//     data () {

//         return {

//             message : 'Hello Module Vue!!!'

//         }

//     },

// }

new Vue({ /* const app 常量赋值可以不写 */

    el : '#v',

    components : {

        App /* 2、 以组件的方式注册 */

    },

    template : '<App/>', /* 3、 以模板的方式把组件渲染 */

    // template : `

    //   <p>{{message}}</p>

    // `,

    // data : {

    //     message : 'Hello Module Vue!!!'

    // },

});