从零开始用webpack构建一个vue3.0项目工程的实现


Posted in Javascript onSeptember 24, 2020

前言

入门级别教程,适用于初级工程师
移动端 单页面  Demo

正文

第一步

找一个你认为合适的磁盘。输入mkdir test, cd test , npm init -y

第二步

安装依赖

webpack 系列依赖

webpack webpack-cli

babel 系列依赖

@babel/core @babel/preset-env

移动兼容方案

amfe-flexible autoprefixer

axios

axios

webpack loader

babel-loader

css-loader

file-loader

postcss-loader

pm2rem-loader

style-loader

这个单独说一下,vue3.0 sfc重写了对.vue文件的编译方式,使用parseComponent等方法,必须使用-v16后缀的这个loader,当时找这个loader用了较长的时间

vue-loader-v16
vue-template-complier

webpack plugin

html-webpack-plugin
webpack-dev-server

Vue & Vuex

vue@next

vuex@next

请使用yarn add 或者 npm i 安装上述依赖包

第三步

在当前根目录创建index.html,初始化HTML代码

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>h5 static</title>
 </head>
 <body>
  <div id="app"></div>
 </body>
</html>

创建.babelrc,初始化babel配置

{
 "presets": ["@babel/preset-env"]
}

创建postcss.config.js初始化postcss配置

module.exports = {
 plugins: [require('autoprefixer')],
}

创建.gitignore

node_modules
.vscode
.idea

创建scripts目录,编写yarn锁定脚本

if (!/yarn\.js$/.test(process.env.npm_execpath || '')) {
 console.warn(
  '\u001b[33mThis repository requires Yarn 1.x for scripts to work properly.\u001b[39m\n'
 )
 process.exit(1)
}

将脚本配置在package.json配置中

{
 "name": "h5-static",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "start": "webpack-dev-server",
  "build": "webpack --mode=production",
  "preinstall": "node ./scripts/checkYarn.js"
 },
 "author": "upeartaker",
 "license": "ISC",
 "dependencies": {
  "@babel/core": "^7.11.6",
  "@babel/preset-env": "^7.11.5",
  "@vue/compiler-sfc": "^3.0.0",
  "amfe-flexible": "^2.2.1",
  "autoprefixer": "8.0.0",
  "axios": "^0.20.0",
  "babel-loader": "^8.1.0",
  "css-loader": "^4.3.0",
  "file-loader": "^6.1.0",
  "html-webpack-plugin": "^4.5.0",
  "postcss-loader": "^4.0.2",
  "px2rem-loader": "^0.1.9",
  "style-loader": "^1.2.1",
  "vue": "^3.0.0",
  "vue-loader": "^15.9.3",
  "vue-loader-v16": "^16.0.0-beta.5.4",
  "vue-template-compiler": "^2.6.12",
  "vuex": "^4.0.0-beta.4",
  "webpack": "^4.44.2",
  "webpack-cli": "^3.3.12",
  "webpack-dev-server": "^3.11.0"
 },
 "browserslist": [
  "defaults",
  "not ie < 11",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
 ]
}

其中preinstall 为yarn锁定脚本

  • 创建src目录,在src目录中分别创建services , pages , components , store目录,对应存放ajax , 视图 , 组件  , 全局状态管理。
  • 创建webpack.config.js文件,编写webpack配置
const path = require('path')
const VueLoaderPlugin = require('vue-loader-v16/dist/plugin.js').default
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
 entry: path.resolve(__dirname, './src/main.js'),
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
 },
 resolve: {
  extensions: ['.js'],
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    use: ['babel-loader'],
    exclude: /node_modules/,
   },
   {
    test: /\.css$/,
    use: [
     'style-loader',
     'css-loader',
     {
      loader: 'px2rem-loader',
      options: {
       remUnit: 37.5,
      },
     },
     {
      loader: 'postcss-loader',
      options: {
       sourceMap: true,
       postcssOptions: {
        path: 'postcss.config.js',
       },
      },
     },
    ],
   },
   {
    test: /\.(png|svg|jpg|gif)$/,
    use: ['file-loader'],
   },
   {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader'],
   },
   {
    test: /\.vue$/,
    loader : 'vue-loader-v16'
   }
  ],
 },
 optimization: {
  minimize: true,
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: path.resolve(__dirname, './index.html'),
   inject: 'body',
  }),
  new VueLoaderPlugin()
 ],
}

第四步

编写Demo,测试工程是否可以使用。

进入src目录下,创建main.js文件,编写以下代码,

import 'amfe-flexible'
import './index.css'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

创建App.vue文件,编写一下代码

<template>
 <Fragment>
  {{ message }}
  <button @click="handleClick">点我</button>
 </Fragment>
</template>
<script>
import { Fragment, ref } from 'vue'
export default {
 name: 'root',
 components: [Fragment],
 setup() {
  const message = ref('hello')
  const handleClick = () => {
   message.value = 'hit'
  }

  return {
   message,
   handleClick,
  }
 },
}
</script>

第五步

执行脚本yarn start

总结

  • webpack配置简单易学,声明式的接口规范,开发人员只需关注功能点即可完成配置。此工程webpack配置上没有任何难点,做过Vue-cli2.0项目的同学,可以直接略过。
  • 自己动手搭建项目时,建议大家先梳理项目结构,列出需要扩充的功能点,按照节点向上的方式,完善项目。如果以工程化的视角看这个项目,它只能属于leaf level。

 到此这篇关于从零开始用webpack构建一个vue3.0项目工程的实现的文章就介绍到这了,更多相关webpack构建vue3.0项目工程内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 #Javascript
vue-router 控制路由权限的实现
Sep 24 #Javascript
vue+elementUI实现简单日历功能
Sep 24 #Javascript
JavaScript获取时区实现过程解析
Sep 24 #Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 #Javascript
原生js实现购物车功能
Sep 23 #Javascript
详解微信小程序动画Animation执行过程
Sep 23 #Javascript
You might like
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
javascript匿名函数应用示例介绍
2014/03/07 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
Python实现简单拆分PDF文件的方法
2015/07/30 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python中return函数返回值实例用法
2020/11/19 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
实习推荐信
2014/05/10 职场文书
商铺门前三包责任书
2014/07/25 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python