首页 > 其他分享 >vue03 01.创建项目

vue03 01.创建项目

时间:2023-03-25 09:22:39浏览次数:52  
标签:npm 01 run vue03 创建 vue 打包 vite build

目录

01.创建项目

打包工具

vite介绍

  • Vite也是前端构建工具
  • 相较于webpack,vite采用了不同的运行方式:
    • 开发时,并不对代码打包,而是直接采用ESM的方式来,而是直接采用ESM的方式来运行项目
    • 在项目部署时,在对项目进行打包
  • 除了速度外,vite使用起来也更加方便
  • 基本使用
    1. 安装开发依赖vite
    2. vite的源码目录就是项目根目录
    3. 开发命令:
      1. vite 启动开发服务器
      2. vite build打包代码
      3. vite preview 预览打包后代

安装命令

使用 NPM:

npm create vite@latest

使用 CNPM:

cnpm create vite@latest

使用 Yarn:

yarn create vite

使用 PNPM:

pnpm create vite

然后按照提示操作即可!

看到下面的提示代码创建成功
然后按下面的命令依次操作

√ Select a variant: » TypeScript

Scaffolding project in G:\site\view\vue-dome01...

Done. Now run:

  cd vue-dome01
  npm install
  npm run dev

启动项目


$ npm run dev # 这里是编译运行,速度很快
> [email protected] dev
> vite


  VITE v4.2.1  ready in 742 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

浏览效果

image

代码目录

image

打包

npm run build

$ npm run build

> [email protected] build
> vue-tsc && vite build

vite v4.2.1 building for production...
✓ 18 modules transformed.
dist/index.html                  0.45 kB
dist/assets/vue-5532db34.svg     0.50 kB
dist/assets/index-c322ae43.css   1.30 kB │ gzip:  0.67 kB
dist/assets/index-2424b2d8.js   54.50 kB │ gzip: 21.98 kB
✓ built in 2.54s

预览运行

注意先 npm run build 打包才能 预览运行

npm rum preview

$ npm run preview

> [email protected] preview
> vite preview

  ➜  Local:   http://127.0.0.1:4173/
  ➜  Network: use --host to expose

标签:npm,01,run,vue03,创建,vue,打包,vite,build
From: https://www.cnblogs.com/haima/p/17254114.html

相关文章

  • [ [Ynoi2013] 无力回天 NOI2017 ] 解题报告
    [Ynoi2013]无力回天NOI2017首先看到异或,想到能维护异或的东西就那几样(线性基/01trie/数位dp/FWT),再看到求选任意个数后的异或最大值,线性基无疑了。这时再看还要维护什......
  • 使用 class sap.ui.core.UIComponent.createContent 创建 Component 实例
    SAPUI5中,sap.ui.core.UIComponent和sap.ui.core.Component是两个不同的概念,但它们之间有联系。sap.ui.core.Component是SAPUI5框架中的一个基类,用于封装应用程序或控......
  • 关于 SAP UI5 应用 render2 实例异步创建的编码实现
    本文是笔者这篇教程的详细解释:SAPUI5应用开发教程之五十四-如何将本地SAPUI5应用配置到本地FioriLaunchpad中默认的async标志位为false:默认的rendere......
  • office2010加载mathtype
    salute:word打开提示无法加载此程序mathpage.wll_word无法加载此加载项程序_maboii的博客-CSDN博客salute:Word粘贴时出现“文件未找到:MathPage.WLL”的解决方案-知乎(......
  • [oeasy]python0115_西里尔字符集_Cyrillic_俄文字符编码_KOI_8859系列
    各语言字符编码回忆上次内容上次回顾了非ascii的拉丁字符编码的进化过程0-127是ascii的领域西欧、北欧语言大多使用拉丁字符由iso组织制定iso-8859-1北欧原来不是......
  • 01-随机知识点
    字符集及排序规则查看支持的字符集SHOWCHARACTERSET;+----------+---------------------------------+---------------------+--------+|Charset|Description......
  • Gpt告诉你如何通过代码获取安卓root权限并创建虚拟网卡
    在Android5.0及以上的操作系统中,已经内置了TUN和TAP驱动,因此可以使用代码的方式创建虚拟网卡。以下是一个使用Java代码创建虚拟网卡的示例:```javapubliccla......
  • Oracle 创建索引
    创建索引一般分为在线索引和非在线索引,在线与非在线的区别:非在线锁表,优先创建索引,此时DML都被阻塞,所以快;相反,在线锁的是行而非表,通过临时表进行索引的创建,所以不会影响DML......
  • oracle创建DBLink
    databaselink是定义一个数据库到另一个数据库的路径的对象,databaselink允许你查询远程表及执行远程程序。Createdatabaselink:createpublicdatabaselinktestDbli......
  • mysql 订单产品表,一个订单对应多个产品,查询只包含产品A001,A002,A003的订单
    假设订单产品表的表名为order_product,包含字段如下:order_id:订单IDproduct_id:产品ID下面是查询只包含产品A001,A002,A003的订单的SQL语句:SELECTorder_idFROMorder......