Vue项目的构建方式


天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


兴酣落笔摇五岳,诗成笑傲凌沧洲。

功名富贵若长在,汉水亦应西北流。

------《江上吟》


文章目录

  • Vue项目的构建方式
    • [1. Vue3基于Vite构建项目](#1. Vue3基于Vite构建项目)
      • [1.1 介绍](#1.1 介绍)
      • [1.2 构建流程](#1.2 构建流程)
    • [2. Vue3基于CLI构建项目](#2. Vue3基于CLI构建项目)
      • [2.1 介绍](#2.1 介绍)
      • [2.2 构建流程](#2.2 构建流程)
    • [3. Vue2基于CLI构建项目(拓展)](#3. Vue2基于CLI构建项目(拓展))
      • [3.1 介绍](#3.1 介绍)
      • [3.2 构建流程](#3.2 构建流程)
    • [4. Vite和Vue CLI构建方式的区别](#4. Vite和Vue CLI构建方式的区别)
    • [5. 推荐使用方式](#5. 推荐使用方式)

Node.js的下载、安装和配置
node的下载、安装、配置和使用(node.js下载安装和配置、npm命令汇总、cnpm的使用)
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇(环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等)
Vue入门第二篇(基本语法、实例演示)
Vue专栏


Vue项目的构建方式

node.js环境安装配置后,方可使用vue

以下介绍Vue项目的几种构建方式,后续会根据这几种构建方式实例演示Vue项目的构建。

关于Vue3的构建方式有两种,一种是新兴的基于Vite构建项目,一种是原来的基于Vue CLI构建项目

在Vue的官网教程中,已经默认使用了Vite进行项目的构建,故今后Vite应该会是主流,毕竟它启动更快,效率更高。

1. Vue3基于Vite构建项目

1.1 介绍

在Vue3的版本中,构建项目已经可以使用Vite构建了,Vite是由原生ES Module驱动的,利用浏览器原生ES Module支持来提供快速的开发体验,Vite在开发环境下无需打包项目,构建速度更快,开发效率更高。

1.2 构建流程

创建项目

l 复制代码
npm create vue@latest

选择配置项

l 复制代码
根据需要选择需要配置的选项

进入项目目录

l 复制代码
cd 项目名称

安装模块

l 复制代码
npm install

运行项目

l 复制代码
npm run dev

2. Vue3基于CLI构建项目

关于vue cli的安装需要在管理员权限下进行(以管理员身份运行cmd窗口)

2.1 介绍

Vue CLI是vue.js的标准开发工具,CLI是Command Line Interface的缩写

Vue CLI具有丰富的配置、插件、预设等功能

2.2 构建流程

全局安装Vue CLI脚手架

l 复制代码
npm install -g @vue/cli

创建项目(项目名称全小写)

l 复制代码
vue create 项目名称

选择配置项

l 复制代码
根据需要选择需要配置的选项

进入项目目录

l 复制代码
cd 项目名称

安装模块

l 复制代码
npm install

运行项目

l 复制代码
npm run serve

3. Vue2基于CLI构建项目(拓展)

关于vue cli的安装需要在管理员权限下进行(以管理员身份运行cmd窗口)

当然,如果你还想用Vue2的脚手架来创建项目,也可以,以下是Vue2的脚手架创建

3.1 介绍

Vue CLI是vue.js的标准开发工具,CLI是Command Line Interface的缩写

Vue CLI具有丰富的配置、插件、预设等功能

3.2 构建流程

全局安装Vue CLI

l 复制代码
npm install -g vue-cli

创建项目(项目名称全小写)

l 复制代码
vue init webpack 项目名称

选择配置项

l 复制代码
根据需要选择需要配置的选项

进入项目目录

l 复制代码
cd 项目名称

运行项目

l 复制代码
npm run dev

4. Vite和Vue CLI构建方式的区别

Vite和Vue CLI构建项目的区别

Vite:服务启动极快3(开发环境下无需打包)、配置简洁(简洁的vite.config.js配置)、原生ES Module支持(浏览器原生ES Module加载模块)

Vue CLI:丰富的插件与预设(提供大量官方和社区插件,可集成各种工具和库)、详细的配置(通过vue.config.js文件继续详细配置)、热重载(支持热模块替换即HMR,提高开发效率)

5. 推荐使用方式

推荐使用vite,虽然原有的Vue CLI更为成熟,也更易上手,但Vite的性能更强大,也在不断完善,个人觉得应该会成为主流。

仅为个人观点,仅供参考。


感谢阅读,祝君暴富!


相关推荐
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng3 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科3 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20163 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20095 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼6 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder6 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔6 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔6 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js