美文网首页工作生活
2019-07-04Vue之webpack中使用vue

2019-07-04Vue之webpack中使用vue

作者: 果冻_4c9b | 来源:发表于2019-07-05 16:20 被阅读0次

    回顾

    我们是如何在网页中使用vue的呢
    1.使用script引入vue包
    2.在index中创建一个id为app的div容器
    3.new一个Vue实例

    在webpack中尝试使用Vue

    image.png

    在main.js中引入vue模块

    // 注意:这里导入的Vue功能不完整,并没有提供像网页中使用那样的全部功能
    import Vue from 'vue'
    
    var vm = new Vue({
        el : '#app',
        data : {
            msg : 'testMsg'
        }
    })
    

    我们cnpm run dev运行项目,页面会报错,因为这里导入的Vue不是完整文件
    解决方式:
    webpack.config.js中进行配置(推荐)

    resolve: { 
            alias: {
              'vue$': 'vue/dist/vue.js' // 指定真正的vue文件
            }
        }
    

    或者在main.js中

    import Vue from '../node_modules/vue/dist/vue.js'
    

    再或者在node-modules中vue中修改package.json中的main属性为dist/vue.js

    运行cnpm run dev进行测试

    单文件组件的应用

    比如我们想在index.html中渲染一个简单的组件

    新建vue文件,这个文件本身就代表一个组件,它包含template,script,style三个部分

    image.png
    login.vue
    <template>
        <div>
            <h1>这是login单文件组件</h1>
        </div>
    </template>
    
    <script>
        
    </script>
    
    <style>
        
    </style>
    

    在main.js中导入这个组件

    import Vue from 'vue'
    // 导入login组件
    import login from './login.vue'
    
    var vm = new Vue({
        el : '#app',
        data : {
            msg : 'testMsg'
        },
        // 注意:这里不要使用components注册组件,选择使用render函数
       // 注意 :这里不能使用以前那种components的注册方式,要使用render函数进行渲染
        render : c => c(login)
    })
    

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

    // 导入VueLoaderPlugin
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    // module添加文件的匹配规则
    { test: /\.vue$/, use: 'vue-loader' },
    // plugins添加plugins节点配置插件
    new VueLoaderPlugin(),
    

    具体如下

    // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');
    // 导入VueLoaderPlugin
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    
    // 导出一个配置对象,将来webpack在启动的时候,会默认来查找webpack.config.js,并读取这个文件中导出的配置对象,来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            }),
            new VueLoaderPlugin(),
        ],
        module: { // 用来配置第三方loader模块的
            rules: [ // 文件的匹配规则
                { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
                { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
                { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
                { test: /\.(png|jpg|gif)$/, use: 'url-loader' },
                { test: /\.vue$/, use: 'vue-loader' },
                { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
            ]
        },
        resolve: { 
            alias: {
              'vue$': 'vue/dist/vue.js' // 指定真正的vue文件
            }
        }
    }
    

    运行cnpm run dev运行看到效果

    小结在webpack中如何使用 vue :

    1.安装 vue 包 : cnpm i vue -S
    2.由于在webpack中推荐使用.vue组件模板文件定义组件,所以,需要安装能解析这种文件的loader : cnpm i vue-loader vue-template-compiler -D
    3.在main.js中,导入vue模块 :import Vue from 'vue'
    4.在webpack.config.js中导入vueloader的配置信息
    5.定义一个.vue结尾的组件,三部分构成template,style,script
    6.在main.js中,导入组件模块 :import login from './login.vue'
    7.创建vm实例,渲染组件

    var vm = new Vue({
        el : '#app',
        data : {
            msg : 'testMsg'
        },
        // 注意:这里不要使用components注册组件,选择使用render函数
        render : c => c(login)
    })
    

    8.在index.html中创建一个id为app的div元素,作为vm实例的挂在元素

    vue组件文件中如何定义自己的数据

    login.vue

    <template>
        <div>
            <h1>这是login单文件组件 -- {{msg}}</h1>
        </div>
    </template>
    
    <script>
        export default { // 组件中的data必须是一个function
            data() {
                return {
                    msg : '123'
                }
            },
            methods : {
                show(){
                    console.log("调用了 login.vue 的show方法");
                }
            }
        }
    </script>
    
    <style>
        
    </style>
    

    运行cnpm run dev查看结果
    在es6中使用export default 和 export 向外暴露成员
    export default向外只能暴露一个成员,导入时使用import 自定义名称 from 文件名导入
    export 可以暴露多个,导入时使用import {对应名}[as 别名] from 文件名导入

    .

    相关文章

      网友评论

        本文标题:2019-07-04Vue之webpack中使用vue

        本文链接:https://www.haomeiwen.com/subject/czcdhctx.html