_
2024/4/3 00:14:00261

初识VUE ClI脚手架工具

这是我们Vue基础入门的第四季课程,在我们这一季课程开始之前,我们先来熟悉一下Vue CLI脚手架工具。我们之前使用Vue都是创建一个html文件然后引入Vue.js来使用的,这样做的目的只是方便大家理解学习Vue的基础知识点,那么我们在实际的项目开发过程中,几乎不会这样去使用vue。我们一般会基于一些Vue CLI来创建一个脚手架工程,在此基础上进行项目的开发。

什么是VUE CLI

Vue CLI是一个用于快速搭建和管理 Vue.js 项目的脚手架工具。它提供了一系列的命令和可选项,帮助我们轻松创建、开发和部署 Vue.js 应用程序。

可以简单理解,它就是个vue的开发环境,他会帮我们创建一个工程化的Vue基础项目。所谓脚手架顾名思义就是建房子的那个架子,搭好架子我们就可以开始建房子了

在使用Vue CLi的时候,我们需要提前安装好nedejs 如果你不熟悉node也没关系,跟着我的步骤操作就行,我们几乎只会用到NPM,后续大家可以去学习了解一下node和NPM包管理工具,毕竟现在做前端开发NPM是必须了解的。

下载安装nodejs

Node.js 中文网 (nodejs.com.cn)

下载安装包 下一步~下一步安装就行了

npm在国内的速度有点慢,容易出问题,可以配置一下npm镜像源也可以考虑使用cnpm

镜像源配置

npm config set registry https://registry.npmmirror.com

安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

创建一个Vue项目

npm create vue@latest

然后安装项目依赖

npm install OR cnpm install

安装vscode 开发插件

Vue - Official 、 Vue 3 Snippets 、 Vue VSCode Snippets

也可以安装(只不过我发现这个插件有些问题,所以我没有安装)

Vetur

工程目录文件介绍

  1. node_modules:包含项目的依赖模块,通过 npm 或 yarn 安装

  2. public:存放静态资源文件,如图片、字体等。其他静态资源文件也可以根据需要添加到 public/ 目录下。

  3. src:主要的源代码目录,包含以下子目录和文件:

assets:存放静态资源文件,如图片、字体等。

components:存放可重用的 Vue 组件。

App.vue:应用的根组件,所有页面和组件都从这里开始嵌套。

main.js:应用的入口文件,初始化 Vue 实例并配置全局设置。

  1. .gitignore:Git 版本控制系统的忽略文件配置,用于指定哪些文件不需要被 Git 追踪。

  2. index.html: 文件是应用程序的主 HTML 文件,Vue 应用将会被挂载到该文件中。

  3. jsconfig.json:javascript配置文件,用于设置一些Javascript编译配置

  4. package-lock.json:锁住package.json的来源和版本号,多人开发拉取代码,执行npm install生成node_modules时依赖的版本能保持一致。

  5. package.json:项目的配置文件,包含了项目的元数据、依赖信息和各种构建命令。

  6. README.md:项目的说明文档,包含了项目的介绍、使用方法等信息。

  7. vite.config.js:vite打包工具的配置文件,在一个 Vite 项目中,vite.config.js 文件用于配置 Vite 构建工具的行为,包括开发服务器配置、构建配置以及插件配置等