前端工程化(一)---工程目录搭建
从0开始,构建前后端分离应用
导航
前端工程化(一)---工程基础目录搭建
前端工程化(二)---webpack配置
前端工程化(三)---Vue的开发模式
由于一直在搞后端开发,对于前端内容的掌握一直停留在css、jquery、js、html这类的基础应用上。
一下子接触到前端工程化、spa这类的东西,曲线有些陡峭,整个过程经历了诸多曲折。将收集到的知识总结一下,掺杂着一些个人的理解,不一定准确。
开始搭建之前,先要搞清楚一些概念。
一些知识点
1、前端工程化
记得在刚刚进入软件行业的时候,项目组中一般都会有美工这个角色,负责设计系统需要的各种图片、切图,设计系统整体的样式。上面的工作完成后就可以交给后台开发人员了,后者负责后台逻辑,从数据库中读取数据并渲染到页面上。前端的所有工作围绕着切图、调样式开展
现在的前端趋势是什么?就是工程化,工作的模式和后端开发一样,也是多模块多人协作开发(这也就诞生了CommonJS、AMD/CMD、require这些模块化标准),那么就需要进行工程化,否则代码很难管理与维护。前端承担的任务也比原来繁重了很多,后端只需要提供接口API,剩下的视图层的渲染工作全部由前端完成。前后端分工越来越清晰,前后端在项目开发过程中不再相互制约,前端与后端已经分离
同时,前端开发已经不是所见即所得了,比如es6、less是不能够得到所有浏览器的完美支持的,但是这些东西还能加快我们的开发效率,那怎么权衡呢?那么就需要解释为浏览器能够完美支持的css、js语法
2、webpack
一些基本概念请参照:官方教程
官方的解释:webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
在我自己的项目场景中,webpack就是将es6、less、vue、图片、字体这些资源通通都打包为浏览器能够解析的js、css代码
3、Node.js 的 包管理器npm
全球最大的开源生态系统,在前端项目构建过程中,会不断的使用该命令去添加项目对各种第三方模块的依赖,例如:添加html-webpack-plugin的引用
cnpm install html-webpack-plugin --save-dev
给我的感觉它就向后台构建工具Maven,Maven是通过在pom文件中添加模块的坐标来添加依赖,例如:添加对Mybatis的依赖
<dependency><groupId>org.mybatis</groupId><artifactId>mybatis-spring</artifactId><version>${version.mybatis-spring}</version></dependency>
搭建过程
以下过程都是基于webpack4的
1、安装node.js
进入 https://nodejs.org/en/download/ 根据自己电脑的系统不同,下载对应的安装文件,进行安装
2、由于npm下载资源很慢,因此推荐使用阿里的 cnpm来取代npm
3、安装webpack,我装的是4.5.0版本
sudo cnpm install webpack@4.5.0 -g
4、安装后,发现webpack -h不好使,提示要安装webpack-cli
sudo cnpm install webpack-cli -g sudo cnpm install webpack-cli -D
这两步都要执行
5、初始化工程
新建工程目录
mkdir syInfoApp
进入工程目录
cd syInfoApp
初始化
cnpm init
安装后,目录下会产生一个package.json文件,它类似于Maven中的pom。里面记录了依赖的模块信息、版本信息还有项目的一些基本信息。网上的一些教程,使用已经搭建好的环境进行讲解,当看到package.json文件的时候,里面一大堆的东西让人头晕,还是从头一点儿点儿来比较清晰
6、在项目中安装webpack,以便在项目中可以使用
进入项目所在目,执行如下命令
cnpm install webpack@4.5.0 --save-dev
这时可以看到在package.json中看到对webpack的依赖信息了
7、创建项目基本目录
参照约定,创建以下目录
/src:存放源码目录
/src/assets:存放项目公用的图片、js、样式、模板、数据的资源
/src/components:存放封装好的前端组件,比如图片上传组件、树组件、列表组件等等
/src/routes:存放vue-router的路由配置
/src/views:存放应用的视图,比如用户管理页面(叫页面不确切,因为我们是单页面应用,整个系统只有一个页面。所以叫html片段更贴切)
/dist:存放构建后的文件
8、创建表要的文件
app.vue:这是基于Vue开发的根实例。
index.js:负责将app.vue挂载到项目的主页,也就是index.html上(index.html在哪?后续会介绍)
另外一点儿建议:
对于新手最好不要使用官方提供的命令行工具的方式,构建单页面工程。
这种方式确实方便快捷,能够一键搭建工程,但这样只能让自己上来一脸茫然,最好还是经历手动搭建这一过程。
这也是官方的建议
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm run dev
转载于:https://www.cnblogs.com/lichking2017/p/9023821.html
前端工程化(一)---工程目录搭建相关推荐
- 「前端工程化」从0-1搭建react,ts脚手架(1.2w字超详细教程)
一 前言 读完这篇文章你可能会学到哪些知识? ①node实现终端命令行 ②终端命令行交互③深copy整个文件夹 ④nodejs执行终端命令 如 npm install⑤建立子进程通信 ⑥webpack ...
- 第七章 前端开发——前端工程化(NPM、脚手架、前端环境搭建)
第七章 前端工程化(NPM.脚手架.前端环境搭建) 一.支持环境 二.NPM包管理工具 三.Vue生成器 四.前端的集成环境 五.项目目录结构 六.前端Vue框架与后端Django框架的简单交互 一. ...
- altium designer无法创建工程_前端工程化之开发脚手架及封装自动化构建
工程化笔记 . . 光 前端工程化简述 简述 一切能提升前端开发效率,提高前端应用质量的手段和工具都是前端工程化. 模块化,组件化,规范化,自动化. 解决的问题 传统语言或语法的弊端. 无法使用模块 ...
- Mina学习之搭建项目工程目录
为什么80%的码农都做不了架构师?>>> Mina核心分层分为:IoService,IoFilter和IoHandler 搭建项目工程目录,一般应用都包含如下几个部分: 1.s ...
- 从 0 搭建 Vite 3 + Vue 2.7 前端工程化项目
前言 Vue 2.7 正式版已经发布有一段时间了,但目前许多公司还没有升级 Vue 3 的打算(比如我),随着 Vite 脚手架注定成为下一代前端工具链,许多用户都想基于 Vite 来构建 Vue 项 ...
- 前端工程化系列[06]-Yeoman脚手架核心机制
在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoma ...
- 我们是如何做好前端工程化和静态资源管理 - 無雄 - 博客园
我们是如何做好前端工程化和静态资源管理 随着互联网的发展,我们的业务也日益变得更加复杂且多样化起来,前端工程师也不再只是做简单的页面开发这么简单,我们需要面对的十分复杂的系统性问题,例如,业务愈来愈复 ...
- 现代前端工程化-基于 Monorepo 的 lerna 模块(从原理到实战)
本文你能学到什么? 看完本文后希望可以检查一下图中的内容是否都掌握了,文中的例子最好实际操作一下,下面开始正文. 本文是前端工程化系列中的一篇,回不断更新,下篇更新内容可看文末的下期预告!宗旨:工程化 ...
- 前端架构,前端工程化
前端架构: 1.前端工程化 web应用复杂度的增加,特别是单页面应用的风靡.组件化,工程化,自动化成了前端发展的趋势.或者说一线的互联网公司就是这么做的. 每个前端团队都在打造自己的前端开发体系,这通 ...
最新文章
- 《强化学习周刊》第37期:视觉深层框架、Transformer World模型、注意力增强强化学习...
- linux shell find depth,搞定 Linux Shell 文本处理工具,看完这篇集锦就够了
- py 的 第 30 天
- Spring事务那些事儿
- python的特点及应用-python有什么特性和劣势?老男孩python入门
- Android 沉浸式状态栏完美解决方案
- 人工智能写作:想要和智能对话 本AI给你的写作指个路
- Windows 98 不同用途启动盘制作(转)
- python斗鱼抽奖_Python实现抓取斗鱼实时弹幕
- VMware激活密钥
- PowerDesigner 逆向工程 Could not Initialize JavaVM!
- 流量映射端口反弹(lcx,ew)
- 生成树技术(spanning tree)技术
- 在C#中obsolete表示什么?
- 一项研究调查了采用Masimo Rad-G™搭配RRp(R)实现自动呼吸频率测量的影响
- 理解网络交换机的原理
- 前端学习笔记之HTML body内常用标签
- php按钮如何加显示不出来,javascript - 点击按钮 显示更多,自定义变量显示不出来?...
- VMware提示【该虚拟机似乎正在使用中】的解决方案
- 实现 等高线图 - 基于python-matplotlib