DDR爱好者之家

webpack+vue.js快速入门教程
站长资源 2024/11/28 佚名
70 1538
DDR爱好者之家 Design By 杰米

前言

vuejs——轻量、学习成本低、双向绑定、无dom的操作、组件的形式编写

vuejs是个轻量级的mvvm框架， 集合了angular的基本功能，却又比angular更为精简，功能上涵盖了双向绑定、指令、逻辑控制、过滤器、事件监听、函数等。框架的特点使得项目 在状态变更、分页的场景下可以拥有很大的便利——所有的操作只需要变更数组，没有任何的dom操作。

webpack——CommonJS的引用和编写方式、loader非常的丰富，包括vue-loader、css-loader、less-loader

webpack是前端组件化的解决方案，webpack提供了核心的CommonJS引用方案去引用资源，下面这篇文章就给大家介绍webpack和vue.js，一起来看看吧。

项目的创建

1.新建项目文件夹，并在其中建立package.json

$ mkdir [project name]
$ cd [project name]
$ npm init

2.在项目目录下新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue example</title>
</head>
<body>
 <div>{{message}}</div>
 <script src="/UploadFiles/2021-04-02/build.js">


src文件夹，并在该文件夹下建立main.js





import Vue from 'vue'
new Vue({
 el:'body',
 data:{
 message:'test success!'
 }
});





设置webpack


1.安装webpack，webpack-dev-server以及相关的loaders





# 全局安装webpack，webpack-dev-server
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 为项目安装其他依赖
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D





     webpack-merge：开发环境和生产环节的webpaak配置文件的配置合并


     css-loader：编译写入css


     style-loader：把编译后的css整合进html


     file-loader：编译写入文件，默认情况下生成文件的文件名是文件名与MD5哈希值的组合


     vue：vue主程序


     vue-loader：编译写入.vue文件


     vue-html-loader：编译vue的template部分


     vue-style-loader：编译vue的样式部分


     vue-hot-reload-api：webpack对vue实现热替换


     babel-core：ES2015编译核心


     babel-loader：编译写入ES2015文档


     babel-preset-es2015：ES2015语法


     babel-preset-stage-0：开启测试功能


     babel-runtime：babel执行环境


     url-loader


这里介绍下url-loader，这个loader实际上是对file-loader的封装




比如CSS文件中有时候会这么写：





.demo{
 background-image: url('a.png');
}

module:{
 loaders:[
 {test:/\.(png|jpg)$/,loader:'url-loader"htmlcode">



module:{
 loaders:[
 {test:/\.jade$/,loader:'jade'}
 //这里配置了让webpack识别jade的loader，其他类似，比如.vue
 //用于css文件的loader有两种写法
 {test:/\.css$/,loader:'style!css'}
 {test:/\.css$/,loaders:['style','css']}
 ]
}





2.配置webpack.config.js


在根目录下建立webpack.config.js，配置如下：





var path = require('path');
module.exports = {
 entry: './src/main.js',
 //定义webpack输出的文件，我们在这里设置了
 让打包后生成的文件放在dist文件夹下的build.js文件中
 output: {
 path: './dist',
 publicPath:'dist/',
 filename: 'build.js'
 },
 module: {
 loaders: [
 //转化ES6语法
 {
 test: /\.js$/,
 loader: 'babel',
 exclude: /node_modules/
 },
 //图片转化，小于8K自动转化为base64的编码
 {
 test: /\.(png|jpg|gif)$/,
 loader:'url-loader"color: #ff0000">特别说明




如果要在.babelrc下配置babel，则需要在根目录下新建该文件，windows环境下，不能新建该txt文件然后改后缀，需要通过dos命令建立：





echo>.babelrc





通过该命令就可以建立babelde配置文件，用编辑器打开，修改里面的内容为：





{
 "presets": ["es2015", "stage-0"],
 "plugins": ["transform-runtime"]
}





完成该配置我们在命令中运行





$ webpack





打开index.html就可以看到浏览器中看到我们刚刚写的文字


总结


至此我们实现了最基本的利用webpack打包vue，大家最好自己实际操作下代码才能更好的理解，希望这篇文章对大家能有所帮助，如果有疑问大家可以留言交流。


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米