华山资源网

webpack+vue.js快速入门教程
网络编程 2024/11/18 佚名
3 1

前言

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，大家最好自己实际操作下代码才能更好的理解，希望这篇文章对大家能有所帮助，如果有疑问大家可以留言交流。


                                

                                

                                     

                                
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com