使用vite创建vue项目

使用vite创建vue3项目

1、创建项目

在想创建项目的目录进入cmd命令

npm create vite@latest

2、选择是否继续

Need to install the following packages:create-vite@3.2.1
Ok to proceed? (y) y    //选择是否继续

3、输入项目名字

√ Project name: ... vite-project     //输入项目名称

4、选择创建项目的框架

使用上下键进行切换

 Select a framework: » - Use arrow-keys. Return to submit.           //选择项目框架Vanilla
>   VueReactPreactLitSvelteOthers

5、选择项目语言

使用上下键进行切换

? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScriptTypeScriptCustomize with create-vue ↗Nuxt ↗

6、项目创建成功

Done. Now run:cd vite-projectnpm installnpm run dev

7、根据提示进入项目目录

cd vite-project

8、安装项目依赖

 npm install     //安装依赖,等同于npm iadded 32 packages in 2m      //显示这，表示是下载成功

9、项目目录

public目录中放置静态文件（通常只有一个vite.svg ）
src 目录中放置我们自己项目中所书写的源代码
src下有的叫assets：存放项目中需要用到的资源文件，css、images等。
src下 main.js 是应用的入口 JS 文件
src下components是组件存放位置
package.json 是项目配置文件
vite.config.js 是 vite 的配置文件

使用vite创建vue项目相关推荐

使用vite创建vue项目步骤
由之前使用@vue/cli创建vue项目,改为用vite创建使用步骤使用以下命令实现使用vite创建vue项目: npm init vite-app <project-name> 相比 ...
Vue3实现备忘录｜用vite创建vue项目步骤
目录运行结果展示创建项目备忘录功能实现本文使用的IDE是VSCode,node.js是16. 运行结果展示实现的功能有输入框回车添加任务,鼠标悬停显示删除按钮并可以删除单条任务,一键移除 ...
使用vite脚手架创建vue项目
选择列表方式创建项目 npm init vite # 等价于 npm create vite # 使用yarn yarn create vite # 使用pnpm pnpm create vite 会 ...
vue - - - - vite创建vue3项目（不使用TS）
vite创建vue3项目 vite官方文档 1. 使用指令创建项目 > npm create vite your-project-name > or > yarn create vi ...
Vite创建Vue2项目
文章目录 1. 输入项目名称 2. 选择框架 3. 选择不同 4. 项目创建完成 5. 项目结构 6. 安装插件 7. 使用插件 8. 安装vue 9. 修改项目结构 10. 启动项目在 Vite创 ...
创建vue项目+总结使用(跨域问题+vue 创建)
创建vue项目: -安装node.js-vue脚手架-vue create 项目名字pycharm开发vue项目-需要安装vue.js插件-setting--->plugins--->左下 ...
ui vue 创建项目教程并关闭语法_使用vue ui命令创建vue项目步骤
1.前置环境 1.node.js 2.vue-cli 3.webstorm 2.创建步骤 1.在webstorm中打开一个终端,输入 #vue ui 运行结束后,会启动一个web服务用以可视化创建vu ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
一、从零创建VUE项目
假设你在创建VUE项目时对webpack和vue-loader有一些了解. 下面开始快速搭建属于你的VUE项目: $ npm install vue-cli -g // 全局安装vue-cli $ ...