webpack中如何使用vue

最新推荐文章于 2024-01-16 17:54:15 发布

RongU

最新推荐文章于 2024-01-16 17:54:15 发布

阅读量261

点赞数

分类专栏： vue 前端开发 webpack javascript es6 文章标签： webpack vue

本文链接：https://blog.csdn.net/weixin_39658215/article/details/96430275

版权

vue 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端开发

15 篇文章 0 订阅

订阅专栏

javascript

15 篇文章 0 订阅

订阅专栏

1.安装vue的包

npm install vue -S

2.由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以，需要安装能解析这种文件的loader

npm install vue-loader vue-template-complier -D

3.在webpack.config.js文件中，新增loader配置项

//webpack.config.js

//由于webpack是基于node构建的，所以，在webpack的配置文件中，任何合法的node代码都是支持的
var path= require('path');

//在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
//如果要配置插件，需要在导出的对象中，挂载一个plugins节点
var htmlWebpackPlugin = require('html-webpack-plugin');

//当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现，我们并没有提供要打包的文件的入口和出口文件，此时他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建
module.export = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {//指定输出选项
        path: path.join(__dirname, './dist'),//输出路径
        filename: 'bundle.js' //指定输出文件的名称
    },
    plugins: [//所有webpack插件的配置节点
        new htmlWebpackPlugins({
            template: path.join(__dirname, './src/index.html'),//指定模板文件路径
            filename: 'index.html'//设置生成的内存页面的名称
        })
    ],
    module: {//配置所有第三方loader模块
        rules:: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的loader (npm install style-loader css-loader -D)
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },//处理less文件的loader (npm install less-loader less -D)
            { test: /\.scss$/, use: ['style-loader', 'css-loader'], 'sass-loader' },//处理scss文件的loader (npm install sass-loader node-sass -D)
            { test: /\.(jpg|png|gif|bmp|jpeg})$/, use: ['url-loader?limit=7631&name=[hash:8]-[name].[ext]'] },//处理图片路径的loader (npm install url-loader file-loader -D)
            //limit给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式的字符串，如果图片小于给定的limit值，则会被转为base64的字符串
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: ['url-loader'] },//处理字体文件的loader
            { test: /\.js$/, use: ['babel-loader', exclude: /node_modules/] },//配置babel来转换高级的es6语法
            { test: /\.vue$/, use: ['vue-loader'] },//处理.vue文件的loader
        ]
    },
    resolve: {
        alias: {//修改Vue被导入时候的包的路径
            
        }
    }
}

4.在main.js中，导入vue模块

import Vue from 'vue'

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

6.在main.js中，导入这个组件

//login的template写在index.html或者Login.vue中任选一种方式
//若选择写在index.html里面，这里就不用引入Login.vue了
//第7步index.html的script标签里面也有说明
import login from './Login.vue'

7.创建vm的实例

<!-- index.html -->

<body>
    <div id="app">
        <login></login>
    </div>
    <script>

        //第一种方式直接写在html页面，第二种方式是写在Login.vue里面
        var login = {
            template: '<h1>这是登录组件</h1>'
        }        

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

        //var vm = new Vue({
        //    el: '#app',
        //      data: {
        //         msg: '123'
        //      },
        //    render: c => c(login)
        //})
    </script>
</body>

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

9.附加package.json文件：

// 部分代码

{
    "name":
    "version":
    "description":
    "main":
    "scripts:{
        "test":
        "dev": "webpack-dev-server --open --port 3000 --hot"
    },
    "keywords":
    "author":
    "license":
    "devDependencies":{
        "webpack":
        "webpack-dev-server":
    }
}

10.附加main.js文件：

//项目的js入口文件

import './css/index.css'
import './css/index.scss'
//如果要通过路径的形式去引入node_modules中相关的文件，可以直接忽略路径前面node_modules这一层目录，直接写包的名称，然后后面跟上具体的文件路径
//不写node_mudules这一层目录，默认就会去node_modules中查找
import 'bootstrap/dist/css/bootstrap.css'

//class关键字，是css中提供的新语法，是用来实现es6中面向对象编程的方式
class Person{
    //使用static关键字可以定义静态属性
    //所谓的静态属性，就是可以直接通过类名，直接访问的属性
    //实例属性：只能通过类的实例来访问的属性
    static info = { name: 'asd', age: 20 }
}

//访问Person类身上的info静态属性
console.log(Person.info)
//在webpack中，默认只能处理一部分es6的新语法，一些更高级的es6语法或者es7语法，webpack是处理不了的，这时候就需要借助于第三方的loader，来帮助webpack处理这些高级的语法，当第三方loader把高级语法转为低级语法之后，会把结果交给webpack去打包到bundle.js中

//通过babel，可以帮我们将高级的语法转换为低级的语法
//1.在webpack中，可以运行如下两套命令安装两套包，去安装babel相关的loader功能
//1.1第一套包：npm install babel-core babel-loader babel-plugin-transform-runtime -D
//1.2第二套包：npm install babel-preset-env babel-preset-stage-0 -D
//2.打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则
//2.1 { test: /\.js$/, use: 'babel-loader', exclude:/node_modules/ }
//2.2注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项删除掉，原因有俩：
//2.2.1如果不排除node_modules，则babel会把mode_modules中所有的第三方js文件都打包编译，这样会非常消耗CPU，同时打包速度非常慢
//2.2.2哪怕，最终babel把所有node_modules中的js转换完毕了，项目也无法正常运行
//3.在项目的根目录中，新建一个叫做.babelrc的babel配置文件，这个配置文件属于json格式，所以在写.babelrc配置的时候，必须符合json的语法规范：不能写注释，字符串必须用双引号
//3.1在.babelrc写如下的配置：
//{
//    "preset": ["env", "stage-0"],
//    "plugins": ["transform-runtime"]
//}
//4.目前，我们安装的bebel-preset-env，是比较新的es语法，之前我们安装的是babel-preset-es2015，现在出了一个更新的语法插件，叫做babel-preset-env，它包含了所有的和es****相关的语法



//和java c# 实现面向对象的方式完全一样了，class是从后端语言中借鉴过来的，来实现面向对象
//var p1 = new Person()

//es5写法
function Animal(name){
    this.name = name;
}
Animal.info = 123;

var a1 = new Animal('Rong');

//静态属性
//console.log(Animal.info)
//实例属性
//console.log(a1.name)

11.附加.babelrc文件

{
    "preset": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
}

*在此没有详细说明需要安装的依赖包都有哪些，按照控制台的提示，一个个安装就行了，缺哪个安哪个

*图片、字体文件、css文件没有贴出来

****可与我的另一篇文章《webpack中导入vue和普通网页使用script导入vue的区别》关联查看****

RongU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录