如何用Vite构建工具快速创建Vue项目

目录
  • 和Webpack相比,Vite具有以下特点
  • Vite构建Vue项目
  • 构建过程可能会发生的一些问题
  • 总结

和Webpack相比,Vite具有以下特点

1、快速的冷启动,不需要等待打包

2、即时的热模块更新,真正的按需编译,不用等待整个项目编译完成

Vite构建Vue项目

前提:安装Node.js和Vite

第一步通过npm创建Vite项目

npm init vite-app 项目名称
# 例如
npm init vite-app HelloVue

第二步当项目创建成功后,cd到项目目录

cd 项目名称
# 例如
cd HelloVue

第三步安装项目依赖

npm install

第四步运行项目

npm run dev

构建过程可能会发生的一些问题

1、npm install命令很慢或者卡住不动,可以参考:

https://www.jb51.net/article/248533.htm

2、npm run dev提示“vite不是内部或外部命令”,可能你还没安装vite,可以输入以下命令进行安装。

npm install vite

安装成功再次npm run dev应该就没问题了。

总结

到此这篇关于如何用Vite构建工具快速创建Vue项目的文章就介绍到这了,更多相关Vite快速创建Vue内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • 如何利用Vue3+Vite批量导入模块/资源

    目录 前言 1,前置基础知识-JavaScript模块化编程 (1)export语句-暴露函数和变量使外部调用 (2)import语句-导入变量/函数并使用 (3)import*asxxx语句-全部导入 (4)exportdefault-默认导出 2,在Vite工程中批量导入js模块 3,在Vite工程中批量导入图片/音频等静态资源 总结 前言 在Vue项目开发中,我们常常会导入一些外部的模块,或者是自己写模块导入. 但是模块多了,一个个地导入很显然不是一个好办法,因此我们可以批量导入. 1,前

  • 图文详解如何在vue3+vite项目中使用svg

    今天在vue3+vite项目练习中,在使用svg时,发现之前的写法不能用,之前的使用方法参考vue2中优雅的使用svg const req = require.context('./icons/svg', false, /\.svg$/) const requireAll = requireContent => requireContent.keys().map(requireContent) requireAll(req) 然后就各种资料查找,终于实现了,废话不多说,直接上代码: stept1

  • 如何为老vue项目添加vite支持详解

    1.前言 接手公司的某个项目已经两年了,现在每次启动项目都接近1分钟,hmr也要好几秒的时间,but vite2发布之后就看到了曙光,但是一直没有动手进行升级,昨天终于忍不住了,升级之后几秒钟就完成了. vite -- 一个由 vue 作者尤雨溪开发的 web 开发工具,它具有以下特点: 快速的冷启动 即时的模块热更新 真正的按需编译 2.开始升级 注:只是升级了开发环境,打包依旧是webpack(也试过打包也用vite,但是打包后发现iview的字体图标出现问题了,初步验证是静态资源的问题,v

  • 基于Vite2.x的Vue 3.x项目的搭建实现

    创建 Vue 3.x 项目 npm init @vitejs/app my-vue-app --template 引入 Router 4.x npm install vue-router@4 --save 配置路由 在更目录中添加一个 router 的文件夹,新建 index.js Router 4.x 为我们提供了 createRouter 代替了 Router 3.x 中的 new VueRouter,用于创建路由. // Router 4.x import { createRouter,

  • 如何用Vite构建工具快速创建Vue项目

    目录 和Webpack相比,Vite具有以下特点 Vite构建Vue项目 构建过程可能会发生的一些问题 总结 和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目 前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd

  • VSCode创建Vue项目的完整步骤教程

    目录 一.配置环境 1.安装VS Code 2.安装node.js 3.安装配置脚手架vue-cli 二.创建vue项目 1.命令方式创建 2.重新初始化依赖 3.启动项目 补充:在VScode中如何使用vue代码 总结 一.配置环境 1.安装VS Code 官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装. 2.安装node.js (1)官网 https://nodejs.org/en/ 下载node.js,按照步骤安装即可,node.j

  • node创建Vue项目步骤详解

    vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟. Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大型应用时,推荐使用npm安装,npm能很好的和webpack等打包工具配合使用. 首先Vue的安装依赖于node.js,要保证你的计算机上已经安装过node.js. 如何查看node是否安装或者node版本呢? 进入cmd,输入命令 node -v,回车查看.node最好使用新一些的版本,否则后续

  • 快速解决Vue项目在IE浏览器中显示空白的问题

    vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的 引入方法: 打开packge.json,在dependencies中加入:"babel-polyfill" : "^6.23.0" 然后重新npm install 在App.vue文件中import:import  "babel-polyfill" 这样IE浏览器就显示正常了. 以上这篇快速解决Vu

  • 创建Vue项目以及引入Iview的方法示例

    创建Vue项目 以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev 以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法. 我创建Vue项目过程 $ vue init webpack

  • 如何用Anaconda搭建虚拟环境并创建Django项目

    一.创建虚拟环境 (1)打开cmd命令窗口 (2)创建虚拟环境 conda create -n mydjango_env (3)查看虚拟环境 conda env list *号表示当前使用的环境 (4)激活创建的虚拟环境 activate mydjango_env 二.安装Django 在新环境激活的状态下安装Django conda install django 三.创建项目 (1)进入需要创建项目的文件目录 (2)创建项目 django-admin startproject 项目名 此时Dj

  • 基于脚手架创建Vue项目实现步骤详解

    第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vue --version 如果Vue版本太低,先卸载Vue低版本 npm uninstall vue-cli -g 第二步 创建Vue项目 1. 打开要创建路径 2-1.vue CLI3版本输入vue create test创建名为test的项目 接下来会问你一系列的问题 Please pick a

  • 使用vue-cli创建vue项目介绍

    1.什么是vue-cli 是vue官方提供的脚手架工具.脚手架工具简单讲就是自动将项目需要的环境.依赖等信息都配置好. 2.全局安装vue-cli (1)检查npm 版本,建议安装到最新版本. [命令行查看版本号] node -v npm -v [升级npm(可选操作)] npm install -g npm [修改为淘宝镜像(可选操作)] npm config set registry "https://registry.npm.taobao.org" (2)安装 [全局安装 web

  • vue-cli创建vue项目的详细步骤记录

    目录 什么是Vue脚手架 vue-cli创建vue项目 总结 什么是Vue脚手架 Vue脚手架,也就是vue cli.如果我们平时只是写一些简单的页面的时候,只需要下载vue.js就行了.但是我们有的时候创建Vue项目的时候,有时候还有一些webpack的项目,很多配置特别麻烦.于是我们就可以用到Vue cli vue-cli创建vue项目 一.安装node环境 二.下载vue和vue-cli脚手架 命令:npm i -g vue ; npm i -g @vue/cli 三.在想要创建的位置路径

  • 使用Cargo工具高效创建Rust项目

    目录 前言 一.功能强大的Cargo工具 1.Cargo工具是什么? 2.使用Cargo命令创建 hello_cargo 项目 3.项目文件目录里各文件的内容和特点 4.Cargo 常用命令 二.Rust 语言的输入输出 1.输入输出测试 2.具体代码解析 前言 本文紧跟上篇Rust博文内容,讲解Cargo工具在Rust项目创建时的妙用,手把手教你使用Cargo工具在黑窗口创建项目.此外,创建项目之后,简单的做一个Rust语言中输入输出的测试,上文提到学好Rust语言的方法就是一步一步打基础,因

随机推荐