首页 > 其他分享 >Hello Vue 3.0 + Vite:vite创建项目

Hello Vue 3.0 + Vite:vite创建项目

时间:2022-12-05 15:37:43浏览次数:36  
标签:文件 Vue 文件目录 项目 -- yarn Vite 3.0 vite


目录

  • ​​首先全局安装vite​​
  • ​​依次执行下面代码:​​
  • ​​创建项目也可以使用指令(yarn):​​
  • ​​文件目录结构​​

首先全局安装vite

npm install -g create-vite-app

依次执行下面代码:

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

创建项目也可以使用指令(yarn):

yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev

文件目录结构

|-node_modules        -- 项目依赖包的目录
|-public -- 项目公用文件
|--favicon.ico -- 网站地址栏前面的小图标
|-src -- 源文件目录,程序员主要工作的地方
|-assets -- 静态文件目录,图片图标,比如网站logo
|-components -- Vue3.x的自定义组件目录
|--App.vue -- 项目的根组件,单页应用都需要的
|--index.css -- 一般项目的通用CSS样式写在这里,main.js引入
|--main.js -- 项目入口文件,SPA单页应用都需要入口文件
|--.gitignore -- git的管理配置文件,设置那些目录或文件不管理
|-- index.html -- 项目的默认首页,Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件,用于防止包版本不一样导致的错误
|-- package.json -- 项目配置文件,包管理、项目名称、版本和命令

Hello Vue 3.0 + Vite:vite创建项目_git

Hello Vue 3.0 + Vite:vite创建项目_配置文件_02


标签:文件,Vue,文件目录,项目,--,yarn,Vite,3.0,vite
From: https://blog.51cto.com/u_15897447/5912423

相关文章

  • 解决[Vue warn]: Property or method “preCarriagePriceType“ is not defined on th
    #vue警告[Vuewarn]:Propertyormethod“name”isnotdefinedontheinstancebutreferencedduringrender.Makesurethatthispropertyisreactive,eitheri......
  • 封装一个 vue3 通用组件,用于懒加载子组件
    简介某些场景下,容器组件会包含很多子组件,比如表格的列和表单的字段,而一旦数量上去而且列/字段组件还嵌套了其他组件,就会导致渲染时长急剧增加。因此,考虑封装一个通用的懒......
  • webpack与vite的区别
    1、相同点都是现代化打包工具2、为什么Vite启动快2.1底层语言从底层原理上来说,Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写,因为go语言的操作是纳秒级......
  • Vue3+Node写个免费在线图库生成器,只需三步将你的手机相册搬到线上
    项目背景作为一名阿宅,摄影可能是为数不多能让我出门的事情了,以前在广州有很多漫展,基本一两个月必有一场,我也经常会去蹭拍coser,不得不说拍照技术都是在那段时期锻炼出来的。......
  • vue2和vue3的区别
    1、双向数据绑定原理不同vue2:vue2的双向数据绑定是利用ES5的一个API,Object.definePropert()对数据进行劫持,结合发布订阅模式的方式来实现的。vue3:vue3中使用了ES6的Prox......
  • 安装vue脚手架出现错误:npm ERR code ETIMEDOUT npm ERR syscall connect
    npm安装淘宝映像报npmERR!具体如下C:\Users\admin>npminstall-g@vue/clinpmERR!codeENOTFOUNDnpmERR!syscallgetaddrinfonpmERR!errnoENOTFOUNDnpmERR!netwo......
  • 老板:你为什么要选择 Vue?
    大家好,我是Kagol,VueDevUI 开源组件库和EditorX富文本编辑器创建者,专注于前端组件库建设和开源社区运营。假如你是团队的前端负责人,现在老板要拓展新业务,需要开发一个......
  • VUE学习随笔
    VUE做的事儿和二阶段一样,但是语法变化较大,一切的框架都是为了简化DOM操作(语法麻烦、渲染多了影响效率)VUE一、vue介绍二、vue2.0的使用1、vue2.0的使用模板:2、vue2的clas......
  • 马上2023年了,Vue还有人用吗?
    Vue.js是一个渐进式MVVM框架,目前被广泛使用,也成为目前前端技术中颇具代表性的一个框架。按Vue作者的说法,Vue(及其生态)是一个渐进式MVVM框架,可以按照实际需要逐步进阶......
  • TDengine3.0:解决高基数问题的时序数据库设计思路
    小T导读:数据集的高基数(High-Cardinality)问题一直困扰着诸多主流的时序数据库(TimeSeriesDatabase,TSDB)产品。一些数据库管理系统,在基数较低时表现良好;但是随着基数的增......