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的性能更强大,也在不断完善,个人觉得应该会成为主流。

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


感谢阅读,祝君暴富!


相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴4 小时前
Mix
前端·webgl
代码续发4 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码5 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记5 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏5 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante6 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端