011 webpack中使用vue

一：在webpack中使用vue

1.安装vue的包

　　

 

 

2.index.html

    
    
    
    


    

        
{{msg}}
    

　　

3.main.js

// js的主要入口
console.log("ok")

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

var vue = new Vue({
    el:'#app',
    data:{
        msg:'123'
    }

})

　　

4.运行

　　将会报错

　　vue.runtime.esm.js:620 [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 )

 

5.原因

　　包的查找规则：
　　　　1. 找 项目根目录中有没有 node_modules 的文件夹
　　　　2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
　　　　3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
　　　　4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

 

6.第一种处理方式

　　引用具体的包路径

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

 

7.第二种方式

　　在webpack.config.js中加一个节点resolve

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },

    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],

    // 用于配置所有的第三方模块加载器
    module:{
        //匹配规则
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},  //正则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},  //依次往前处理
            {test:/\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=983&name=[hash:9]-[name].[ext]'},
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },// 处理 字体文件的 loader 
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        ]
    },
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.js'
        }
    }

}

　　

8.效果

　　

 

 

二：使用webpack指定的vue处理模板

1.说明

　　因为webpack推荐使用.vue这个模板文件定义的组件，所以，这里继续使用webpack指定的vue

 

2.在src下新建login.vue

　　

3.安装

　　cnpm i vue-loader vue-template-compiler -D

 

4.在webpack.config.js中增加规则

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },

    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new VueLoaderPlugin()
    ],

    // 用于配置所有的第三方模块加载器
    module:{
        //匹配规则
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},  //正则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},  //依次往前处理
            {test:/\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=983&name=[hash:9]-[name].[ext]'},
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },// 处理 字体文件的 loader 
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
            { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
        ]
    },
    resolve:{
        alias:{
            // 'vue$':'vue/dist/vue.js'
        }
    }


}

　　　　

5.main.js

// js的主要入口
console.log("ok")

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

import login from './login.vue'

// var login = {
//     template:'
這是一個组件
'
// }

var vue = new Vue({
    el:'#app',
    data:{
        msg:'123'
    },
    // components:{
    //     login
    // }
    render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
        return createElements(login)
        // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
    }
})

　　

6.效果

　　

 

 

三：export default与export

1.新建test.js

　　和main.js平级

export default {
  address: '北京'
}

　　

2.在main.js中引用

import m2 from './test.js'
console.log(m2)

　　

3.效果

　　

 

 

4.export default 的变量方式

　　在test.js中：

var info = {
  name: 'zs',
  age: 20
}

export default info

　　

5.效果

　　

 

 

6.小总结

　　// 注意： export default 向外暴露的成员，可以使用任意的变量来接收

　　// 注意： 在一个模块中，export default 只允许向外暴露1次

　　// 注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员

 

7.使用export

　　在test.js中

export var title = '小星星'
export var content = '哈哈哈'

　　

8.在main.js中使用

import m2,{ title as title123, content } from './test.js'
console.log(m2)
console.log(title123)
console.log(content)

　　

9.效果

　　

 

 

10.全部代码

// 这是 Node 中向外暴露成员的形式：
// module.exports = {}

// 在 ES6中，也通过 规范的形式，规定了 ES6 中如何 导入 和 导出 模块
//  ES6中导入模块，使用   import 模块名称 from '模块标识符'    import '表示路径'

// 在 ES6 中，使用 export default 和 export 向外暴露成员：
var info = {
  name: 'zs',
  age: 20
}

export default info

/* export default {
  address: '北京'
} */

// 注意： export default 向外暴露的成员，可以使用任意的变量来接收
// 注意： 在一个模块中，export default 只允许向外暴露1次
// 注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员



export var title = '小星星'
export var content = '哈哈哈'

// 注意： 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
// 注意： export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {}  中定义
// 注意： 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用  {}  按需接收；
// 注意： 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；




// 在Node中 使用 var 名称 = require('模块标识符')
// module.exports 和 exports 来暴露成员