前端工程化(Vue3.0项目,Vue2.0项目)
前端工程化实际的前端开发:模块化|(js的模块化、Css的模块化、资源的模块化)组件化(复用现有的UI结构、样式、行为)规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)自动化(自动化构建、自动部署、自动化测试)webpack主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。3.在项目中安装 we
前端工程化
实际的前端开发:
- 模块化|(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进行项目的打包构建 -
配置各种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']
}
]
}
}
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 管理应用
- 在服务器中安装pm2:
npm i pm2 -g
- 启动项目:
pm2 start 脚本 --name 自定义名称
- 查看运行项目:
pm2 ls
- 重启项目:
pm2 restart 自定义名称
- 停止项目:
pm2 stop 自定义名称
- 删除项目:
pm2 delete 自定义名称
更多推荐
所有评论(0)