前端工程化（Vue3.0项目，Vue2.0项目）_前端工程化:基于vue.js 3.0的设计与实践 pdf

前端工程化

实际的前端开发：

• 模块化|（js的模块化、Css的模块化、资源的模块化）
• 组件化（复用现有的UI结构、样式、行为）
• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
• 自动化（自动化构建、自动部署、自动化测试）

webpack

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

3.在项目中安装 webpack

在终端运行如下的命令，安装webpack相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.7.2-save-dev

-S 是--save的简写
-D 是--save-dev的简写
1
2
3
4
5

4.在项目中配置 webpack

• 在项目根目录中，创建名为webpack.config.js的webpack配置文件， 并初始化如下的配置

  module.exports = {
  	mode:'development'  //mode用来指定构建模式。可选值有 development和production
  	
  }
  1
  2
  3
  4

• 在 package.json 的 scripts节点下，新增dev脚本如下：

  "scripts"：{
  	“dev"："webpack"//script 节点下的脚本，可以通过npm run执行。例如npm run dev
  	
  }
  1
  2
  3
  4

• 在终端中运行 npm run dev 命令：启动webpack进行项目的打包构建

• 配置各种loader
  install style-loader css-loader 两个loader 处理css

const path = require("path");

module.export = {
    // 打包模式
    mode: "development",
    // 确定入口文件
    entry: "./src/index.js",
    // 确定打包完的 路径，文件名
    output: {
        filename: 'build.js', //输入文件
        //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径 
        path: __dirname, //输出位置
    },

    // 配置各种loader
    // 1. install style-loader css-loader 两个loader 处理css
    module: {
        rules: [
            {
                test: /\.css/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    }


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

vue3.0 项目

一，前端项目初始化步骤

① 安装Vue脚手架
② 通过vue脚手架创建项目
③ 配置vue路由
④ 配置E1ement-UI组件库
⑤ 配置axios库
⑥ 初始化git 远程仓库
⑦ 将本地项目托管到Github或码云中

• install vue 脚手架

  npm install @vue/cli -g
  1

• 使用 可视化创建

  vue ui
  声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】