利用Vite / Vue-Cli快速创建Vue项目

月月瞌睡了
896 阅读5分钟

利用Vite / Vue-Cli快速创建Vue项目

Hi!伙伴们😜，今天有空闲时间准备写小demo就顺手记录下 如何 利用Vite / Vue-Cli 快速创建Vue项目，保姆级教程✍，一看一个准会🤔！看起来好像写了很多，其实内容不多只是详细罢了，要有耐心哦❤~ 那我们开始喽~📢

一、Vite

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

1、在我们要创建项目的文件夹内打开终端

image-20240222093858533.png

2、在文件路径地址栏填写 cmd 按 回车键 从而打开终端

image-20240222094048908.png

image-20240222094136410.png

3、利用Vite创建Vue项目的命令

 // 在终端输入对应命令
 
npm： npm create vite@latest

yarn： yarn create vite

pnpm： pnpm create vite

4、这里是提问 需要安装(create-vite@5.2.1)此包，是否继续 ？ 我们填写 y（yes）按 回车键，进入下一步。

image-20240222094634040.png

5、输入要创建的项目名称，按 回车键 进入下一步。

image-20240222094929873.png

6、选择你要创建的项目，我们要创建Vue，注意用方向键选择，选到Vue,按 回车键 即可。

image-20240222095036766.png

7、选择要使用的变成语言，我这里选择的是Ts，注意用方向键选择， 大家看自己用什么选什么。按 回车键 进入下一步。

image-20240222095149781.png

8、这步，我们的项目就已经建成功了。接下来我们安装依赖，启动项目

image-20240222095354986.png

9、安装依赖命令： npm i (npm install)，用编程工具打开项目，在项目终端里安装依赖。

image-20240222100511016.png

10、启动项目：使用 npm run dev 命令， 点击Local，看到如下页面就是运行OK啦

image-20240222100743966.png

image-20240222100831943.png

11、项目文件目录介绍

打开项目我们可以看到这些文件目录，我顺嘴介绍下这些文件目录。

image-20240222101826848.png

  • vscode 默认生成的，可删可不删。

  • node_modules 是我们安装依赖的位置，我们按照的依赖可以在这个文件夹中看到！

  • public 目录用于存放静态文件，例如 index.html 文件和图片等。

  • src 目录用于存放源代码。

  • assets 目录用于存放静态资源，例如图片、字体等。

  • components 目录用于存放组件。

  • App.vue 文件是应用程序的根组件。

  • main.js 文件是应用程序的入口文件

  • index.html 就是整个项目的页面

  • package.json 是整个项目的说明书，项目安装的依赖，开发依赖等

  • README.md 说明文件

  • tsconfig.json typescript配置文件

  • vite.config.ts vite配置文件

二、Vue-Cli

1、Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。

image-20240222093858533.png

2、在文件路径地址栏填写 cmd 按 回车键 从而打开终端

image-20240222094048908.png

image-20240222094136410.png

3、在终端输入npm install -g @vue/cli

image-20240222110016198.png

4、利用Vue-Cli 创建Vue项目的命令 vue create 项目名

这个是换源的 你们没有此页面可忽略，有，输入y 按回车键即可。

image-20240222110253976.png

5、选择生成Vue项目的版本，注意用方向键选择。前两项都是官方默认封装好的设置，这里选择第三项（自己手动选择功能）之后，按回车键 进入下一步！

image-20240222110639987.png

6、选择所需要的功能，注意！！！不要随意按回车！！！ 用方向键选择，使用空格选中每一个特性，选择完成后，按 回车键 确认。

image-20240222111202753.png 选择完成

image-20240222111512516.png

7、选择Vue版本，这里我们选择3.x，按 回车键 进入下一步。

image-20240222111552296.png

8、选择class-style 的模式 输入y 按 回车键 进入下一步。

image-20240222111847096.png

9、选择TS 的模式 输入y 按 回车键 进入下一步。

image-20240222112052449.png

10、选择Router 的模式 输入y 按 回车键 进入下一步。

image-20240222112214644.png

11、选择Css预处理器，你们习惯用什么就选什么，注意用方向键选择。按 回车键 进入下一步。 这里我选Scss。

image-20240222112521473.png

12、选择代码格式规范，这项功能在前面你们可选可不选。这里就选择仅有防错功能的第一项。

image-20240222112750771.png

13、选择（保存文件时 / 提交GIT前 运行linter,检查代码）我们选择第一项，按 回车键 进行下一步。

image-20240222112906095.png

14、选择把配置放在哪里（专用配置文件中 / package.json）我这里选择第一项， 按 回车键 进行下一步。

image-20240222113638146.png

15、选择是否为后续项目配置，因为我们现在就要用项目！所以我们选择否，输入 n ，按 回车键 进行下一步。

image-20240222113905749.png

16、到这里，我们用Vue-Cli脚手架就把我们想要的Vue项目创建好啦

image-20240222114634657.png

17、用编码工具把项目打开，这里用Vscode ，在终端输入npm run serve命令 运行项目。打开页面给我们的网址：看到如下界面就说明我们项目运行成功啦

image-20240222115618335.png

image-20240222115347349.png

18、项目文件目录介绍

打开项目我们可以看到这些文件目录，我顺嘴介绍下这些文件目录。

image-20240222120213214.png

  • node_modules 是我们安装依赖的位置，我们按照的依赖可以在这个文件夹中看到！
  • src 是我们进行编程的位置，主要看这里就可以了！
  • assets 用于存放公共的图片和css资源
  • components 用于存放组件的位置
  • router 用于存放路由配置文件的位置
  • store 用于存放状态管理器配置的位置
  • views用存放路由要展示的页面
  • App.vue 文件是应用程序的根组件
  • main.js 文件是应用程序的入口文件
  • index.html 就是整个项目的页面
  • eaalintrc.js eslint 配置文件
  • package.json 是整个项目的说明书，项目安装的依赖，开发依赖等
  • README.md 说明文件
  • tsconfig.json typescript配置文件
  • vue.config.ts vue-cli配置文件

哇~你真棒👍 ~ 到这里 Vue CLI 和 Vite 搭建项目的学习 就结束啦🎉

温馨提示：Vue CLI，它现在处于维护模式，我们也可以用，但更建议使用 Vite 开始新的项目。

拜拜喽 🌹💕 🎈

avatar
文章
阅读
粉丝