前端工程化 && vue3.0

前端工程化 && vue3.0

前端工程化

实际的前端开发：

• 模块化|（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的简写

4.在项目中配置 webpack

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

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

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

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

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

vue3.0 项目

一，前端项目初始化步骤

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

• install vue 脚手架

  npm install @vue/cli -g

• 使用 可视化创建

  vue ui
  🚀  Starting GUI...
  🌠  Ready on http://localhost:8000

  • 使用命令行创建

    ###模板下载好后的交互选项
    1.Project name vue-demo # 项目名称，直接回车，按照括号中默认名字
    （注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
    2. Project description A Vue.js project # 项目描述,直接回车
    3. Author # 作者名称，默认直接回车
    4. Vue build standalone # 一般选择的Standalone(运行时 + 编译器)模式
        Runtime + Compiler: recommended for most users；
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) 
    areONLY allowed in .vue files - render functions arerequired elsewhere
    （一般都选这个Runtime + Compiler: recommended for most users）
    5. Install vue-router? Yes # 是否需要 vue-router，路由，一般都需要，输入y敲回车
    6.Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
    7. Pick an ESLint preset Standard # 一样的ESlint 相关
    8. Set up unit tests Yes # 是否安装单元测试
    9. Pick a test runner 按需选择 # 测试模块
    10. Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
    11. Should we run `npm install` for you after the project has been created? (recommended) npm # 
    包管理器，一般用NPM

版本bug

vue 2.0

npm install webpack-dev-server@2.9.1

生成环境-build

有个插件能够移出项目中的所有 log打印

transform-remove-consol  

项目优化

通过externals 加载外部cdn资源

默认情况下，通过import 语法导入的第三方资源包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

为了解决上述问题，可以通过webpack的externals节点，来配置加载外部的cdn资源，凡是声明在externals中的第三方依赖包，都不会被打包

使用pm2 管理应用

1. 在服务器中安装pm2： npm i pm2 -g
2. 启动项目： pm2 start 脚本 --name 自定义名称
3. 查看运行项目： pm2 ls
4. 重启项目： pm2 restart 自定义名称
5. 停止项目：pm2 stop 自定义名称
6. 删除项目： pm2 delete 自定义名称

应用组件