这是我们Vue基础入门的第四季课程,在我们这一季课程开始之前,我们先来熟悉一下Vue CLI脚手架工具。我们之前使用Vue都是创建一个html文件然后引入Vue.js来使用的,这样做的目的只是方便大家理解学习Vue的基础知识点,那么我们在实际的项目开发过程中,几乎不会这样去使用vue。我们一般会基于一些Vue CLI来创建一个脚手架工程,在此基础上进行项目的开发。
Vue CLI是一个用于快速搭建和管理 Vue.js 项目的脚手架工具。它提供了一系列的命令和可选项,帮助我们轻松创建、开发和部署 Vue.js 应用程序。
可以简单理解,它就是个vue的开发环境,他会帮我们创建一个工程化的Vue基础项目。所谓脚手架顾名思义就是建房子的那个架子,搭好架子我们就可以开始建房子了
在使用Vue CLi的时候,我们需要提前安装好nedejs 如果你不熟悉node也没关系,跟着我的步骤操作就行,我们几乎只会用到NPM,后续大家可以去学习了解一下node和NPM包管理工具,毕竟现在做前端开发NPM是必须了解的。
下载安装nodejs
下载安装包 下一步~下一步安装就行了
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
node_modules
:包含项目的依赖
模块,通过 npm 或 yarn 安装
public
:存放静态资源文件,如图片、字体等。其他静态资源文件也可以根据需要添加到 public/
目录下。
src
:主要的源代码目录,包含以下子目录和文件:
assets
:存放静态资源文件,如图片、字体等。
components
:存放可重用的 Vue 组件。
App.vue
:应用的根组件,所有页面和组件都从这里开始嵌套。
main.js
:应用的入口文件,初始化 Vue 实例并配置全局设置。
.gitignore
:Git 版本控制系统的忽略文件配置,用于指定哪些文件不需要被 Git 追踪。
index.html
: 文件是应用程序的主 HTML 文件,Vue 应用将会被挂载到该文件中。
jsconfig.json
:javascript配置文件,用于设置一些Javascript编译配置
package-lock.json
:锁住package.json
的来源和版本号,多人开发拉取代码,执行npm install
生成node_modules
时依赖的版本能保持一致。
package.json
:项目的配置文件,包含了项目的元数据、依赖信息和各种构建命令。
README.md
:项目的说明文档,包含了项目的介绍、使用方法等信息。
vite.config.js
:vite打包工具的配置文件,在一个 Vite 项目中,vite.config.js
文件用于配置 Vite 构建工具的行为,包括开发服务器配置、构建配置以及插件配置等