从零开始用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 相关文章推荐
javascript 年月日联动实现核心代码
Dec 21 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
一个可复用的vue分页组件
May 15 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 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初学者头疼十四条问题大总结
2008/11/12 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python正则表达式完全指南
2017/05/25 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
详解django中Template语言
2020/02/22 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
Python eval函数介绍及用法
2020/11/09 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
扬州个园导游词
2015/02/06 职场文书
自荐信格式范文
2015/03/04 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
实验室安全管理制度
2015/08/05 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python