vue初学：安装使用（2）——使用Vite快速构建Vue项目

大奎子

已于 2022-09-03 22:37:38 修改

阅读量893

点赞数

CC 4.0 BY-SA版权

分类专栏： vue安装使用、项目构建文章标签： vue.js 前端 javascript

于 2022-09-01 13:02:35 首次发布

本文链接：https://blog.csdn.net/m0_46610349/article/details/126627853

vue安装使用、项目构建专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用Vite搭建Vue项目，从npm安装、常用命令到创建项目，解析项目文件结构，并提供了初步尝试Vite开发的方法。通过Vite，可以实现快速的冷启动，简化前端开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：Vite是一个web开发构建工具，可以实现闪电般的冷服务器启动。通过在终端中运行命令，快速地构建Vue项目。

1、npm安装

使用npm，需要先安装node。下面可查看node和npm是否已安装：

2、npm使用的常见命令

# npm为6点几
$ npm init vite@latest <project-name> --template vue

# npm为7以上
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

3、创建项目

新建终端，根据npm版本输入命令，修改<project-name>，回车：

然后依次输入执行三个命令：

运行后有一个链接，点击链接进入页面，则说明项目创建成功：

可以看到，vscode目录里，项目已经存在

温馨提示：若创建项目过程中出现报错，可自行复制报错内容，搜索查询，一般都能解决哈哈哈哈哈哈

4、简单表明一下新建项目中，一些文件或代码的作用：

node_modules：有很多依赖；

public：存放静态资源；

src：源代码部分，放置源代码；

main.js：入口文件

5、试试写一个简单的vite:

<script>
//声明式渲染，可以提高开发效率
export default{  //导出对象
  data(){  //data会默认进行解析
    return{
      num:0,
      uname:"张三"
    }
  }
}
</script>

<template>  
  <div>
    <p>{{num}}</p>
    <p>{{uname}}</p>
  </div>
</template>