三个小时vue3.x从零到实战(后)(vue3.x配套工具及项目化构建)

简介: 文章详细介绍了Vue 3.x相关的配套工具及项目化构建流程,包括构建工具的配置与最佳实践,帮助开发者更好地管理和构建Vue项目。

一. 环境搭建

使用淘宝镜像的命令:

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

这样就可以使用 cnpm 命令来安装模块了:

cnpm install [name]

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install -g @vue/cli
# 安装完后查看版本
$ vue --version
@vue/cli 4.5.13

二. vue脚手架: vue-cli构建工具

## 创建项目
vue create my-project
用来创建vue项目的工具包
创建项目:
    npm install -g vue-cli
    vue init webpack VueDemo
开发环境运行:
    cd VueDemo
    npm install
    npm run dev
生产环境打包发布
    npm run build
    npm install -g serve
    serve dist
    http://localhost:5000

三. vuex语法

github站点: https://github.com/vuejs/vuex
在线文档: https://vuex.vuejs.org/zh-cn/
简单来说: 对应用中组件的状态进行集中式的管理(读/写)

下载: npm install vuex --save

四. eslint

用来做项目编码规范检查的工具
基本原理: 定义了很多规则, 检查项目的代码一旦发现违背了某个规则就输出相应的提示信息
有相应的配置, 可定制检查

五. 使用vite构建

vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,

它做到了本地快速开发启动, 在生产环境下基于 Rollup 打包。

快速的冷启动,不需要等待打包操作;
即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
相关文章
|
Java Spring 容器
Spring的AOP失效场景详解
Spring的AOP失效场景详解
2263 0
|
机器学习/深度学习 资源调度 数据可视化
UCB Data100:数据科学的原理和技巧:第十六章到第十八章
UCB Data100:数据科学的原理和技巧:第十六章到第十八章
537 0
|
12月前
|
Apache 数据安全/隐私保护 Docker
【开源问答系统】GitHub 14.9k star 的开源问答引擎来了,三分钟搭建完成~~~
Apache Answer 是一款开源问答系统,助力团队将零散知识沉淀为结构化资产。支持 Docker 快速部署、插件扩展、权限控制与多语言,兼具高效搜索、投票排序与私有化部署能力,适用于技术社区、企业知识库与用户支持场景。
1270 22
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
存储 缓存 JavaScript
三个小时vue3.x从零到实战(前)(vue3.x基础)
该文章系列提供了Vue3.x从基础到实战的教程,涵盖安装、基本语法、组件化应用及项目构建等多个方面,适合从零开始学习Vue3.x的开发者。
2978 0
|
移动开发 JavaScript 前端开发
《抉择与权衡:Vue技术栈下uni-app与Taro的跨端较量》
在Vue技术栈为主的团队中,选择跨端开发框架时,uni-app与Taro各有优势。uni-app基于Vue.js,语法熟悉度高,开发效率快,HBuilderX工具支持强,跨端覆盖广(iOS、Android、Web及多小程序平台),性能优化特性丰富,生态插件完善。而Taro虽支持Vue语法,但核心仍带React风格,需适应新思维,其性能在React Native和H5上表现突出,适合对这些平台有高性能需求的项目。团队应根据开发效率、跨端需求及性能要求权衡选择。
1511 30
|
传感器
DIY_实现光敏电阻传感器简单控制LED
DIY_实现光敏电阻传感器简单控制LED
4479 2
|
Web App开发 机器学习/深度学习 人工智能
Magic Copy:开源的 AI 抠图工具,在浏览器中自动识别图像进行抠图
Magic Copy 是一款开源的 AI 抠图工具,支持 Chrome 浏览器扩展。它基于 Meta 的 Segment Anything Model 技术,能够自动识别图像中的前景对象并提取出来,简化用户从图片中提取特定元素的过程,提高工作效率。
1240 7
Magic Copy:开源的 AI 抠图工具,在浏览器中自动识别图像进行抠图
|
JavaScript 前端开发
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
本文提供了一个Vue 3教程,讲解了如何使用axios库手动从后端获取数据,包括安装axios、配置后端访问地址、编写路由地址、发起HTTP请求以及在组件中读取和打印响应数据的步骤。
3117 0
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
|
机器学习/深度学习 并行计算 大数据
【Python篇】深入挖掘 Pandas:机器学习数据处理的高级技巧
【Python篇】深入挖掘 Pandas:机器学习数据处理的高级技巧
742 3