0%

前端工程化 && vue3.0

前端工程化 && vue3.0

前端工程化

实际的前端开发:

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

webpack

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

3.在项目中安装 webpack
1
2
3
4
5
在终端运行如下的命令,安装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配置文件, 并初始化如下的配置

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

    }
  • 在 package.json 的 scripts节点下,新增dev脚本如下:

    1
    2
    3
    4
    "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 脚手架

    1
    npm install @vue/cli -g
  • 使用 可视化创建

    1
    2
    3
    vue ui
    🚀 Starting GUI...
    🌠 Ready on http://localhost:8000
    • 使用命令行创建

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      ###模板下载好后的交互选项
      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

1
npm install webpack-dev-server@2.9.1

生成环境-build

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

1
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 自定义名称
------ 本文结束------

欢迎关注我的其它发布渠道