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

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


感谢阅读,祝君暴富!


相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
nihui1236 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu8 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj8 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss