vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

目录

一、搭建vue3 项目前提条件

二、通过create-vue搭建vue3 项目

三、搭建一个 Vite 项目

四、构建一个 Vite + Vue 项目

五、打开Vue 项目管理器

六、Vite + Vue 项目目录结构

七、Vite.config.ts配置


一、搭建vue3 项目前提条件

前提条件

  • 熟悉命令行
  • 已安装 16.0 或更高版本的 Node.js

 (1)、检查node 和npm版本信息

同时按window+R键,输入cmd,打开命令提示符窗口

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_第1张图片

输入: node –v (查看本机安装的node版本)

 输入: npm –v (查看本机安装的npm版本)

(2)、升级你的 Node 版本

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_第2张图片

如果提示没有安装node或Node.js 版本 较低,请升级你的 Node 版本。

详细教程可参阅下面链接文章:

  • Vue3安装配置、开发环境搭建(组件安装卸载)(图文详细)https://blog.csdn.net/weixin_69553582/article/details/129584587

二、通过create-vue搭建vue3 项目

 同时按window+R键,输入cmd,打开命令提示符窗口

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_第3张图片

进入你准备搭建vue3 项目的相应目录,例如本例目录地址:C:\00program\vue\vuelearn

  • 输入:npm init vue@latest

这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_第4张图片

 你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vueproject1
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Scaffolding project in C:\00program\vue\vuelearn\vueproject1...

我们依次输入问题的答案,帮助创建项目:

  • Project name:------》项目名称,默认值:vue-project,可输入想要的项目名称,此处我写的是:vueproject1。
  • Add TypeScript? ------》是否加入TypeScript组件?默认值:No。
  • Add JSX Support? ------》是否加入JSX支持?默认值:No。
  • Add Vue Router for Single Page Application development? ------》是否为单页应用程序开发添加Vue Router路由管理组件?默认值:No。
  • Add Pinia for state management? ------》是否添加Pinia组件来进行状态管理?默认值:No。
  • Add Vitest for Unit testing? ------》是否添加Vitest来进行单元测试?默认值:No。
  • Add an End-to-End Testing Solution?------》是否添加端到端测试?默认值No。
  • Add ESLint for code quality? ------》是否添加ESLint来进行代码质量检查?默认值:No。

如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_第5张图片

脚手架工程项目在指定位置被创建好。

在项目被创建后,通过以下步骤安装依赖并启动开发服务器:

Done. Now run:
  cd vueproject1
  npm install
  npm run dev

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_第6张图片

cd进入vueproject1目录后,依次输入以下命令,

  •   npm install
  •   npm run dev

vite服务器启动,显示了项目地址,如下图:

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_第7张图片

我们在浏览器打开 http://localhost:5173/ 

显示页面如下图: 

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_第8张图片

 现在已经可以运行起一个 Vue 项目!

请注意,生成的项目中的示例组件使用的是组合式 API 和

你可能感兴趣的:(#,vue.js,前端,前端框架,vite,create-vue)