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

简介: 该文章介绍了Vue 3.x项目构建和开发流程,包括使用Vue CLI创建项目、配置开发环境以及利用Vite等现代工具提升开发效率的方法。

一. 环境搭建

使用淘宝镜像的命令:

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
相关文章
|
Web App开发 移动开发 JavaScript
彻底学会快速部署vue框架,一篇就够了
Vue框架诞生于2014年,其作者为中国人——尤雨溪,也是新人最容易入手的框架之一,不同于React和Angular,其中文文档也便于大家阅读和学习。Vue用于构建交互式的Web界面的库,是一个用于构建用户界面的渐进式框架。
1476 0
彻底学会快速部署vue框架,一篇就够了
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
2月前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
2月前
|
JavaScript 开发者
三个小时vue3.x从零到实战(后)(vue3.x配套工具及项目化构建)
文章详细介绍了Vue 3.x相关的配套工具及项目化构建流程,包括构建工具的配置与最佳实践,帮助开发者更好地管理和构建Vue项目。
44 0
|
2月前
|
存储 缓存 JavaScript
三个小时vue3.x从零到实战(前)(vue3.x基础)
该文章提供了关于Vue 3.x的基础教程,覆盖了从环境搭建到基本使用的各个方面,适合Vue 3.x的初学者。
22 0
|
2月前
|
JavaScript 前端开发 开发者
三个小时vue3.x从零到实战(中)(vue3.x高级语法)
该文章深入探讨了Vue 3.x的高级语法与特性,包括混入(mixins)的使用、组件间的通信方式等,帮助开发者掌握Vue 3.x的进阶知识。
44 0
|
2月前
|
JavaScript 开发者
三个小时vue3.x从零到实战(vue3.x经典案例46个)
该文章提供了46个Vue 3.x的经典案例,通过实际代码示例帮助开发者更好地理解和运用Vue 3.x的各项功能和技术。
210 0
|
2月前
|
JavaScript 前端开发 编译器
三个小时vue3.x从零到实战(typescript的搭建、使用及资料)
该文章介绍了如何在Vue 3项目中集成TypeScript,包括TypeScript的安装、基本使用,以及如何通过TypeScript增强Vue应用程序的类型安全性。
37 0
|
6月前
|
移动开发 缓存 JavaScript
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度
101 6
|
6月前
|
缓存 JavaScript 前端开发
Vue2与Vue3:深度剖析核心差异与升级亮点
随着Vue.js框架的不断演进,Vue2与Vue3作为两个重要版本,各自承载了特定时期的前端开发理念和技术实践。本文将全面探讨Vue2与Vue3之间的核心区别,旨在帮助开发者理解两者在设计思路、性能优化、API结构、生命周期管理等方面的显著差异,以便更好地选择和迁移至适合项目的框架版本。
896 2