前端工程化

简介: 前端工程化


前端工程化

高效的开发离不开基础工程的搭建。

Vue-cli

Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻松地创建新的应用程序而且可用于自动生成Vue和Webpack的项目模板。

Vue-cli是一个基于Vue.js进行快速开发的完整系统,其提供以下功能:

(1)通过@vue/cli实现交互式的项目脚手架。

(2)通过@vue/cli+@vue/cli-service-global实现零配置原型开发。

(3)一个运行时的依赖(@vue/cli-service),该依赖:

· 可升级。

· 基于Webpack构建,并带有合理的默认配置。

· 可以通过项目内的配置文件进行配置。· 可以通过插件进行扩展。

(4)一个丰富的官方插件集合,集成了前端生态中最好的工具。

(5)一套完全图形化的创建和管理Vue.js项目的用户界面。

Vue-cli致力于将Vue生态中的工具基础标准化。它确保各种构建工具能够基于智能的默认配置即可平稳衔接,这样开发者可以专注在撰写应用上,而不必花费好几天时间去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,而无须eject。

利用Vue-cli脚手架构建Vue项目需要先安装Node.js和NPM环境。

Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型。

Node是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。Node发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。

Node对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行JavaScript的速度非常快,性能非常好。Node是一个基于Chrome JavaScript运行时建立的平台,用于方便地搭建响应速度快、易于扩展的网络应用。Node使用事件驱动,采用非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

Node.js的安装

Node.js的安装比较简单,大家需要在Node.js官网(https://nodejs.org/en/download/)下载并安装Node.js环境,Windows系统推荐下载Windows Installer(.msi)。同时,大家会得到一个附送的NPM工具。

(1)安装Node.js,双击下载好的node安装文件安装过程比较简单,一直单击“下一步”按钮即可。

(2)环境变量配置。安装完成后需要设置环境变量,即在Path中添加安装目录(例如:D:\java\nodejs)

(3)单击“开始”按钮,然后单击“运行”按钮,在输入框内输入cmd命令,最后输入node-v,

NPM

NPM代表npmjs.org这个网站,这个站点存储了很多Node.js的第三方功能包。

NPM的全称是Node Package Manager,它是一个Node.js包管理和分发工具,已经成为非官方的发布Node模块(包)的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段,并且通过NPM管理需要分享的代码也很方便、快捷和简单。

NPM最初用于管理和分发Node.js的依赖,它自动化的机制使得层层嵌套的依赖管理变得十分简单,因此后来被广泛应用于前端依赖的管理中。

npm install -g cnpm – registry=http://registry.npm.taobao.org

这样就可以使用淘宝定制的CNPM(gzip压缩支持)命令行工具代替默认的NPM,当然大家也可以选择不安装,不代替NPM。

基本使用

在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如WebPack或Browserify模块打包器配合使用。Vue-cli脚手架快速建立项目,步骤如下:

(1)搭建第一个完整的Vue-cli脚手架构建的项目。

Vue-cli是用Node编写的命令行工具,我们需要进行全局安装。打开命令行终端,输入如下命令:

npm install -g vue-cli

然后等待安装完成

图片:

(2)安装完成后,在命令行输入vue-V,如果出现相应的版本号,则说明安装成功

当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

(3)我们可以使用Vue-cli快速生成一个基于Webpack模板构建的项目,

首先需要在命令行中进入项目目录,然后输入如下命令:

//cd $ 自定义路径$(如:D:\Web前端\VueCode)
    vue init webpack vue-project

(4)配置完成后,可以看到目录下多出了一个项目文件夹,里面就是Vue-cli所创建的一个基于Webpack的Vue.js项目。

然后进入项目目录(如:cd vue-project),使用npm install安装依赖

依赖安装完成后,我们来看一下项目的目录结构,代码如下:

App.vue文件解释:

App.vue是一个Vue组件,包含三部分内容:页面模板、页面脚本、页面样式,代码如下:

index.js文件解释:

(5)在命令行输入npm run dev命令启动项目

运行成功后在浏览器输入http://localhost:8080,访问项目结果如图

目录
打赏
0
3
4
0
196
分享
相关文章
前端工程化实践:从零搭建现代化项目构建流程
【4月更文挑战第6天】本文介绍了前端工程化的概念和重要性,包括模块化、自动化、规范化和CI/CD。接着,讨论了选择合适的工具链,如包管理器、构建工具和测试框架。然后,详细阐述了如何从零开始搭建一个基于React的现代化项目构建流程,涉及初始化、代码规范、测试、CSS处理、代码分割和CI/CD配置。最后,提到了持续优化与迭代的方向,如性能优化、类型检查和微前端。通过这样的实践,开发者可以提升开发效率和代码质量,为项目长远发展奠定基础。
394 0
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
【前端开发---Vue2】史上最详细的Vue入门教程(六) --- 工程化开发和脚手架、组件注册
前端工程化实战 - 日程管理
前端工程化实战 - 日程管理
57 0
什么是前端工程化❓
什么是前端工程化❓
92 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    11
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    31
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 4
    详解智能编码在前端研发的创新应用
    15
  • 5
    巧用通义灵码,提升前端研发效率
    15
  • 6
    智能编码在前端研发的创新应用
    16
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    11
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    24
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    13
  • 1
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    19
  • 2
    VSCode AI提效工具,通义灵码前端开发体验
    52
  • 3
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    4
  • 4
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 5
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    64
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    29
  • 7
    巧用通义灵码,提升前端研发效率
    94
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    148
  • 9
    详解智能编码在前端研发的创新应用
    101
  • 10
    智能编码在前端研发的创新应用
    83